摘要：前言自總結完了上篇前端工程化的思想，并在全家桶的項目加以實踐，趁熱給大家總結一篇如何更有效率與質量地開發項目，以及其中踩過的一個個坑。。。

自總結完了上篇前端工程化的思想，并在vue全家桶的項目加以實踐，趁熱給大家總結一篇如何更有效率與質量地開發vue項目，以及其中踩過的一個個坑。。。

小伙伴們的vue項目應該都是用vue-cli初始化出來的，但是vue-cli只是滿足了基礎配置和功能，如果你有額外的配置需求或者要迎合團隊的業務配置，每新建個項目都得重新安裝額外配置，比如說vuex，sass，封裝axios，以及相關的文件夾。為了解決上述問題，vue-cli出了一個自定義模板功能，你fork官方的模板下來然后進行修改，然后用 vue-cli 來調用。具體調用的場景有以下兩種

直接拉取git源：
當你修改了模板并上傳了repo上，可執行以下命令行來初始化

vue init username/repo my-project

拉取本地的模板：
當你clone了官方模板在本地修改，可執行以下命令行來初始化

    vue init ~/fs/path/to-custom-template my-project

還可以編寫meta.*（js,json）來選擇安裝哪些配置~

如果大家懶得去編寫vuex，sass的配置，封裝axios的話，可以來通過我配置完的腳手架來初始化完項目~

        vue init duosanglee/vuejs-custom-template

這個模板在repo里
ps：我的這個模板的代碼風格是基于standard的

首先我們考慮下以下場景：當使用rem開發移動端的時候，你定義了一個方法pxToRem的方法來實現px對rem的轉換，然后在工程里為每個.vue文件@import "public.scss"，得import很多很多很多次，萬一public.scss路徑變了的話。。。哭都來不及。
這時候sass-resources-loader就來拯救我們了，他可以省去重復性的引入，還支持LESS，POSTCSS等
具體用法如下：

npm install -D sass-resources-loader

首先得找到項目里的build文件夾，找到util.js
添加一下代碼

function resolveResouce(name) {
    return path.resolve(__dirname, "../src/style/" + name);
}
function generateSassResourceLoader() {
    var loaders = [
 cssLoader, 
 // "postcss-loader",
 "sass-loader",
 {
     loader: "sass-resources-loader",
     options: {
       // it need a absolute path
       resources: [resolveResouce("common.scss")]
     }
 }
    ];
    if (options.extract) {
 return ExtractTextPlugin.extract({
   use: loaders,
   fallback: "vue-style-loader"
 })
    } else {
 return ["vue-style-loader"].concat(loaders)
    }
}

然后還是在當前文件里找到

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders("less"),
  sass: generateLoaders("sass", { indentedSyntax: true }),
  scss: generateLoaders("sass"),
  stylus: generateLoaders("stylus"),
  styl: generateLoaders("stylus")
}

替換成

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders("less"),
  sass: generateSassResourceLoader(),
  scss: generateSassResourceLoader(),
  stylus: generateLoaders("stylus"),
  styl: generateLoaders("stylus")
}

這樣就可以在項目里使用sass全局變量，mixin，function了~~

現在講都是前后端分離，前后端并行開發來提高開發效率，通過一個api文檔來協作，所以一個好的mock工具對于提高效率也至關重要~
這里極力推薦easy-mock工具，支持團隊協作編輯，生成模擬數據的在線 mock 服務，還支持導入swagger文檔等功能,界面如下

在項目會有需要使用全局變量的需求，來處理一些頻繁的操作，大家都應該會綁定到window對象上，但是這種方式不適合服務端渲染，因為服務端沒有 window 對象, 是 undefined, 當試圖去訪問屬性時會報錯.我總結了兩個靠譜的方法

代理到Vue的原型對象
由于所有的組件都會從 Vue 的原型對象上繼承它們的方法, 因此我們只要

Object.defineProperty(Vue.prototype, "$xxx", { value: xxx });

就可以在所有組件/實例中通過 this.$xxx: 的方式訪問插件了~而不需要定義全局變量或者手動的引入了~
至于為什么要用Object.defineProperty這個方法，是因為通過Object.defineProperty綁定的屬性是只讀的，以防一起開發項目的協(zhu)作(dui)者(you)去重寫或者覆蓋該方法的值。

vuex大法
vuex的出現就是vue為了集中式存儲管理應用的所有組件的狀態，所以說全局變量和方法都可以放到vuex當中~具體用法就不加闡述了，大家可仔細閱讀vuex文檔

大家都知道組件化的思想就是分治，幾乎任意類型的應用程序界面，都可以抽象為一個組件樹，那我們該按照什么規則把應用抽象成組件，來應對復雜多變的業務需求呢。
我們從通信、黑箱，繼承這幾個角度來看看

通信： vue的父子組件通信機制是props down，events up，盡量保持松耦合，一直保持單向數據流的特點，并加以強約束。需要注意的時候，盡可能減少跨組件通信，例如使用$parent，$root。

