vue-cli##
vue-cli是vue官方提供的脚手架的工具
- 使用vue-cli的优势
- 成熟的vue项目架构设计
- 提供本地测试服务器
- 集成打包上线的方案webpack 或者grulp
- 使用vue-cli的系统要求
image.png
命令行中使用node运行js
image.png
工具MobaXterm
全局安装
image.png
vue list 可用的模板
image.png
安装开发依赖，可在package.json中查看，
npm install命令
image.png
image.png
npm run dev和npm run builddata采用函数方式，有自己的作用域
image.png
总结
image.png
es6语法##
导出com时，要用花括号
image.png
引用该组件时，也要使用{com}
image.png
前端路由##
前端路由：通过js控制
安装路由
配置文件package.json更新了
image.png
在入口文件里引如VRouter，注册，实例化，插入到vue实例中
设置映射map
image.png
使用
使用
路由默认加了哈希，有一个#号
设置mode:history没有哈希，
image.png
image.png
页面内的跳转，
router-link内置组件，默认解读为一个a标签
image.png
路由参数
image.png
映射表里添加color参数
image.png
组件内部获取参数，this.$route全局对象
image.png
image.png
image.png
image.png
image.png
路由嵌套
apple/redapple
image.png
redapple是apple的子组件
访问子路由，redapple出现
image.png
使用router-link直接跳转
同时传入参数
image.png
具名路由，通过name访问
image.png
image.png
具名视图
image.png
在component里为不同的视图指定不同的组件
image.png
默认为a标签，也可以通过tag指定为li标签
默认
router-link为声明式导航，在模板里声明
编程式导航
image.png
结合使用
image.png
路由重定向##
image.png
过渡和动态组件##
image.png
用keep-alive做缓存
用keep
类可以在router中进行设置
image.png
总结
image.png
网友评论