vue-cli学习

### vue-cli
    * 开发环境快速生成工具
    1 安装 npm install -g @vue/cli
         查看版本 vue --version
    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的不同，将用户待到不同的界面下或者视图
    3. 如何跳转视图/页面
         * 使用 router-link组件
         * 例如：<router-link to="/gywm">关于我们</router-link>
    4. router-link的使用
        * to属性 想要连接的地址
        * exact 精确匹配
            1. 例如<router-link to='/' exact>
                * .router-link-active 当前的路由被激活，响应的router-link上添加的类名
    5. 动态路由
        * 动态路径参数以冒号开头
        {path：'/detail/:id',
        component:Detail}
    6. 路由传参
        * router-link传参<router-link to='/detail/123'>中国足球</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