摘要：前言自總結(jié)完了上篇前端工程化的思想，并在全家桶的項(xiàng)目加以實(shí)踐，趁熱給大家總結(jié)一篇如何更有效率與質(zhì)量地開發(fā)項(xiàng)目，以及其中踩過的一個(gè)個(gè)坑。。。

自總結(jié)完了上篇前端工程化的思想，并在vue全家桶的項(xiàng)目加以實(shí)踐，趁熱給大家總結(jié)一篇如何更有效率與質(zhì)量地開發(fā)vue項(xiàng)目，以及其中踩過的一個(gè)個(gè)坑。。。

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

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

vue init username/repo my-project

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

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

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

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

        vue init duosanglee/vuejs-custom-template

這個(gè)模板在repo里
ps：我的這個(gè)模板的代碼風(fēng)格是基于standard的

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

npm install -D sass-resources-loader

首先得找到項(xiàng)目里的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)
    }
}

然后還是在當(dāng)前文件里找到

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")
}

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

現(xiàn)在講都是前后端分離，前后端并行開發(fā)來提高開發(fā)效率，通過一個(gè)api文檔來協(xié)作，所以一個(gè)好的mock工具對(duì)于提高效率也至關(guān)重要~
這里極力推薦easy-mock工具，支持團(tuán)隊(duì)協(xié)作編輯，生成模擬數(shù)據(jù)的在線 mock 服務(wù)，還支持導(dǎo)入swagger文檔等功能,界面如下

在項(xiàng)目會(huì)有需要使用全局變量的需求，來處理一些頻繁的操作，大家都應(yīng)該會(huì)綁定到window對(duì)象上，但是這種方式不適合服務(wù)端渲染，因?yàn)榉?wù)端沒有 window 對(duì)象, 是 undefined, 當(dāng)試圖去訪問屬性時(shí)會(huì)報(bào)錯(cuò).我總結(jié)了兩個(gè)靠譜的方法

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

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

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

vuex大法
vuex的出現(xiàn)就是vue為了集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，所以說全局變量和方法都可以放到vuex當(dāng)中~具體用法就不加闡述了，大家可仔細(xì)閱讀vuex文檔

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

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

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

黑箱： 組件的黑箱狀態(tài)既只暴露易變的接口和方法，渲染給入的數(shù)據(jù)，組件內(nèi)部封裝不變的邏輯。

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

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

大家可以從目錄結(jié)構(gòu)中看出我整個(gè)項(xiàng)目分割的思維
首先我把組件分為通用組件和業(yè)務(wù)組件兩大類。

通用組件是與業(yè)務(wù)耦合低，是有簡單狀態(tài)或者無狀態(tài)的，數(shù)據(jù)幾乎全部依賴于輸入，它只負(fù)責(zé)渲染給入的數(shù)據(jù)。比如按鈕是一個(gè)組件，可能有一個(gè)參數(shù)決定了它的尺寸，一個(gè)參數(shù)決定了它是否可以點(diǎn)擊，但是點(diǎn)擊這個(gè)按鈕之后會(huì)發(fā)生什么，就不是按鈕這個(gè)組件需要知道的事情了。

業(yè)務(wù)組件是與業(yè)務(wù)耦合高，可以由多個(gè)通用組件和其他的業(yè)務(wù)組件組成，會(huì)擁有一些方法，用來修改持有的數(shù)據(jù)，對(duì)內(nèi)來看，它自己持有一些數(shù)據(jù)和方法，用來決定內(nèi)容的渲染，對(duì)外又是一個(gè)簡單的props接受數(shù)據(jù)。可以理解為組件樹的非葉子節(jié)點(diǎn)，通過自身數(shù)據(jù)變化，進(jìn)而操縱子組件的內(nèi)容。

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

env.js

http.js

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

前端項(xiàng)目中自動(dòng)生成雪碧圖節(jié)省了我們很多的時(shí)間，我們只要把圖片扔到文件夾里，webpack-spritesmith就能按照我們設(shè)定的規(guī)則自動(dòng)合成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
      }
    })
  ]
}

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

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

然后會(huì)在save文件的時(shí)候eslint插件自動(dòng)根據(jù)項(xiàng)目下的.eslintrc來設(shè)置代碼格式~
sf不支持播放gif..具體效果大家只能自行查看

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

proxyTable: {
  "/api": {
    target: "網(wǎng)站名",
    pathRewrite: {
      "^/api": ""
    }
  }
}

然后重啟本地服務(wù)器，這樣你發(fā)送的/api/a就會(huì)代理發(fā)送到"網(wǎng)站名/a"了~

之所以稱emmet為前端開發(fā)利器是因?yàn)樗梢愿鶕?jù)我們所輸入的縮寫來得到相應(yīng)的內(nèi)容，大大節(jié)省我們的開發(fā)html和css的時(shí)間，例：

輸入ul>li*2>span 按下擴(kuò)展鍵

輸入m0-a-0-0+posa+bgc 按下擴(kuò)展鍵

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

更多方法請(qǐng)看官方文檔emmet

這篇文章到此就已經(jīng)結(jié)束了~感謝大家能夠關(guān)注此文章~如果這篇文章能幫助到大家的話，麻煩請(qǐng)幫我點(diǎn)個(gè)贊~~~

大家有啥想法可在下面評(píng)論，也可以加我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...