摘要：詳細(xì)具體的使用可以見(jiàn)文章手摸手，帶你優(yōu)雅的使用。為了加速線(xiàn)上鏡像構(gòu)建的速度，我們利用源進(jìn)行加速并且將一些常見(jiàn)的依賴(lài)打入了基礎(chǔ)鏡像，避免每次都需要重新下載。

完整項(xiàng)目地址：vue-element-admin
系類(lèi)文章二：手摸手，帶你用vue擼后臺(tái) 系列二（登錄權(quán)限篇）
系類(lèi)文章三：手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇）
系類(lèi)文章四：手摸手，帶你用vue擼后臺(tái) 系列四(vueAdmin 一個(gè)極簡(jiǎn)的后臺(tái)基礎(chǔ)模板)
系類(lèi)文章：手摸手，帶你優(yōu)雅的使用 icon
系類(lèi)文章：手摸手，帶你封裝一個(gè)vue component

說(shuō)好的教程終于來(lái)了，第一篇文章主要來(lái)說(shuō)一說(shuō)在開(kāi)始寫(xiě)實(shí)際業(yè)務(wù)代碼之前的一些準(zhǔn)備工作吧，但這里不會(huì)教你 webpack 的基礎(chǔ)配置，熱更新原理是什么，webpack速度優(yōu)化等等，有需求的請(qǐng)自行 google，相關(guān)文章已經(jīng)很多了。

├── build                      // 構(gòu)建相關(guān)??
├── config                     // 配置相關(guān)
├── src                        // 源代碼
│?? ├── api                    // 所有請(qǐng)求
│?? ├── assets                 // 主題 字體等靜態(tài)資源
│?? ├── components             // 全局公用組件
│?? ├── directive              // 全局指令
│?? ├── filtres                // 全局 filter
│?? ├── icons                  // 項(xiàng)目所有 svg icons
│?? ├── lang                   // 國(guó)際化 language
│?? ├── mock                   // 項(xiàng)目mock 模擬數(shù)據(jù)
│?? ├── router                 // 路由
│?? ├── store                  // 全局 store管理
│?? ├── styles                 // 全局樣式
│?? ├── utils                  // 全局公用方法
│?? ├── vendor                 // 公用vendor
│?? ├── views                   // view
│?? ├── App.vue                // 入口頁(yè)面
│?? ├── main.js                // 入口 加載組件 初始化等
│   └── permission.js          // 權(quán)限管理
├── static                     // 第三方不打包資源
│?? └── Tinymce                // 富文本
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置項(xiàng)
├── .gitignore                 // git 忽略項(xiàng)
├── favicon.ico                // favicon圖標(biāo)
├── index.html                 // html模板
└── package.json               // package.json

這里來(lái)簡(jiǎn)單講一下src文件

簡(jiǎn)單截取一下公司后臺(tái)項(xiàng)目，現(xiàn)在后臺(tái)大概有四五十個(gè) api 模塊

如圖可見(jiàn)模塊有很多，而且隨著業(yè)務(wù)的迭代，模塊還會(huì)會(huì)越來(lái)越多。
所以這里建議根據(jù)業(yè)務(wù)模塊來(lái)劃分 views，并且 將views 和 api 兩個(gè)模塊一一對(duì)應(yīng)，從而方便維護(hù)。如下圖：

如 article 模塊下放的都是文章相關(guān)的 api，這樣不管項(xiàng)目怎么累加，api和views的維護(hù)還是清晰的，當(dāng)然也有一些全區(qū)公用的api模塊，如七牛upload，remoteSearch等等，這些多帶帶放置就行。

這里的 components 放置的都是全局公用的一些組件，如上傳組件，富文本等等。一些頁(yè)面級(jí)的組件建議還是放在各自views文件下，方便管理。如圖：

