vue

vue项目的技术总结

前段时间开启了对vue的学习，做了一个仿照网易云安卓app。

总结写技术点:

0. 这里有一个关于webpack的知识点需要记录，webpack后的项目IE ，360 等低级浏览器是不支持的，可在webpack里安装一个兼容性处理的插件 babel-Pllyfill 插件，用来将es6转es5的.这步操作后，低级浏览器也能正常加载项目。

1.vueJS做单页面应用是最合适不过的了，于是选择了vue的混合app的方向。毕竟现在的app基本都是单页面应用。前端技术栈：vue+vur-router+voinc 。

2.熟悉node.js和npm是开启vue项目的一个必须之路，（虽然有同事说，使用vue不一定要在node环境下）但是，本人还是觉得一个真正的vue项目是一定要有webpack配置的，这样开发的vue项目才是完整的。

3.在node和npm安装插件的环境下，vue的很多功能和开发过程中的便捷才能得以体现。

4.webpack下打包好后的项目都是，文件里面的index.html ,和src文件夹里面的资源。（所以在webpack的作用下，webpack的配置文件都是用node.js的语法来构成的，整个项目只运行index.html 和bundle后的js文件）webpack的loaders和插件都是用来整合前端资源的，有图片/css/vue后缀的文件/js文件等等；如果要想在webpack项目里面引入其他的功能库，都要安装好依赖包后，在webpack里面写配置语句，然后才能在项目里面引入功能库资源，这样功能库才能被正常使用；packge.json文件是安装依赖的配置文件，还有很多脚本指令的设置。

5.vue 资源引入和加载后，都是mvvc的模式设计代码。视图层/逻辑层 ，不过前端写的最多的可能是css吧。

6.vue挂载实例

• 一般的vue实例挂载代码 main.js:

       new Vue({  
                     //挂载点,模版,实例之间的关系   
                     el:"#root", template:"<h1>hello{{msg}}</h1>",  
                      // vue数组  
                       data:{ msg: "hello world", number: 123, content:'<h1>hello</h1>' },   
                       // vue实例的方法  
                       methods:{ handleClick:function(){  //function code }   
                        })  
  

• 一般的vue实例挂载代码index.html：

       ```
          <div id="root"> 
          </div>
        ```
  

• 本项目的vue实例挂载main.js：

      import Vue from 'vue'
      import Vonic from 'vonic/src/index.js'
      import $ from 'jquery'
     // Page Components 引入组件
     import Music from './components/music.vue'
     import Mine from './components/mine.vue'
     import Vedio from './components/vedio'
  
    // Routes  路由配置
   const routes = [
      { path:'/',component:Music},
      { path:'/mine',component:Mine},
      { path:'/vedio',component:Vedio}
    ]
    //由于使用voinc ，voinc会自动挂载一个vue实例到von-app里面去，同时可以使用引入的voinc的各种组件
   Vue.use(Vonic.app, {routes: routes})
  

• 本项目的vue实例挂载ndex.html：

      <von-app></von-app>  
      <script src="./dist/build.js"></script>  
      <script type="text/javascript" src="./dist/cordova.js"></script>  
  
  

7.开始用mvvc的模式写自己的代码，src里面放置各种资源文件。css/image/static/component ,vue都是以组件为单位，每个组件都是html css js 这三个部分。js的话最好用es6标准。css有些牛逼的人还写sass 或是less 。。

8.vue有很多的技术点，一旦学会使用后，是极其方便的实现功能的，下面介绍部分技术点：

• 组件调用组件时候，传参数，业务功能就是，当使用该组件的时候，在不同的地方调用的时候可以让这个被调用的组件拥有不同的参数，从而使用这个参数对这个组件做不同的修改。

        // 这是我在A组件里调用Header组件的时候
        <Header :pageIndex="0" :backHeight="backStyle"></Header>
        
        //同时我在Header组件里设置prop参数 ，如果Header接受到了这个参数，就可以调用相应的方法。如果没有接受到该参数，相应的方法自然就不执行。
         props: [
                'pageIndex',
                'backHeight'
            ],
        
  
        //这是我在B组件里调用Header组件的时候
        <Header :pageIndex="1"></Header>
  
       //这是我在C组件里调用Header组件的时候   通过传递参数的不同，来确定Header在不同的组件里所需要做的不同的操作。
        <Header :pageIndex="2"></Header>
  

• 路由的切换

           //router-link 是vue-router的官方路由链接标签，在浏览器里渲染为a标签，to属性就是这个标签的链接路径 v-for是vue语法糖里面的循环指令
      <div v-for="item in routerItems">
           <router-link :to="item.r_to" :class="item.id===pageIndex?'router-link-ad':''">   
               <i :class="item.icon"></i>   
           </router-link>   
       </div>   
  

• 动态组件的切换

  <tabs :tab-items="tabs" :tab-index="tabIndex" :on-tab-click="onTabClick" ref="tabs" style="top:-11rem;position:relative;"></tabs>   
  <keep-alive>   
    <component :is="currentView">   
         <!-- 非活动组件将被缓存！ -->   
     </component>   
  </keep-alive>   
  
     import Header from "./header.vue" 
     import Recommend from "./music_recommend.vue"
     import Friend from "./music_friend.vue"
     import Redio from "./music_redio.vue"
  
     let a = new Date();
     export default {
       components:{
         Header,
         Recommend,
         Friend,
         Redio
    },
       data () {
           return () {
                   currentView:'recommend';
               }
    }
       //之后用一个函数动态切换currentView 就可以动态切换组件了。