Vue的使用總結和技巧

chavesgu發表於2018-07-24
Vue

這篇文章主要是巨集觀總結，如果有哪部分知識需要另外單獨講解，根據留言會另外發布。

Vue-router詳細講解

歡迎來我的Vue技術群交流：Vue887516034

起步

當然是尤大的官網入手了,許多剛學框架的新手都喜歡從網上找視訊教程，例如慕課網這種，本人不建議這種學習方法，因為視訊的作者會讓你跟著他的思維去寫一套他的風格的程式碼，這是一個細思極恐的事情。

其實vuejs官網的東西是非常豐富的，並且我認為需要加入瀏覽器書籤，是需要不間斷的重複看的，因為會更新新的文件，不經常留意官網，可能就會漏掉新的語法糖，開發體驗應該是每個開發者都需要的。

專案的開始

建議直接上vue-cli腳手架，從一開始就進入模組化程式設計的思想。

雖然我也說不出什麼是模組化程式設計，好像就是那麼回事吧。

vue-cli@2+老掉牙的操作我就不提了，全域性安裝腳手架，再用腳手架的cmd命令去拉取webpack模板。

這裡提一下，可以自己去官方的github去fork下來，然後自己定義一個喜歡的模板，比如加入vuex等等，具體操作自行搜尋。

我在上個禮拜也體驗了vue-cli@3.0，目前還沒正式釋出，不過已經可以使用了，這個我也不多講了，我們們掘金也有相關文章。

友情連結 vue.config.js相關配置 config.md

實操

1、Vue

vue的語法不多說了，無非就是template,script,style,建議根據尤大的語法規範去書寫。

eslint一個強制規範編碼的外掛，不建議使用，經常出現莫名其妙的錯誤，公司內部可以自己定義一套規範，並且文件整理，也是個不錯的選擇。

--------------- 總結和技巧 -----------------

<template>
    <div :style="{color:$options.filters.txtToColor(msg)}"></div>
    <!-- 行內filter -->
</template>
複製程式碼
import { txtToColor } from '/path/to/filters.js'
export default {
    name:'a',
    data(){
        return{
            msg:123,
            obj:{
                msg:321
            }
        }
    },
    filters:{
        txtToColor
    },
    watch:{
        'obj.msg'(newV,oldV){ //監聽物件裡的屬性
            
        }
    }
}
複製程式碼
<style lang="less/sass/stylus...">
</style>
複製程式碼

2、Vue-router

router第一次接觸這個詞的小萌新可能一臉懵逼，因為jquery已經寫習慣了。

因為vue是單頁面應用，router其實就是把以前的domain.com/a.html,domain.com/b.html多頁面整合為多路徑管理多個模組。

--------------- 總結和技巧 -----------------

//router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);

const router = new Router({
    //此處可以利用node環境變數來設定打包後專案放在伺服器某個目錄後，路由的根路徑配置
    base: process.env.NODE_ENV==='development'?'/':'/some/dir/',
    //...routes
});
//很多人把beforeEach寫到main.js
router.beforeEach((from,to,next)=>{
    //...某些攔截操作，是否登入許可權等
    next()
});
export default router
複製程式碼

每一層子路由，就需要多一層router-view，如果只是希望瀏覽器的url作為語義，可以使用alias

//router.js
const router = new Router({
    routes:[
        {
            path:'/b',
            component:B,
            alias:'/a/c'//這樣當路徑為/a/c時  頁面顯示為B，router-view也會對應根路由
            //別名只能通過path跳轉
        },
        {
            path:'/a',
            component:A,
            children:[
                {
                    path:'c',//這裡要注意  空配置要寫在後面。
                    //因為路由匹配到規則後就不會繼續匹配了
                }
            ]
        }
    ]
})
複製程式碼

路由懶載入

原理就是將需要懶載入的路由通過webpack分開打包，切換至對應路由時，才開始載入js檔案，可以實現首頁載入速度，但是整體專案體積會變大。

