如何更有效率和質量地開發Vue項目

前言

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

基於vue-cli的自定義模板（Custom Templates）

小夥伴們的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的

引入sass全局變量，mixin，function等

首先咱們考慮下如下場景：當使用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了~~

在線 Mock 平臺 easy-mock

如今講都是先後端分離，先後端並行開發來提升開發效率，經過一個api文檔來協做，因此一個好的mock工具對於提升效率也相當重要~
這裏極力推薦easy-mock工具，支持團隊協做編輯，生成模擬數據的在線 mock 服務，還支持導入swagger文檔等功能,界面以下

定義全局變量

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

1. 代理到Vue的原型對象
   因爲全部的組件都會從 Vue 的原型對象上繼承它們的方法, 所以咱們只要

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

   就能夠在全部組件/實例中經過 this.$xxx: 的方式訪問插件了~而不須要定義全局變量或者手動的引入了~
   至於爲何要用Object.defineProperty這個方法，是由於經過Object.defineProperty綁定的屬性是隻讀的，以防一塊兒開發項目的協(zhu)做(dui)者(you)去重寫或者覆蓋該方法的值。

2. 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                     # 入口

你們能夠從目錄結構中看出我整個項目分割的思惟
首先我把組件分爲通用組件和業務組件兩大類。

1. 通用組件是與業務耦合低，是有簡單狀態或者無狀態的，數據幾乎所有依賴於輸入，它只負責渲染給入的數據。好比按鈕是一個組件，可能有一個參數決定了它的尺寸，一個參數決定了它是否能夠點擊，可是點擊這個按鈕以後會發生什麼，就不是按鈕這個組件須要知道的事情了。

2. 業務組件是與業務耦合高，能夠由多個通用組件和其餘的業務組件組成，會擁有一些方法，用來修改持有的數據，對內來看，它本身持有一些數據和方法，用來決定內容的渲染，對外又是一個簡單的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
      }
    })
  ]
}

自動修復eslint格式錯誤

這個功能的創建在小夥伴的開發工具是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

之因此稱emmet爲前端開發利器是由於他能夠根據咱們所輸入的縮寫來獲得相應的內容，大大節省咱們的開發html和css的時間，例：

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

<ul>
    <li><span></span></li>
    <li><span></span></li>
</ul>

• 輸入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...