vue裝逼神器簡述

主要是分享下用vuejs開發項目過程中遇到的問題，vuejs開發的優勢和需要注意的地方。

項目主要頁面：主頁,最新，分類，分類列表，詳情頁，結果頁，斗圖（列表，制作頁）

效果圖：

地址：https://zbimetest.iflyresearch.com/#/index?appid=tangdaoya

工具：vue腳手架：vue-cli 

項目結構：

 

知識點：vue語法、vue-router(路由)、Mint UI(基於vue的移動端組件庫)、es6(箭頭函數，axios等)、webpack配置等

優點：

1.組件式開發。vuejs可以實現組件式開發，每個頁面通用的元素都可以抽取為一個公用的組件，比如上面的搜索框和導航欄可以抽取成一個SearchResult.vue文件。其他頁面需要用就直接導入

export default {
    components: {
      NavBar,
      Search,
      InfiniteLoading
    }

這樣極大地節省了開發工作量。

2.路由。vue有router組件集成了路由功能，利用#網頁定位的功能，實現多功能的單頁應用，也稱為前段路由，詳情看http://www.cnblogs.com/zhouyangla/p/6392404.html。

路由的跳轉可以統一配置：

export default new Router({
  routes: [
    {
      path: '/index',
      name: 'index',
      component: Index,
      meta: {
        keepAlive: true // 需要被緩存
      }
    },
    {
      path: '/new',
      name: 'new',
      component: New,
      meta: {
        keepAlive: true // 需要被緩存
      }
    }
}）

如果地址后面有查詢參數可以這樣接收：let id = self.$route.params.id;

頁面是否需要緩存：可以加上keepAlive字段進行控制，顯然主頁包括大量的圖片是需要緩存的。

監測路由變化：

watch: {
      '$route'(to, from){
        console.log('從' + from.fullPath + '到' + to.fullPath);
        let toStr=to.fullPath;
        let fromStr=from.fullPath;
        if (!toStr.includes('/index')) {
          this.$refs.infiniteLoading.isLoading = true;
        } else {
          this.$refs.infiniteLoading.isLoading = false;
        }
      }
    }

因為是單頁應用，所以在主頁"跳轉后"到其他頁面后，有的插件對主頁的監聽事件還沒結束，導致事件繼續執行，這時候就可以通過監聽路由的方式，靈活的對事件進行控制。

3，es6 import ，需要什么組件直接引入，省略無關開銷。

import {Toast} from 'mint-ui'//導入彈窗組件

4，一些小技巧，基於vue自身雙向綁定和數據驅動的特性。

li點擊高亮，以前的做法就是點擊這個li標簽，后加上active class，然后移除其他的active。vue可以這樣實現：

<li class="item" v-for="item in items" @click="selected(item)" :class="{active: active == item}">{{item}}</li>

selected (item) {
        this.active = item;
 }

需要靈活變動的表單：比如說下拉框最后一個選項支持用戶自定義文字，vue可以這樣寫：

　　selectChange(e){
    if (e.target.value == '自定義文本') {
      this.inputShow = true;//顯示文本輸入框
     } else {
      this.inputShow = false;//隱藏
     }
     }

5，vue-cli使用webpack打包，優化頁面性能，自動解決flex布局等不同瀏覽器的兼容性問題，給開發提供熱加載功能及時響應頁面變化，
支持es6和less高級語法等
6，狀態管理vux，因為項目中沒有狀態需要集中管理，所以暫時沒用到。

缺點：
1.因為很多插件是直接在網頁上引入腳本使用的，不支持import的方式引用。包括cnzz統計腳本等，不能集成到vue中去，給開發帶來一些麻煩。
2.有的時候不需要雙向綁定，只需要數據單向流動，這時候用vue就比較麻煩

   心得：

　1.開發項目當去實現小功能去網上找插件有的時候是很麻煩的，不光是因為實現的功能不盡人意，還因為引入的大量的多余代碼，導致出現未知的 錯誤。所以有時間盡量自己去造“輪子”，這樣才能完美解決問題。

   2.就是vue+es6開發項目很快，以后es6是主流，要逐漸習慣用es6的語法去寫代碼。

   3.開發一些簡單的項目用不到jquery，原生js的要開始熟悉。https://github.com/oneuijs/You-Dont-Need-jQuery