//router.js
const router = new Router({
    routes:[
        {
            path:'/a',
            component:()=>import('path/to/A.vue')
        }
    ]
})
複製程式碼
//package.json
"devDependencies":{
    //...
    "babel-plugin-syntax-dynamic-import": "^6.18.0"
    //...
}
複製程式碼
//.babelrc
"plugins":["syntax-dynamic-import"]
複製程式碼

3、Vuex

vuex一個狀態(資料)管理官方外掛，高效管理全域性資料，並且注入vue例項，讓所有元件可以輕鬆讀寫全域性資料，讓所有元件直接共享狀態完成通訊。

--------------- 總結和技巧 -----------------

//store.js
import Vue from 'vue';
import Vuex from 'vuex';
import moduleA from '/path/to/moduleA.js'
Vue.use(Vuex);

const store = new Vuex.Store({
    strict:process.env.NODE_ENV==="development",//開發環境開啟嚴格模式
    state:{
        test:666
    },
    getters:{
        
    },
    mutations:{
        testCommit(state,opt){
            
        }
    },
    actions:{
        testAction({commit}){
            
        }
    },
    modules:{
        moduleA
    }
})

複製程式碼
//moduleA.js
export default {
    namespaced:true,//vuex模組化 模組名字首
    state:{
        test:666
    },
    getters:{
        
    },
    mutations:{
        testCommit(state,opt){
            
        }
    },
    actions:{
        testAction({commit,state,rootState,rootGetter}){
            
        }
    }
}
複製程式碼
//***.vue
import {mapState,mapAction,mapMutation} from 'vuex'
//將vuex的方法注入到元件中，使用更方便
export default {
    computed:{
        ...mapState('moduleA',{
            test1:'test'
        }),
        ...mapState({//vuex的根狀態
            test2:'test'
        })
    },
    method:{
        ...mapMutation('moduleA',{
            testCommit1:"testCommit"
        }),
        ...mapMutation({
            testCommit2:"testCommit"
        })
        ...mapAction('moduleA',{
            testAction1:"testAction"
        }),
        ...mapAction({
            testAction2:"testAction"
        })
    },
    mounted(){
        this.testCommit1();//===this.$store.commit('moduleA/testCommit')
        this.testCommit2();//===this.$store.commit('testCommit')
        this.testAction1();//===this.$store.dispatch('moduleA/testAction')
        this.testAction2();//===this.$store.dispatch('testAction')
    }
}
複製程式碼

4、Components

這一段講一講父子元件那些事

假設手寫了個custom-btn元件,在父元件如何監聽這個子元件的點選。這裡不講slot了

<!--parent.vue-->
<template>
    <custom-btn @click="some-fn"/>
</template>

<script>
import custom-btn from 'path/to/custom-btn.vue';
export default{
    components:{
        custom-btn
    }
}
</script>
複製程式碼
<!--custom-btn.vue-->
<template>
    <button @click="$emit('click')"></button>
</template>

<script>
export default{
    name:'custom-btn'
}
</script>
複製程式碼

只有在子元件emit了click，在父元件才能響應click，這個click可以自定義名字。 也可以在emit時，攜帶引數，實現父子元件傳值。

router-link是個內建元件，由於沒有emit，所以是不能響應click的，但是可以通過@click.native來為元件內的dom元素繫結click。

元件的快取

一部分元件，包括路由，在業務需求上是需要快取的，例如某個彈窗元件開啟時，裡面有選項已經勾選了，需要臨時關閉彈窗但是又不希望再次開啟重新渲染，這個時候就需要使用keep-alive

<template>
    <keep-alive>
        <custom-dialog></custom-dialog>
    </keep-alive>
</template>
複製程式碼

這個時候元件已經不會重新渲染，內部的常用鉤子函式也不會執行，只有利用專用的2個鉤子去處理快取的元件邏輯。

<!--custom-dialog.vue -->
<script>
export default{
    activated(){
        //喚醒時
    },
    deactivated(){
        //睡眠時
    }
}
</script>
複製程式碼

這個屬於小場景，當然也有可能出現大場景，就是某個路由頁面全部快取下來，這裡就有丶東西了，因為路由的渲染都是在router-view,他是個動態的，同級的路由都會渲染在這個位置，這裡就要動態快取了。

