1.构建项目：

vue ui --- 新建新项目：

填写文件夹名字直接下一步；

选择手动然后下一步；

选择bable、router、使用配置文件然后下一步；

use history mode for router? (是否使用历史模式路由，默认不使用，所以直接下一步)；

添加插件：vue-cli-plugin-element（安装完了之后全部引用即可，Fully import，默认是选择，所以直接下一步）；

添加依赖（运行依赖）：axios

 

2.初始化项目：

核心为main.js及下属app.vue和路由

2.1：main.js貌似不用动：

 

 

 2.2：app.vue:

 

 

 2.3: 路由：

 

 

 2.4： 在appg根组件里随便写点什么测试然后把 views文件删除、components里的组件都删除

 

3.新建组件使用：

app.vue为所以组件的父组件，所以里面放个 <router-view></router-view> 其它就不放了（有其它组件要通过路由（url路径）自动在本组件展示时需给它容器即<router-view></router-view>标签，父子组件不用，router-link不用），

建议在components里新建组件 --- 然后在路由里设置路由就没了

 

4.路由使用：

4.1 基本使用：

    {path: '/', redirect: '/login'}, //如果url地址是 / 就重定到ur地址 /login     {path: '/login', component: login}, //如果url地址是 /login 跳转到 login组件，这种方式除了app根组件会覆盖其它组件     {path: '/home', component: home,children:[{path:'/home1',component:home1}] }  //当url地址是 /home1 时会同时展示home1和home组件，因为是嵌套关系 4.2 路由传参： login组件： <router-link to="/home1?name=1&age=10">点击</router-link> //点击时跳转到home1组件并传参 home1组件：{{this.$route.query.age}} //使用差值表达式得到传过来的age参数   5.父向子组件使用（非路由嵌套）：   父子传值： home1父组件： <template> <home2 :home1="home1" ></home2> //3将它展示到自己身上，并把自己data里的参数传给子组件（:home1可以自定义） </template> <script> import home2 from '../childrens/home2.vue'  //1.引用组件 export default {  data(){return{       home1:'hom1父里面的值'   }}, components:{ home2 } //2.将它变成自己的子组件 } </script>   home2子组件： <template>   <div id=''>   　　{{home1}} //2.使用父组件传的值，此时值是只读的，要修改的话在自己data里弄个变量赋值给它再操作自己的变量   </div> </template> <script>  export default {   props:['home1'] //1.接受父组件传的值 } </script>   

子向父传值：

home1父组件： <template> <home2 @a1="a1" ></home2> //3将它展示到自己身上，并把自己methods里的方法传给子组件（@a1可以自定义, "a1"加括号的话就是传方法里的值） </template> <script> import home2 from '../childrens/home2.vue'  //1.引用组件 export default {  data(){return{       data2222: null   }}, methods: {       a1(data){  console.log('父亲的方法' + data); this.data2222 = data }    // data表示子组件调用此方法时传的参数, this.data2222 = data表示将参数保存到自己的data里   }, components:{ home2 } //2.将它变成自己的子组件 } </script>   home2子组件： <template>   <div id=''>　 　　<button @click="a()">点击传值给父</button> //1.找到时机触发父组件传过来的方法   </div> </template> <script>  export default {   data(){return{       home2:{name:'张三', age:6}   }},   methods: {       a(){ this.$emit('a1', this.home2) }   //2.调用父组件传过来的方法并传自己的data数据   } } </script>