vue-cli基础学习

### 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

---

---