美文网首页vue
接触vue-cli3项目

接触vue-cli3项目

作者: 荼蘼toome | 来源:发表于2020-01-04 15:43 被阅读0次

打开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.导入


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

相关文章

网友评论

    本文标题:接触vue-cli3项目

    本文链接:https://www.haomeiwen.com/subject/ocpxactx.html