前言

本文是自己vue項目實踐中的一些總結，針對Vue2及相關技術棧，實踐中版本為2.3.3。

開發(fā)前須知

vue-cli

在開發(fā)前，我們要至少通讀一遍vue官方文檔和API(看官方文檔是最重要的，勝過看五十、一百篇博客),英文閱讀能力還行的建議閱讀英文文檔，中文文檔內容會稍落后，還要通讀相關的vue-router、axios、vuex等。

一般來說我們都是先利用vue-cli來搭建項目基本架構。

vue-cli官方temaplte地址，我們選擇webpack版本，建議看看其文檔vue-webpack-boilerplate了解基本用法和項目配置等。

深入地了解vue-cli的webpack配置請查看vue-cli#2.0 webpack 配置分析

打造團隊的腳手架

vue-cli雖然強大，但是它有很多個步驟要我們去選擇配置，而實際上公司業(yè)務很多配置是固定的，比如我們公司規(guī)定了要安裝vue-router、要使用Standard風格Eslint等，還規(guī)定了必須使用sass，這樣在vue-cli配置完成后還必須要npm install node-sass和sass-loader，還有axios等也是一定要安裝的。所以不應該每次新建一個項目都去一步步選擇vue-cli的那些配置然后還要去安裝sass等，應該在vue-cli基礎上根據公司自身的情況打造團隊的腳手架，只需運行腳手架，就可以初始化整個項目。

目錄結構

建議在src/目錄增加views或pages目錄來存放對應路由的組件，添加api目錄，根據項目情況增加filters、vuex等目錄。components目錄存放公共組件或者全局組件。每個組件目錄可以將圖片等資源放在一起。組件的子組件目錄建議命名為children放在父組件目錄下。如home組件目錄為home/home.vue，子組件banner路徑為home/chldren/banner/banner.vue。

靜態(tài)資源處理

vue-webpack-boilerplate文檔中有靜態(tài)資源處理的詳細說明，但發(fā)現還有很多人都不知道，因此在這里稍微提一下。

vue-webpack-boilerplate的項目結構中，我們有靜態(tài)資源兩個目錄：src/assets和static/

assets目錄中的文件會被webpack處理，只支持相對路徑形式，assets/logo.png會被編譯為./assets/logo.png，不支持/assets/logo.png

在js中，我們可以這樣獲取文件資源路徑

require('./assets/logo.png')

以下帶~前綴類似require效果

<img src="~assets/logo.png">

static目錄中的靜態(tài)資源不會被webpack處理，這里適合放一些外部不需要webpack處理的資源，build后的靜態(tài)資源都會被放進這個目錄。

vue組件化

關于vue組件化，360奇舞團前端工程師鐘恒的pptVue.js實踐 如何使用Vue2.0開發(fā)富交互式WEB應用寫得非常好，本節(jié)內容也是出自其中。ppt中提到組件化帶來的新問題：通信、復用、耦合，以及如何解決。

通信

1）props和events：props down，events up

2）函數調用：this.refs

3）組件樹: $parent.$parent

4）共享state

5）eventbus

6）vue技術棧之外的如localstorage等

復用

1）冗余：if、else if、else判斷執(zhí)行不同的代碼

