打开test3项目
新建vue

first.vue first.vue

router.js完成路由的引用

定义页面,开始即加载

• 我在first中没有写上面的一层

原因 :

app.vue

这个页面是主组件

新增

views文件存放视图层
components放组件

分工明确

vuecli3的图形界面里面可以设置端口号...有的时候端口号就是8081.等其他的情况 ..不一定都是8080

一切按照npm run serve出来的端口号为主

一切看环境
运行cli2工程
npm run dev
运行cli3
npm run serve

实现cli3

2-3版本升级
文件结构 : 简洁 高效

创建菜单

新建文件A,Bvue ...first.vue文件
router.js 中

文件名注意区分大小写

个人路径..习惯使用小写字母......使用路由跳转 ---注意相同

嵌套路由

转换A页面不显示 ....
若是跳转没有则需要在first.vue 包含子路由
中添加挂载点<router-view>

每一个页面都加上...不会错
当你缺少分析经验就在每个页面增加<router-view>

样式的添加

style

1. <router-link > a标签
   全局标签样式

2. class=""

   
   image.png

3.导入

4. html
   <link rel="stylesheet" type="text/css" href="ys1.css">
   层级较高.... 不建议使用