<template>
    <keep-alive :include="[]"><!-- 這個陣列裡寫需要快取路由的.vue檔案的name -->
        <router-view />
    </keep-alive>
</template>
複製程式碼

請保持每個檔案的name唯一

5、API

推薦大家可以刷幾遍vue的api， 很多人看官方文件會漏掉這一頁

6、Webpack

前面講到router的base可以配置部署伺服器後，非根目錄的情況，同樣webpack也需要配置專案資源的根路徑

//config/index.js
module.exports = {
    build:{
        assetsPublicPath:'some/dir/'，
        productionSourceMap：false
        //打包不生成map檔案，有效減小打包體積，並且別人看不到你的原始碼
    }
}
複製程式碼

預設的dev配置為localhost:8080,可以利用ip這個node包，讓同事可以訪問你正在跑的專案

//config/index.js
const ip = require('ip').address();
//...
module.exports = {
    dev:{
        host: ip,
    }
}
複製程式碼

這裡還涉及到一個配置，可以通過代理進行跨域，僅限開發環境，生產環境可以通過nginx實現，自行搜尋。

//config/index.js
module.exports = {
    proxyTable:{
        '/api':{//當有/api/...路徑時，解析為下面的域名
            target: 'https://domain.com',//代理此域名
            changeOrigin: true,
            pathRewrite: { //當前解析為domain.com/api/...
              '^/api': '' //如有需求，可以將api/去掉,此處為domain.com/...
            }
      }
    }
}
複製程式碼

scss擴充

less等其他語言自行搜尋

通過webpack實現.vue單檔案可訪問全域性scss變數,需要安裝sass-resources-loader包

//  build/utils.js  60行左右
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
    //...
    scss: generateLoaders('sass').concat({
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve(__dirname,'../src/assets/theme/index.scss')
        //這裡按照你的檔案路徑填寫
        //這裡可以理解為將此檔案的變數廣播全域性,.vue檔案可以使用這個檔案中的變數
        //多個檔案可以寫成陣列
        //詳細文件可看 https://github.com/shakacode/sass-resources-loader
      }
    }),
    //...
}
複製程式碼

其餘配置檔案不建議修改,如果對webpack非常熟練，可以隨意玩耍。

7、常用node包

  1. @tweenjs/tween.js 一個js動畫庫
  2. axios 支援promise的http庫
  3. qs 資料格式轉換外掛，配合axios使用
  4. crypto-js 各種加密，沒什麼實際安全作用
  5. prismjs 語法高亮外掛
  6. vue-lazyload 圖片懶載入，功能很全
  7. vue-meta 元件中動態修改head標籤裡面的內容
  8. babel-plugin-equire echarts按需載入外掛，優化寫法，預設會攜帶指定版本的echarts，建議自行安裝需要的版本覆蓋
  9. webpack-bundle-analyzer 打包完成後顯示體積相關資訊，可以瞭解是否重複載入,哪些檔案過大等

8、dev/build出現javascript out of memory解決方案

//package.json
"scripts": {
    "dev": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --progress --config build/webpack.dev.conf.js",
    "build": "node --max_old_space_size=4096 build/build.js"
},
複製程式碼

最後

其實這篇文章分享的東西並不多，因為我寫文章並沒有什麼準備，隨性寫寫，歡迎指正錯誤， 有不懂得可以留言，會發布更詳細的講解。(感覺自己很裝b啊，其實我也是菜鳥)

分享幾個連結

  1. 我的個人github:https://github.com/chavesgu,自己沒寫什麼牛逼的東西，但是可以看看我star的東西
  2. 自己瞎寫的lavas專案:http://lavas.chavesgu.com
  3. 自己瞎寫的網站https://www.chavesgu.com,(vue+nodejs+mysql)

tips: 懂得分享，才會走的越來越遠。

歡迎來我的Vue技術群交流：Vue887516034

如果覺得對你有用，就打賞一下吧。

Vue的使用總結和技巧 Vue的使用總結和技巧

相關文章