Vue和webpack

vue-loader的安装和在webpack.config.js中的配置:https://vue-loader.vuejs.org/zh/guide/#vue-cli

在运行的时候可能会出现 runtime-only的错误,主要是导入的vue并不是全部的vue,可以通过导入指定的路径下的vue文件

import Vue from '../node_modules/vue/dist/vue'(这里路径可能不同)

vue的模板

<template>//模板
    <div>
        这是主页--{{msg}}5555
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>
</template>

<script>
export default { //这里就是子组件的各属性放置区。
    data:function(){ //数据等
        return {
            msg:"sss"
        }
    },
  methods }
</script> <style> /* 不写 lang 属性的话默认是 css 可以是 scss less*/   //不写scoped 默认这些样式是全局的,写了就是当前组件的,但是也会影响当前组件下的子组件。
div{ color:aqua; }
</style>

也可以通过修改node_models中vue目录中package.json中main(入口文件)属性的值 设置为dist/vue.js

 vue-router的安装和配置

npm install --save vue-router

 在使用之前必须将vue-router绑定到vue上

import Vue from '../node_modules/vue/dist/vue'
import VueRouter from "vue-router"
//必须绑定router给vue
Vue.use(VueRouter);

 对于路由的使用和之前的路由使用基本相同。

猜你喜欢

转载自www.cnblogs.com/panjingshuang/p/11983221.html