if(this.type === 'editing') {  // some editing code} else if(this.type === 'preview') {  // some preview code} else if(this.type === 'present') {  // some present code} else {  // some base code}

2）包裝：slots

// plugin-page.vue<div>  <slot name="page">    i am a page  </slot></div>// present-plugin-page.vue<div class="PresetPluginPage">  <plugin-page ref="page">    <h1 slot="page">      i am a present page    </h1>  </plugin-page></div>//output<div class="PresetPluginPage">  <div>    <h1>      i am a present page    </h1>  </div></div>

3）繼承：mixins

// define a mixin objectvar myMixin = {  created: function () {    this.hello()  },  methods: {    hello: function () {      console.log('hello from mixin!')    }  }}// define a component that uses this mixinvar Component = Vue.extend({  mixins: [myMixin]})var component = new Component() // -> "hello from mixin!"

組件耦合

1）組件耦合帶來的問題：

• 單組件修改困難
• 組合新組件困難
• 組件debug困難

2）解耦

解耦的本質就是將變化分離

一、組件功能單一

// wrong<control-input type="number"></control-input>// right<control-number></control-number>

二、采用穩(wěn)定的接口

// wrongthis.$parent.$parent.$refs['resource-image'].open()// rightbus.$emit('open-resource-image')

三、處理好共享的部分

bindEvents (remove) {  let method = remove     'removeEventListener'    : 'addEventListener'  window[method]('resize', this.handleResize)}

3）與服務端解耦

this.$http.get('/user/detail').then(({body}) => {  this.user = JSON.parse(body).data}, err => {  console.error(err)})user.detail().then(detail => this.detail = detail)

1. 服務端與前端體系不一

2. 同步異步轉換

3. 多服務端/跨域的代碼

4. 統一的錯誤處理代碼

vuex使用中的一些注意事項

1）不要濫用vuex

使用Vuex并不意味著你需要將所有的狀態(tài)放入Vuex。雖然將所有的狀態(tài)放到Vuex會使狀態(tài)變化更顯式和易調試，但也會使代碼變得冗長和不直觀。如果有些狀態(tài)嚴格屬于單個組件，最好還是作為組件的局部狀態(tài)。你應該根據你的應用開發(fā)需要進行權衡和確定。

2）最好在根實例中注冊store選項，該store實例會注入到根組件下的所有子組件中，子組件可以通過this.$store訪問，當狀態(tài)較多時使用建議mapState輔助函數。

3）polyfill

本次項目中使用了vuex，因此為兼容IE9等低版本，須引入promise的polyfill--es6-promise。npm install后在main.js：

import 'es6-promise/auto'

開發(fā)中的常見問題

引入axios

為了和后端進行數據交互，我們一般引入axios庫。在main.js中如下將其加入vue的原型中，這樣可以在組件中通過this.$http來獲取axios：

Object.defineProperty(Vue.prototype, '$http', { value: axios })// 或者 Object.defineProperty(Vue.prototype, '$axios', { value: axios })

這次實踐中未采用這種做法，而是創(chuàng)建了一個getData.js進行了統一管理：

import axios from 'axios'const getSomething = (param1，param2) => axios.get(url，{  params: {    param1: param1,    param2: param2  }})export {  getSomething}

在單文件組件中import getSomething方法再進行調用即可。

引入iconfont

直接在main.js中import你下載的iconfont.css即可

js中判斷環(huán)境

常見的需求是開發(fā)環(huán)境須console，而線上環(huán)境不可以console。默認環(huán)境有'development'、'production'、'testing'三種。

if (process.env.NODE_ENV !== 'production') {  console.log(data)}

設置數據模擬請求Mock

數據模擬請求利用了mock.js,配置文檔，不過這個只是簡單的數據模擬，沒有生成文檔的功，更全面的文檔、Mock.js、可視化、Rest、接口過渡、文檔修改提醒、支持本地部署等功能可以使用阿里RAP。

npm install mockjs安裝后，可在/src/api目錄下新建data.js，引入mockjs，后可在程序入口或api入口根據開發(fā)環(huán)境來引入data.js，下面是幾個示例：

import Mock from 'mockjs'let data = Mock.mock({  'list|1-10': [{      'id|+1': 1  }]}) // mock一個數據console.log(JSON.stringify(data, null, 4))import Mock from 'mockjs'Mock.setup({ timeout: '300‐500' })Mock.mock(/\/login/, { code: 0 }) // 攔截login請求，返回對象{ code: 0 }import Mock from 'mockjs'Mock.setup({ timeout: '300‐500' })Mock.mock(sitemap.cms.banners, {  results: []}) // 攔截sitemap中cms.banners請求，返回對象{ results: [] }

seo

可以使用服務端渲染或者預渲染，預渲染webpack插件github地址。

Webpack

實際項目中還是不可避免地要修改webpack配置，如果不知道怎么改的話就去查看webpack的配置分析去進行修改。

配置全局變量

要設置全局變量可以在build中的webpack.base.conf.js中配置externals，與module同級：

externals: {  sitemap: 'sitemap'}   

然后在eslinttrc.js的module.exports添加這樣一個配置：

globals: {  'sitemap': false}

根據環(huán)境的不同加載不同的js

在這個項目中要根據環(huán)境（開發(fā)環(huán)境、測試環(huán)境、生產環(huán)境）的不同加載不同的sitemap.js，這個sitemap.js會暴露出一個全局的sitemap變量，sitemap變量是個由api地址構成的json對象。利用HtmlWebpackPlugin插件的option選項來實現。

在index.html中這樣寫：

<script src="<%= htmlWebpackPlugin.options.src %>"></script>

然后在build中的各自conf.js的HtmlWebpackPlugin設置不同的src，如在開發(fā)環(huán)境中添加src那一行：

new HtmlWebpackPlugin({  filename: 'index.html',  template: 'index.html',  src: '//dev.example.com/api/sitemap.js',  inject: true})

配置alias（別名）

在webpack.base.conf.js，vue-cli已經默認配置好了src目錄的別名為@，建議配置src下一級目錄的別名，這樣能減少重復書寫也更美觀，如下添加src、pages、components別名：

resolve: {  extensions: ['.js', '.vue', '.json'],  alias: {    'vue$': 'vue/dist/vue.esm.js',    '@': resolve('src'),    'src': resolve('src'),    'pages': path.resolve(__dirname, '../src/pages'),    'components': path.resolve(__dirname, '../src/components')  }}

圖片壓縮

可以使用webpack插件image-webpack-loader來壓縮處理圖片。

多頁面

實際就是添加多個入口js然后再修改相應配置，網上資料很多，一搜就知道了。

eslint

我們有時候需要關閉某些代碼檢查，具體配置參見Configuring ESLint - ESLint中文，下面是常見的兩個：

1）關閉eslint

/* eslint-disable */alert('foo')/* eslint-enable */

2）關閉禁止new

/* eslint-disable no-new */

優(yōu)化和其他

優(yōu)化

1）由于vue的追蹤對象變化原理基于使用Object.defineProperty，在處理大量數據并且不需要追蹤對象變化時，可通過Object.freeze(data)凍結對象達到優(yōu)化數據渲染處理

2）vue-router路由懶加載。當打包構建應用時，javascript包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。

其他

1）使用表驅動法來注冊全局filter、指令等，如在src下新建filters目錄，index.js中import所有全局過濾器:

import milliFormat from './milliFormat'import reverse from './reverse'export default {  milliFormat,  reverse}

然后在main.js中注冊

import commonFiltes from './filters/index'Object.keys(commonFiltes).forEach(key => Vue.filter(key, commonFiltes[key]))

2）對于一些強耦合的組件如collapse和collapse-item，可以使用$parent和$children來進行通信，沒必要像elementUI一樣自己實現組件的broadcast和dispatch，我還發(fā)現有UI庫竟然是使用bus來通信的，這樣導致同一個頁面要是有兩個collapse，就會互相影響。

3）在根組件上注冊公共過濾器后，除了在“Mustache”語法中使用，還可在組件中通過this.$root.$options.filters.datetime(data)獲取datetime過濾器。

打包上線

優(yōu)化分析

npm run build --report進行打包大小分析，可視化地看到有什么地方需要優(yōu)化。

測試build后的文件

build成功后有個tip提示你build后的文件需要部署在http服務器上，不能通過file協議打開。

我們可以通過node-static來啟動服務?？梢詫懸粋€js配置文件通過node來啟動，或者CLI中輸入static dist(先安裝node-static)：

$ static distserving "dist" at http://127.0.0.1:8080

更多如設置端口等請點擊上面的鏈接查看文檔。

后語

本文最重要的是文章中給出的一些鏈接，尤其是開發(fā)前須知章節(jié)中的鏈接，最好點進去通讀一下。