繼承： 當兩個組件存在些許的共性，又存在足夠的差異性的時候，就可以用到vue的繼承---mixin，他允許你封裝一塊在應用的其他組件中都可以使用的函數。如果使用姿勢正確，他們不會改變函數作用域外部的任何東西。而且mixin還有各種高階用法，大家可自行查詢（我也不會）。

黑箱： 組件的黑箱狀態既只暴露易變的接口和方法，渲染給入的數據，組件內部封裝不變的邏輯。

設計模式原則： 運用設計模式原則，比如單一職責原則，將組件拆分抽離成更細粒度，保證高內聚性；再如接口隔離原則，采用穩定的服務端接口，將變化模塊分離，使得組件得以解耦；里氏替換原則、依賴倒置原則等等。。

-- src
    -- assets                      # 私有資源
    -- common                      # 通用組件
    -- components                  # 業務組件
    -- api.js                      # 請求文件      
    -- config                      # 環境變量配置
        -- env.js                  # 環境變量文件
        -- http.js                 # 封裝axios文件
    -- pages                       # 頁面維度
        -- pageA                   # 頁面A
            -- pageA.vue           # 頁面A單文件
            -- pageA-components    # 頁面A下的一個組件
            -- children            # 子頁面
    -- router                      # 路由
        -- index.js                # 路由入口
        -- routes.js               # 路由配置信息
    -- store                       # vuex
        -- modules                 # vuex模塊
        -- index.js                # vuex入口
    -- utils                       # js通用方法
    -- app.vue                     # 頂層單文件
    -- main.js                     # 入口

大家可以從目錄結構中看出我整個項目分割的思維
首先我把組件分為通用組件和業務組件兩大類。

通用組件是與業務耦合低，是有簡單狀態或者無狀態的，數據幾乎全部依賴于輸入，它只負責渲染給入的數據。比如按鈕是一個組件，可能有一個參數決定了它的尺寸，一個參數決定了它是否可以點擊，但是點擊這個按鈕之后會發生什么，就不是按鈕這個組件需要知道的事情了。

業務組件是與業務耦合高，可以由多個通用組件和其他的業務組件組成，會擁有一些方法，用來修改持有的數據，對內來看，它自己持有一些數據和方法，用來決定內容的渲染，對外又是一個簡單的props接受數據。可以理解為組件樹的非葉子節點，通過自身數據變化，進而操縱子組件的內容。

然后config文件夾放置了環境變量文件env.js和封裝http庫文件http.js

env.js

http.js

然后我把路由里的routes.js和api.js請求文件都多帶帶抽離了出來。

前端項目中自動生成雪碧圖節省了我們很多的時間，我們只要把圖片扔到文件夾里，webpack-spritesmith就能按照我們設定的規則自動合成css-sprite，安裝配置如下：

var SpritesmithPlugin = require("webpack-spritesmith");
...
module.exports = {
  ...
  plugins: [
    new SpritesmithPlugin({
      src: {
        cwd: "./src/assets/sp/",
        glob: "*.png"
      },
      target: {
        image: "./src/assets/sprite/sprite.png",
        css: "./src/assets/sprite/sprite.css"
      },
      apiOptions: {
        cssImageRef: "./sprite.png"
      },
      spritesmithOptions: {
        algorithm: "top-down",
        padding: 100
      }
    })
  ]
}

這個功能的建立在小伙伴的開發工具是vscode情況下~
首先在vscode擴展里面安裝vscode的eslint插件，然后settings.json里添加如下配置

"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
        "language": "html",
        "autoFix": true
    },
    {
        "language": "vue",
        "autoFix": true
    }
],
"eslint.autoFixOnSave": true,

然后會在save文件的時候eslint插件自動根據項目下的.eslintrc來設置代碼格式~
sf不支持播放gif..具體效果大家只能自行查看

在瀏覽vue-cli的官方文檔時候發現了vue-cli自帶了API proxy，解決了在項目中后端聯調的時候的跨域問題。具體安裝配置如下：
首先我們找到config文件下的index.js,再找到dev對象下的proxyTable屬性，然后把以下代碼添加進去

proxyTable: {
  "/api": {
    target: "網站名",
    pathRewrite: {
      "^/api": ""
    }
  }
}

然后重啟本地服務器，這樣你發送的/api/a就會代理發送到"網站名/a"了~

之所以稱emmet為前端開發利器是因為他可以根據我們所輸入的縮寫來得到相應的內容，大大節省我們的開發html和css的時間，例：

輸入ul>li*2>span 按下擴展鍵

輸入m0-a-0-0+posa+bgc 按下擴展鍵

margin: 0 auto 0 0;
position: absolute;
background-color: #fff;

更多方法請看官方文檔emmet

這篇文章到此就已經結束了~感謝大家能夠關注此文章~如果這篇文章能幫助到大家的話，麻煩請幫我點個贊~~~

大家有啥想法可在下面評論，也可以加我QQ：757592499來討論~

參考：

http://www.jianshu.com/p/0375...
https://hopkinson.github.io/2...
https://github.com/dwqs/blog/...
http://jeffjade.com/2017/03/1...
http://www.jianshu.com/p/95b2...
https://segmentfault.com/a/11...