《從零構建前後分離的web專案》實戰 -5分鐘快速構建炒雞規範的VUE專案骨架
命令列介面（英語：command-line interface，縮寫：CLI）是在圖形使用者介面得到普及之前使用最為廣泛的使用者介面，它通常不支援滑鼠，使用者通過鍵盤輸入指令，計算機接收到指令後，予以執行。也有人稱之為字元使用者介面
顧名思義 XXX-CLI 就是使用命令列生成的 XXX 程式。之前寫過一款 基於 nodeJs 製作個性 CLI 的教程
ofollow,noindex">如何用node開發自己的cli工具併發布到NPM ， 想詳細瞭解製作流程的可以簡單看看。
vue-cli
截止 2018-09-02 vue-cli 最新版本為 3.0
vue 中文生態非常完善，我們直接去官網看看：
vue-cli2 和 vue-cli3 的對比
很遺憾， vue-cli-3 是 2018-08-11 出來的，而我的論壇早在之前就著手搭建了 cli-3 耽誤了我一些時間，後面也會提到
簡單看看了看 vue-cli3 的新特性：
- 可以生成 pwa
- 支援 UI 介面勾勾選選就可以了
- 相容 cnpm 了
- 搞了一套自己的 vue-cli-service 如下：
我這兩天不忙的時候就在考慮專案相容 vli-3 但是後來廢了很多時間，效果依然不理想，我回滾了程式碼宣佈放棄了。
鑑於使用 cli-3 並沒有對我的專案有效能上的提升，反而翻遍了我的很多成熟的基礎架構，為時間成本考慮，我決定還是使用 cli-2 進行開發，大體目錄結構都是一樣的。
vue-cli 的安裝
安裝前應注意前提條件，避免浪費不必要的時間。
Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+ )。(如果你用的和我一樣 也是 cli-2 那麼不需要如此新的 nodeJs )你可以使用 nvm 或 nvm-windows 在同一臺電腦中管理多個 Node 版本。
不將遠離了，官網比我講的好得多。
可以使用 yarn 或 npm 來安裝
npm install -g @vue/cli # OR yarn global add @vue/cli 複製程式碼
我用 NPM 來重新嘗試一次 (對 npm 速度表示不理想的 可以嘗試淘寶的CNPM 不要過度依賴cnpm)：
localhost:~ Venda-GM$ sudo cnpm i @vue/cli -g 複製程式碼
TIPS
npm 中 install 可以寫成 i , -g 放哪都行 ，--save 可以寫成 -S , --save-dev 可以寫成 -D
看到這個畫面，安裝完成了。
測試一下檢視一下版本是不是正確，ok 建立專案：
vue create new-bee 複製程式碼
拉取 2.x 模板 (舊版本)
Vue CLI 3 和舊版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的 vue init 功能，你可以全域性安裝一個橋接工具：
npm install -g @vue/cli-init 複製程式碼
vue init 的執行效果將會跟 [email protected] 相同
vue init webpack my-project #這樣來生成一個 *cli-2* 專案 複製程式碼
使用 vue-cli-2 生成專案
vue init webpack new-bee 複製程式碼
下面是我建立專案我所選的選項：
稍微講講下面三個：
- vue build 的方式
推薦使用 執行時 + 編譯時，通常需要 webpack 編譯 .vue 模板。
- 是否選擇預先設定的Eslint
並是不每個人都適合的，有的要求過於嚴格，我自己有一套成熟的， 程式碼在這裡 , 就用自己的了，當然可以基於它做一些刪減。
- 它要幫我們執行 install
如果你有一個好的socket終端代理，可以用這個，否則可以選擇 No 自己用 cnpm 執行
初窺目錄結構
讓我們來看看 vue-cli2 自動生成的專案目錄，我打上標籤，為可能不太理解的同學簡單描述一下
這次我們重構的主要目的是規範、更適合多模組多人協作、而不是為了讓它看起來更復雜，本文的專案結構、 esLint 改良、等都是經過專案小組反覆的推敲決定的，有一定的生產價值。
杞人憂天 ： 為 electron 做好準備
cli 生成的專案 src 下面直接就是原始碼，但是為了考慮以後使用 electron 我們再用 renderer 包裹一下，規範一點。
可以參考一下 electron-vue
相容Electron的原始碼目錄
tips: 上述截圖 github 樹形目錄的外掛是 octotree 也可以在谷歌商店直接搜尋安裝，看原始碼省去不少時間。
- 先不建立 electron 的 main 資料夾 和 index.ejs 需要新增依賴，目前暫時用不到。
別忘了改一下 webpack 相關的路徑問題
加上 renderer 的路徑
app: './renderer/src/main.js' 複製程式碼
@ 的路徑也要在 webpack 進行修改，否則會不找元件
[別名] 配置
改之後的樣子
alias: {
'@': resolve('renderer/src'),
}
複製程式碼
容器級的目錄
在 元件目錄( components ) 同級建立 容器 ( container ) ：容器裡面的各個模組分離開，這樣可以使專案 模組 看起來更加清晰。如果十多人協作的專案又能很好地對工作區劃分，合理的建立路由，避免不必要的衝突。
以目前的 論壇專案 為例
路由目錄的調整規範
在 / router 下為 /container/blog 建立 blog.js
const Blog = () => import ( /* webpackChunkName: "blog" */ '@/container/blog/index')
/*
所有container/blog目錄下的路徑都配置在此路由children下，避免混亂
*/
let routes = [{
path: '/blog',
name: 'blog',
component: Blog,
children: [{
path: 'blogdemo',
component: Blog
}
]
}]
export {
routes
}
// 注意
/* webpackChunkName: "blog" */
//是為了後面的路由懶載入，後面會講，不懂沒關係，現在可以忽略
複製程式碼
- 自動生成的 index.js 主路由是這樣的
- 缺點：
太單一，我們不可能所有的路由都寫在裡面作為 children ，看起來非常混亂，開發除錯很難處理，多人協作還很容易引起衝突。
我們嘗試將 blog.js 引過來
先將 blog.js export 的路由引過來，起一個別名防止衝突
import { routes as blogRoutes } from './blog'
複製程式碼
因為可能有N多個路由模組，我們將 routes 拆分
自動生成的是這樣簡單的：
//直接匯出路由
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
複製程式碼
我們拆分成這樣：
//定義基礎路由
let route = [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
//以此類推可以方便的連結更多路由
route = route.concat(blogRoutes)
//匯出
export default new Router({
routes: route,
linkActiveClass: 'active'
})
複製程式碼
回過頭來，我們為 blog/index.vue 新增一些內容，測試一下：
<template>
<div class="Blog">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: "Blog",
data() {
return {
msg: "Welcome to Your Blog Page"
};
}
};
</script>
複製程式碼
測試一下
首先
npm install 複製程式碼
嫌慢可以使用淘寶的 cnpm 我以前的文章講過
npm run dev 複製程式碼
按照提示在瀏覽器輸入： http://localhost:8080/#/blog
vue-cli2 webpack 生成的專案是支援 熱部署 的，所以很多配置不需要自己從零開始配置，這也是我希望大家使用 CLI 的原因，省去了一些時間。其他 login 等一些模組 按照這個模式寫就可以了。
談談 eslint
個人覺得 esLint 不論是在個人專案還是團隊協作中，都是有價值的，它可以讓自己、團隊的程式碼風格標準化。現在esLint 甚至可以預測你的程式碼是否可能會有問題。建議可以制定一些規則，開發時通過你的 IDE(整合環境) ： idea 、WebStorm、 vscode、 之類的外掛配合檢測， eslint 打包檢測編譯不通過的那種非常嚴格的初期還是不要嘗試了。
我當時參考 airbnb 調整的配置，經過一年多的專案實戰逐漸調整，目前還算比較合理， esLint配置規則程式碼在這裡 。