摘要：可以使用或來(lái)安裝我用來(lái)重新嘗試一次對(duì)速度表示不理想的可以嘗試淘寶的不要過(guò)度依賴(lài)中可以寫(xiě)成放哪都行，可以寫(xiě)成可以寫(xiě)成看到這個(gè)畫(huà)面，安裝完成了。

Tips

任何不錯(cuò)的開(kāi)源項(xiàng)目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架

我通常使用 cli 生成項(xiàng)目骨架再在之基礎(chǔ)上進(jìn)行個(gè)人修改。

命令行界面（英語(yǔ)：command-line interface，縮寫(xiě)：CLI）是在圖形用戶(hù)界面得到普及之前使用最為廣泛的用戶(hù)界面，它通常不支持鼠標(biāo)，用戶(hù)通過(guò)鍵盤(pán)輸入指令，計(jì)算機(jī)接收到指令后，予以執(zhí)行。也有人稱(chēng)之為字符用戶(hù)界面

顧名思義 XXX-CLI 就是使用命令行生成的 XXX 程序。之前寫(xiě)過(guò)一款 基于 nodeJs 制作個(gè)性 CLI 的教程

如何用node開(kāi)發(fā)自己的cli工具并發(fā)布到NPM ， 想詳細(xì)了解制作流程的可以簡(jiǎn)單看看。

截止 2018-09-02 vue-cli 最新版本為 3.0

vue 中文生態(tài)非常完善，我們直接去官網(wǎng)看看：

https://cli.vuejs.org/zh/

很遺憾，vue-cli-3 是 2018-08-11 出來(lái)的，而我的論壇早在之前就著手搭建了 cli-3 耽誤了我一些時(shí)間，后面也會(huì)提到

可以生成 pwa

支持 UI 界面勾勾選選就可以了

兼容 cnpm 了

搞了一套自己的 vue-cli-service 如下：

我這兩天不忙的時(shí)候就在考慮項(xiàng)目兼容 vli-3 但是后來(lái)廢了很多時(shí)間，效果依然不理想，我回滾了代碼宣布放棄了。

鑒于使用 cli-3 并沒(méi)有對(duì)我的項(xiàng)目有性能上的提升，反而翻遍了我的很多成熟的基礎(chǔ)架構(gòu)，為時(shí)間成本考慮，我決定還是使用 cli-2 進(jìn)行開(kāi)發(fā)，大體目錄結(jié)構(gòu)都是一樣的。

安裝前應(yīng)注意前提條件，避免浪費(fèi)不必要的時(shí)間。

Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。(如果你用的和我一樣 也是 cli-2 那么不需要如此新的 nodeJs )你可以使用 nvm 或 nvm-windows 在同一臺(tái)電腦中管理多個(gè) Node 版本。

不將遠(yuǎn)離了，官網(wǎng)比我講的好得多。

可以使用 yarn 或 npm 來(lái)安裝

npm install -g @vue/cli
# OR
yarn global add @vue/cli

我用 NPM 來(lái)重新嘗試一次 (對(duì) npm 速度表示不理想的 可以嘗試淘寶的 CNPM 不要過(guò)度依賴(lài)cnpm)：

localhost:~ Venda-GM$ sudo cnpm i @vue/cli -g

npm 中 install 可以寫(xiě)成 i , -g 放哪都行 ，--save 可以寫(xiě)成 -S  , --save-dev 可以寫(xiě)成 -D

看到這個(gè)畫(huà)面，安裝完成了。

測(cè)試一下查看一下版本是不是正確，ok 創(chuàng)建項(xiàng)目：

vue create new-bee

Vue CLI 3 和舊版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的 vue init 功能，你可以全局安裝一個(gè)橋接工具：

npm install -g @vue/cli-init

vue init webpack my-project #這樣來(lái)生成一個(gè) *cli-2* 項(xiàng)目

vue init webpack new-bee

下面是我創(chuàng)建項(xiàng)目我所選的選項(xiàng)：

稍微講講下面三個(gè)：

vue build 的方式

推薦使用 運(yùn)行時(shí) + 編譯時(shí)，通常需要 webpack 編譯 .vue 模板。

是否選擇預(yù)先設(shè)定的Eslint

并是不每個(gè)人都適合的，有的要求過(guò)于嚴(yán)格，我自己有一套成熟的，代碼在這里 , 就用自己的了，當(dāng)然可以基于它做一些刪減。

它要幫我們執(zhí)行 install

如果你有一個(gè)好的socket終端代理，可以用這個(gè)，否則可以選擇 No 自己用 cnpm 執(zhí)行

讓我們來(lái)看看 vue-cli2 自動(dòng)生成的項(xiàng)目目錄，我打上標(biāo)簽，為可能不太理解的同學(xué)簡(jiǎn)單描述一下

這次我們重構(gòu)的主要目的是規(guī)范、更適合多模塊多人協(xié)作、而不是為了讓它看起來(lái)更復(fù)雜，本文的項(xiàng)目結(jié)構(gòu)、esLint 改良、等都是經(jīng)過(guò)項(xiàng)目小組反復(fù)的推敲決定的，有一定的生產(chǎn)價(jià)值。

cli 生成的項(xiàng)目 src 下面直接就是源碼，但是為了考慮以后使用 electron 我們?cè)儆?renderer 包裹一下，規(guī)范一點(diǎn)。

可以參考一下 electron-vue 

tips: 上述截圖 github 樹(shù)形目錄的插件是 octotree 也可以在谷歌商店直接搜索安裝，看源碼省去不少時(shí)間。

