### vue-cli
* 开发环境快速生成工具
1 安装 npm install -g @vue/cli 查看版本 vue --versio
n 2 初始化项目 vue init webpack 项目名
3 进入项目目录 安装依赖 npm install
4 启动项目 npm run dev
5 项目开发完成以后 打包：npm run bulid 小米商城为例 https://m.mi.com/首页 https://m.mi.com/category分类
### vue-router
1. vue路由组件
2. 根据url的不同，将用户待到不同的界面下或者视图
. 如何跳转视图/页面 * 使用 router-link组件 * 例如：关于我们
4. router-link的使用 * to属性 想要连接的地址 * exact 精确匹配 1. 例如* .router-link-active 当前的路由被激活，响应的router-link上添加的类名
5. 动态路由 * 动态路径参数以冒号开头 {path：'/detail/:id', component:Detail}
6. 路由传参 * router-link传参中国足球:to="{ name:'Detail', params:{ id:456, } }"
7. 接受路由传参 1. this.$route.params.XXXX
### vue-router js实现跳转 1. this.$router.push('路径') 例如: this.$router.push('/home')
### .vue文件 1. 单文件组件
2. 三部分构成 1. template 模板--->HTML和vue的模板语法
2. script ---> vue的组件语法
3. style ---> 样式 * 加scoped 只会在当前文件自起作用 * 不加scoped 全局起作用步骤
作业 使用vue-cli创建 shop的项目 实现四个视图和一个导航 导航激活状态为橙色 首页 home.vue localhost:8080/ 分类 category.vue /category 购物车 cart.cue /cart 个人中心 center.vue / center
