Vue 开发配置

1、vue-cli

      vue-cli 命令行工具

      进入项目文件，输入命令 cnpm install vue-cli -g

      使用命令 vue -V(注意大写) 查看版本

      使用模板 vue init webpack helloworld

      我暂时不太会，请多多指教！如图是我的选择截图：

     

     配置时间较慢，请耐心等待。。。

     小例子：安装测试环境输入命令 npm install vue --save-dev  安装到生产环境输入命令 npm install vue --product

     完成后进入项目文件，输入命令 npm run dev

2、vue-router 路由

      注意： / 为绝对路径，在 routes[ ] 数组里面，第一层级的path必须写绝对路径 / ，其里层的children[ ]的 path 可以写相对路径

      1）vue-router 入门(Router1.js)

      以下为 Router.js 代码片段

     

      2）子路由(Router1.js)

      以下为 Router.js 代码片段

     

     3）路由中参数的传递(Router1.js)

     以下为 Router.js 代码片段

     两种方法，代码中有注释

          

     4）路由表的组件群(Router2.js)

    

     5）URL 传值 (Router3.js)

     在 vue 里 ： 是绑定的意思

     

      6）query&append&exact(Router4.js)

          a、query

          暂时的理解是 name 与 params 对应出现    path 与 query 对应出现

             

          b、append && exact

          append 不严谨的，点击后会一直添加路径目录

                

          exact 严谨的，点击后只会添加一次，建议经常使用

                   

     7）路由重定向(Router5.js)

          简单的重定向(不能)

                

         复杂的重定向

            

   8）alias别名(给路由起别名)

   

   9）路由的过渡动画(RouterAnimation.js)

       a、最基础的 vue 的动画形式

             首先在 src 文件夹下新建一个 transition.vue 文件

             transition.vue 基本分为三块：tempate  script  style

             <style scoped></style>   scoped -- 作用域，意思为只作用于.vue 文件

              index.html 代码片段：

             

             main.js 代码片段：

            

             transition.vue 代码片段：

            

             最终效果图：

             点击按钮，内容显示/隐藏

        b、基于路由把动画样式表写进去(RouterAnimation.js)

              RouterAnimation.js 代码片段：

             

              <transition name="fade"></transition> 中的 fade 是随便起的，只要和 style 样式中对应即可，如：

              <transition name="fade1"></transition>，下图中的 style 应该改为 .fade1-enter-active,.fade1-leave-active{ }

              index.html 代码片段：

             

   10）watch 监控动画

        

    注意修改一下 css 样式

    11）vue (Router6.js)

           a、编写 404 路由

               

           b、如何在路由上编写 VUE 模版

           以之前编写的 transition.vue 为例

          

           c、history 的解释

           mode的可选参数为 history/hash

           history下网址栏如下

               

           hash下网址栏如下

                 

    11）路由里的钩子 (Router7.js)

         

    12）编程式导航