這里我個(gè)人建議不要為了用 vuex 而用 vuex。就拿我司的后臺(tái)項(xiàng)目來(lái)說(shuō)，它雖然比較龐大，幾十個(gè)業(yè)務(wù)模塊，幾十種權(quán)限，但業(yè)務(wù)之間的耦合度是很低的，文章模塊和評(píng)論模塊幾乎是倆個(gè)獨(dú)立的東西，所以根本沒(méi)有必要使用 vuex 來(lái)存儲(chǔ)data，每個(gè)頁(yè)面里存放自己的 data 就行。當(dāng)然有些數(shù)據(jù)還是需要用 vuex 來(lái)統(tǒng)一管理的，如登錄token,用戶(hù)信息，或者是一些全局個(gè)人偏好設(shè)置等，還是用vuex管理更加的方便，具體當(dāng)然還是要結(jié)合自己的業(yè)務(wù)場(chǎng)景的?？傊€是那句話(huà)，不要為了用vuex而用vuex！

這里是用 vue-cli 的 webpack-template 為基礎(chǔ)模板構(gòu)建的，如果你對(duì)這個(gè)有什么疑惑請(qǐng)自行g(shù)oogle，相關(guān)的配置紹其它的文章已經(jīng)介詳細(xì)了，這里就不再展開(kāi)了。簡(jiǎn)單說(shuō)一些需要注意到地方。

管理后臺(tái)不同于前臺(tái)項(xiàng)目，會(huì)經(jīng)常用到一些第三方插件，但有些插件是不得不依賴(lài) jquery 的，如市面很多富文本基都是依賴(lài) jquery 的，所以干脆就直接引入到項(xiàng)目中省事(gzip之后只有34kb，而且常年from cache,不要考慮那些吹毛求疵的大小問(wèn)題，這幾kb和提高的開(kāi)發(fā)效率根本不能比)。但是如果第三方庫(kù)的代碼中出現(xiàn)$.xxx或jQuery.xxx或window.jQuery或window.$則會(huì)直接報(bào)錯(cuò)。要達(dá)到類(lèi)似的效果，則需要使用 webpack 內(nèi)置的 ProvidePlugin 插件，配置很簡(jiǎn)單，只需要

new webpack.ProvidePlugin({
  $: "jquery" ,
  "jQuery": "jquery"
})

這樣當(dāng) webpack 碰到 require 的第三方庫(kù)中出現(xiàn)全局的$、jQeury和window.jQuery 時(shí)，就會(huì)使用 node_module 下 jquery 包 export 出來(lái)的東西了。

當(dāng)項(xiàng)目逐漸變大之后，文件與文件直接的引用關(guān)系會(huì)很復(fù)雜，這時(shí)候就需要使用alias 了。
有的人喜歡alias 指向src目錄下，再使用相對(duì)路徑找文件

resolve: {
  alias: {
    "~": resolve(__dirname, "src")
  }
}

//使用
import stickTop from "~/components/stickTop"

或者也可以

alias: {
  "src": path.resolve(__dirname, "../src"),
  "components": path.resolve(__dirname, "../src/components"),
  "api": path.resolve(__dirname, "../src/api"),
  "utils": path.resolve(__dirname, "../src/utils"),
  "store": path.resolve(__dirname, "../src/store"),
  "router": path.resolve(__dirname, "../src/router")
}

//使用
import stickTop from "components/stickTop"
import getArticle from "api/article"

沒(méi)有好與壞對(duì)與錯(cuò)，純看個(gè)人喜好和團(tuán)隊(duì)規(guī)范。

不管是多人合作還是個(gè)人項(xiàng)目，代碼規(guī)范是很重要的。這樣做不僅可以很大程度地避免基本語(yǔ)法錯(cuò)誤，也保證了代碼的可讀性。這所謂工欲善其事，必先利其器，個(gè)人推薦 eslint+vscode 來(lái)寫(xiě) vue，絕對(duì)有種飛一般的感覺(jué)。效果如圖：

每次保存，vscode就能標(biāo)紅不符合eslint規(guī)則的地方，同時(shí)還會(huì)做一些簡(jiǎn)單的自我修正。安裝步驟如下：

首先安裝eslint插件