先不建立 electron 的 main 文件夾 和 index.ejs 需要添加依賴(lài)，目前暫時(shí)用不到。

別忘了改一下 webpack 相關(guān)的路徑問(wèn)題

加上 renderer 的路徑

 app: "./renderer/src/main.js"

@ 的路徑也要在 webpack 進(jìn)行修改，否則會(huì)不找組件

需要改下 webpack alias [別名] 配置

改之后的樣子

alias: {
      "@": resolve("renderer/src"),
    }

在 組件目錄(components) 同級(jí)建立 容器(container) ：容器里面的各個(gè)模塊分離開(kāi)，這樣可以使項(xiàng)目模塊看起來(lái)更加清晰。如果十多人協(xié)作的項(xiàng)目又能很好地對(duì)工作區(qū)劃分，合理的建立路由，避免不必要的沖突。

以目前的論壇項(xiàng)目為例

在 /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" */ 
//是為了后面的路由懶加載，后面會(huì)講，不懂沒(méi)關(guān)系，現(xiàn)在可以忽略

自動(dòng)生成的 index.js 主路由是這樣的

缺點(diǎn)：

太單一，我們不可能所有的路由都寫(xiě)在里面作為 children ，看起來(lái)非常混亂，開(kāi)發(fā)調(diào)試很難處理，多人協(xié)作還很容易引起沖突。

我們嘗試將 blog.js 引過(guò)來(lái)

先將 blog.js export 的路由引過(guò)來(lái)，起一個(gè)別名防止沖突

import { routes as blogRoutes } from "./blog"

因?yàn)榭赡苡蠳多個(gè)路由模塊，我們將 routes 拆分

自動(dòng)生成的是這樣簡(jiǎn)單的：

//直接導(dǎo)出路由
export default new Router({
  routes: [
    {
      path: "/",
      name: "HelloWorld",
      component: HelloWorld
    }
  ]
})

我們拆分成這樣：

//定義基礎(chǔ)路由
let route = [
  {
    path: "/",
    name: "HelloWorld",
    component: HelloWorld
  }
]

//以此類(lèi)推可以方便的鏈接更多路由
route = route.concat(blogRoutes)

//導(dǎo)出
export default new Router({
  routes: route,
  linkActiveClass: "active"
})

回過(guò)頭來(lái)，我們?yōu)?blog/index.vue 添加一些內(nèi)容，測(cè)試一下：

首先

npm install

嫌慢可以使用淘寶的 cnpm 我以前的文章講過(guò)

npm run dev

按照提示在瀏覽器輸入：http://localhost:8080/#/blog

vue-cli2 webpack 生成的項(xiàng)目是支持熱部署的，所以很多配置不需要自己從零開(kāi)始配置，這也是我希望大家使用 CLI 的原因，省去了一些時(shí)間。其他 login 等一些模塊 按照這個(gè)模式寫(xiě)就可以了。

個(gè)人覺(jué)得 esLint 不論是在個(gè)人項(xiàng)目還是團(tuán)隊(duì)協(xié)作中，都是有價(jià)值的，它可以讓自己、團(tuán)隊(duì)的代碼風(fēng)格標(biāo)準(zhǔn)化。現(xiàn)在esLint 甚至可以預(yù)測(cè)你的代碼是否可能會(huì)有問(wèn)題。建議可以制定一些規(guī)則，開(kāi)發(fā)時(shí)通過(guò)你的 IDE(集成環(huán)境) ： idea 、WebStorm、 vscode、 之類(lèi)的插件配合檢測(cè)，eslint 打包檢測(cè)編譯不通過(guò)的那種非常嚴(yán)格的初期還是不要嘗試了。

我當(dāng)時(shí)參考 airbnb 調(diào)整的配置，經(jīng)過(guò)一年多的項(xiàng)目實(shí)戰(zhàn)逐漸調(diào)整，目前還算比較合理，esLint配置規(guī)則代碼在這里。

你甚至可以再 commit 里看到本章循序漸進(jìn)的改造過(guò)程

項(xiàng)目構(gòu)建暫時(shí)就講到這里了，我們依靠 cli-2 生成了一個(gè)基本的骨架，但并不依賴(lài) cli-2 ,我們對(duì)骨架進(jìn)行了一些擴(kuò)展，至于具體的 webpack 的優(yōu)化，axios 的優(yōu)化、攔截、node 做開(kāi)發(fā)模式代理層 等等，我覺(jué)得隨著項(xiàng)目進(jìn)行來(lái)講更好，我不應(yīng)該一味的灌一堆知識(shí)，希望大家能堅(jiān)持跟我消化。

目前在寫(xiě)《從零構(gòu)建前后分離項(xiàng)目》系列，修正和補(bǔ)充以此為準(zhǔn)

不斷更新的 《從零構(gòu)建前后分離項(xiàng)目》實(shí)踐地址

《從零構(gòu)建前后分離 WEB 項(xiàng)目》 序 - 開(kāi)源的意義

《從零構(gòu)建前后分離web項(xiàng)目》：開(kāi)篇 - 縱觀WEB歷史演變

《從零構(gòu)建前后分離web項(xiàng)目》探究 - 深入聊聊前后分離架構(gòu)

《從零構(gòu)建前后分離web項(xiàng)目》準(zhǔn)備 - 前端了解過(guò)關(guān)了嗎？前端基礎(chǔ)架構(gòu)和技術(shù)介紹

《從零構(gòu)建前后分離web項(xiàng)目》實(shí)戰(zhàn) - 5分鐘快速構(gòu)建規(guī)范的前端項(xiàng)目骨架