安裝并配置完成 ESLint 后，我們繼續(xù)回到 VSCode 進(jìn)行擴(kuò)展設(shè)置，依次點(diǎn)擊 文件 > 首選項(xiàng) > 設(shè)置 打開(kāi) VSCode 配置文件,添加如下配置

    "files.autoSave":"off",
    "eslint.validate": [
       "javascript",
       "javascriptreact",
       "html",
       {?"language":?"vue",?"autoFix":?true?}
     ],
     "eslint.options": {
        "plugins": ["html"]
     }

這樣每次保存的時(shí)候就可以根據(jù)根目錄下.eslintrc.js你配置的eslint規(guī)則來(lái)檢查和做一些簡(jiǎn)單的fix。這里提供了一份我平時(shí)的eslint規(guī)則地址，都簡(jiǎn)單寫(xiě)上了注釋。每個(gè)人和團(tuán)隊(duì)都有自己的代碼規(guī)范，統(tǒng)一就好了，去打造一份屬于自己的eslint 規(guī)則上傳到npm吧，如餓了么團(tuán)隊(duì)的 config，vue的 config。

vscode 插件和配置推薦

我們經(jīng)常遇到一些線(xiàn)上 的bug，但測(cè)試環(huán)境很難模擬。其實(shí)可以通過(guò)簡(jiǎn)單的配置就可以在本地調(diào)試線(xiàn)上環(huán)境。
這里結(jié)合業(yè)務(wù)封裝了axios ，線(xiàn)上代碼

import axios from "axios"
import { Message } from "element-ui"
import store from "@/store"
import { getToken } from "@/utils/auth"

// 創(chuàng)建axios實(shí)例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // 請(qǐng)求超時(shí)時(shí)間
})

// request攔截器
service.interceptors.request.use(config => {
  // Do something before request is sent
  if (store.getters.token) {
    config.headers["X-Token"] = getToken() // 讓每個(gè)請(qǐng)求攜帶token--["X-Token"]為自定義key 請(qǐng)根據(jù)實(shí)際情況自行修改
  }
  return config
}, error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})

// respone攔截器
service.interceptors.response.use(
  response => response,
  /**
  * 下面的注釋為通過(guò)response自定義code來(lái)標(biāo)示請(qǐng)求狀態(tài)，當(dāng)code返回如下情況為權(quán)限有問(wèn)題，登出并返回到登錄頁(yè)
  * 如通過(guò)xmlhttprequest 狀態(tài)碼標(biāo)識(shí) 邏輯可寫(xiě)在下面error中
  */
  //  const res = response.data;
  //     if (res.code !== 20000) {
  //       Message({
  //         message: res.message,
  //         type: "error",
  //         duration: 5 * 1000
  //       });
  //       // 50008:非法的token; 50012:其他客戶(hù)端登錄了;  50014:Token 過(guò)期了;
  //       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
  //         MessageBox.confirm("你已被登出，可以取消繼續(xù)留在該頁(yè)面，或者重新登錄", "確定登出", {
  //           confirmButtonText: "重新登錄",
  //           cancelButtonText: "取消",
  //           type: "warning"
  //         }).then(() => {
  //           store.dispatch("FedLogOut").then(() => {
  //             location.reload();// 為了重新實(shí)例化vue-router對(duì)象 避免bug
  //           });
  //         })
  //       }
  //       return Promise.reject("error");
  //     } else {
  //       return response.data;
  //     }
  error => {
    console.log("err" + error)// for debug
    Message({
      message: error.message,
      type: "error",
      duration: 5 * 1000
    })
    return Promise.reject(error)
  })

export default service

import request from "@/utils/request"

//使用
export function getInfo(params) {
  return request({
    url: "/user/info",
    method: "get",
    params
  });
}

比如后臺(tái)項(xiàng)目，每一個(gè)請(qǐng)求都是要帶 token 來(lái)驗(yàn)證權(quán)限的，這樣封裝以下的話(huà)我們就不用每個(gè)請(qǐng)求都手動(dòng)來(lái)塞 token，或者來(lái)做一些統(tǒng)一的異常處理，一勞永逸。
而且因?yàn)槲覀兊?api 是根據(jù) env 環(huán)境變量動(dòng)態(tài)切換的，如果以后線(xiàn)上出現(xiàn)了bug，我們只需配置一下 @/config/dev.env.js 再重啟一下服務(wù)，就能在本地模擬線(xiàn)上的環(huán)境了。

module.exports = {
    NODE_ENV: ""development"",
    BASE_API: ""https://api-dev"", //修改為""https://api-prod""就行了
    APP_ORIGIN: ""https://wallstreetcn.com"" //為公司打個(gè)廣告 pc站為vue+ssr
}

媽媽再也不用擔(dān)心我調(diào)試線(xiàn)上bug了。
當(dāng)然這里只是簡(jiǎn)單舉了個(gè)例子，axios還可以執(zhí)行多個(gè)并發(fā)請(qǐng)求，攔截器什么的，大家自行去研究吧。

vue-cli 默認(rèn)只提供了dev和prod兩種環(huán)境。但其實(shí)正真的開(kāi)發(fā)流程可能還會(huì)多一個(gè)sit或者stage環(huán)境，就是所謂的測(cè)試環(huán)境和預(yù)發(fā)布環(huán)境。所以我們就要簡(jiǎn)單的修改一下代碼。其實(shí)很簡(jiǎn)單就是設(shè)置不同的環(huán)境變量

"build:prod": "NODE_ENV=production node build/build.js",
"build:sit": "NODE_ENV=sit node build/build.js",

之后在代碼里自行判斷，想干就干啥

var env = process.env.NODE_ENV === "production" ? config.build.prodEnv : config.build.sitEnv

新版的 vue-cli 也內(nèi)置了 webpack-bundle-analyzer 一個(gè)模塊分析的東西，相當(dāng)?shù)暮糜谩Ｊ褂梅椒ㄒ埠芎?jiǎn)單，和之前一樣封裝一個(gè) npm script 就可以。

//package.json
 "build:sit-preview": "cross-env NODE_ENV=production env_config=sit npm_config_preview=true  npm_config_report=true node build/build.js"

//之后通過(guò)process.env.npm_config_report來(lái)判斷是否來(lái)啟用webpack-bundle-analyzer

var BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())

效果圖

webpack-bundle-analyzer這個(gè)插件還是很有用的，對(duì)后期的代碼優(yōu)化什么的，最重要的是它夠裝逼~

每個(gè)公司都有自己一套的開(kāi)發(fā)流程，沒(méi)有絕對(duì)的好與壞。這里我來(lái)講講我司的前后端交互流程。

首先前后端交互不可避免的就會(huì)遇到跨域問(wèn)題，我司現(xiàn)在全是用 cors來(lái)解決的，如果你司后端嫌麻煩不肯配置的話(huà)，dev環(huán)境也可以通過(guò)
webpack-dev-server的proxy來(lái)解決，開(kāi)發(fā)環(huán)境用nginx反代理一下就好了，具體配置這里就不展開(kāi)了。

其實(shí)大家也知道，平時(shí)的開(kāi)發(fā)中交流成本占據(jù)了我們很大一部分時(shí)間，但前后端如果有一個(gè)好的協(xié)作方式的話(huà)能解決很多時(shí)間。我司開(kāi)發(fā)流程都是前后端和產(chǎn)品一起開(kāi)會(huì)討論項(xiàng)目，之后后端根據(jù)需求，首先定義數(shù)據(jù)格式和api，然后 mock api 生成好文檔，我們前端才是對(duì)接接口的。這里推薦一個(gè)文檔生成器 swagger。
swagger是一個(gè)REST APIs文檔生成工具，可以在許多不同的平臺(tái)上從代碼注釋中自動(dòng)生成，開(kāi)源，支持大部分語(yǔ)言，社區(qū)好，總之就是一個(gè)強(qiáng)大，如下圖的api 文檔(swagger自動(dòng)生成，ui忽略)

api 地址，需要傳是沒(méi)參數(shù)，需要的傳參類(lèi)型，返回的數(shù)據(jù)格式什么都一清二楚了。

如果后端不肯來(lái)幫你 mock 數(shù)據(jù)的話(huà)，前端自己來(lái) mock 也是很簡(jiǎn)單的。你可以使用mock server 或者使用 mockjs + rap 也是很方便的。
不久前出的 easy-mock也相當(dāng)?shù)牟诲e(cuò)，還能結(jié)合 swagger。
我們大前端終于不用再看后端的臉色了~

element-ui 默認(rèn)的icon不是很多，這里要安利一波阿里的iconfont簡(jiǎn)直是神器，不管是公司項(xiàng)目還是個(gè)人項(xiàng)目都在使用。它提供了png,ai,svg三種格式，同時(shí)使用也支持unicode，font-class，symbol三種方式。由于是管理后臺(tái)對(duì)兼容性要求不高，樓主平時(shí)都喜歡用symbol，曬一波我司后臺(tái)的圖標(biāo)(都是樓主自己發(fā)揮的)。

詳細(xì)具體的使用可以見(jiàn)文章 手摸手，帶你優(yōu)雅的使用 icon

different router the same component vue。真實(shí)的業(yè)務(wù)場(chǎng)景中，這種情況很多。比如
我創(chuàng)建和編輯的頁(yè)面使用的是同一個(gè)component,默認(rèn)情況下當(dāng)這兩個(gè)頁(yè)面切換時(shí)并不會(huì)觸發(fā)vue的created或者mounted鉤子，官方說(shuō)你可以通過(guò)watch $route的變化來(lái)做處理，但其實(shí)說(shuō)真的還是蠻麻煩的。后來(lái)發(fā)現(xiàn)其實(shí)可以簡(jiǎn)單的在 router-view上加上一個(gè)唯一的key，來(lái)保證路由切換時(shí)都會(huì)重新渲染觸發(fā)鉤子了。這樣簡(jiǎn)單的多了。

computed: {
    key() {
        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
    }
 }

有些人會(huì)覺(jué)得現(xiàn)在構(gòu)建是不是有點(diǎn)慢，我司現(xiàn)在技術(shù)棧是容器服務(wù)，后臺(tái)項(xiàng)目會(huì)把dist文件夾里的東西都會(huì)打包成一個(gè)docker鏡像，基本步驟為

npm install
npm run build:prod
加打包鏡像，一共是耗時(shí)如下

還是屬于能接受時(shí)間的范圍。
主站PC站基于nodejs、Vue實(shí)現(xiàn)服務(wù)端渲染，所以不僅需要依賴(lài)nodejs，而且需要利用pm2進(jìn)行nodejs生命周期的管理。為了加速線(xiàn)上鏡像構(gòu)建的速度，我們利用taobao源 https://registry.npm.taobao.org 進(jìn)行加速, 并且將一些常見(jiàn)的npm依賴(lài)打入了基礎(chǔ)鏡像，避免每次都需要重新下載。
這里注意下 建議不要使用cnpm install或者update 它的包都是一個(gè)link，反正會(huì)有各種詭異的bug，這里建議這樣使用

npm install --registry=https://registry.npm.taobao.org

如果你覺(jué)得慢還是有可優(yōu)化的空間如使用webpack dll 或者把那些第三方vendor多帶帶打包 external出去，或者我司現(xiàn)在用的是http2 可以使用AggressiveSplittingPlugin等等，這里有需求的可以自行優(yōu)化。

常規(guī)占坑，這里是手摸手，帶你用vue擼后臺(tái)系列。
完整項(xiàng)目地址：vue-element-admin
系類(lèi)文章二：手摸手，帶你用vue擼后臺(tái) 系列二（登錄權(quán)限篇）
系類(lèi)文章三：手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇）
系類(lèi)文章四：手摸手，帶你用vue擼后臺(tái) 系列四(vueAdmin 一個(gè)極簡(jiǎn)的后臺(tái)基礎(chǔ)模板)
系類(lèi)文章：手摸手，帶你優(yōu)雅的使用 icon
系類(lèi)文章：手摸手，帶你封裝一個(gè)vue component
樓主個(gè)人免費(fèi)圈子。