為了便于 Vue 項(xiàng)目的管理， Vue 團(tuán)隊(duì)官方開發(fā)了 vue-cli 工具。

本文將帶您使用 vue-cli 快速創(chuàng)建一個(gè) Vue 項(xiàng)目。

本地安裝 vue-cli

使用 npm 全局安裝 vue-cli ：

npm i -g @vue/cli@3.0.0-beta.6

創(chuàng)建項(xiàng)目

執(zhí)行：

vue create my-project

會(huì)彈出如下界面：

選擇套餐

此處有兩個(gè)選擇：

• default (babel, eslint) 默認(rèn)套餐，提供 babel 和 eslint 支持。
• Manually select features 自己去選擇需要的功能，提供更多的特性選擇。比如如果想要支持 TypeScript ，就應(yīng)該選擇這一項(xiàng)。

可以使用上下方向鍵來(lái)切換選項(xiàng)。如果只需要 babel 和 eslint 支持，那么選擇第一項(xiàng)，就完事了，靜靜等待 vue 初始化項(xiàng)目。

如果想要更多的支持，就選擇第二項(xiàng)：切換到第二項(xiàng)，按下 enter 鍵選中，彈出如下界面：

選擇特性支持

vue-cli 內(nèi)置支持了8個(gè)功能特性，可以多選：使用方向鍵在特性選項(xiàng)之間切換，使用空格鍵選中當(dāng)前特性，使用 a 鍵切換選擇所有，使用 i 鍵翻轉(zhuǎn)選項(xiàng)。

對(duì)于每一項(xiàng)的功能，此處做個(gè)簡(jiǎn)單描述：

• TypeScript 支持使用 TypeScript 書寫源碼。
• Progressive Web App (PWA) Support PWA 支持。
• Router 支持 vue-router 。
• Vuex 支持 vuex 。
• CSS Pre-processors 支持 CSS 預(yù)處理器。
• Linter / Formatter 支持代碼風(fēng)格檢查和格式化。
• Unit Testing 支持單元測(cè)試。
• E2E Testing 支持 E2E 測(cè)試。

那么基于開發(fā)常見的項(xiàng)目，同時(shí)兼顧項(xiàng)目健壯性的原則，本次選擇如下特性支持：

特性選項(xiàng)

按下 enter 鍵確認(rèn)選擇，進(jìn)入下一步：

image.png

這里是讓選擇在開發(fā) Vue 組件時(shí)，要不要使用 class 風(fēng)格的寫法。為了更方便地使用 TypeScript ，此處選擇 Y ：

使用 class 風(fēng)格的 Vue 組件開發(fā)方式

按 enter 鍵，進(jìn)入下一步：

image.png

這個(gè)選項(xiàng)的意思是要不要使用 babel 工具自動(dòng)為轉(zhuǎn)換后的 TypeScript 代碼注入 polyfiills 。如果實(shí)在搞不清楚具體是什么意思，可以先不用管，直接選擇 Y ，進(jìn)入下一步：

選擇 CSS 預(yù)處理器

這里就是說(shuō)我們?cè)陧?xiàng)目里面需要支持何種動(dòng)態(tài)樣式語(yǔ)言，此處提供了三個(gè)選項(xiàng)：

• SCSS/SASS
• LESS
• Stylus

此處選擇 LESS ，進(jìn)入下一步：

單測(cè)工具

選擇單元測(cè)試工具，直接選擇現(xiàn)在比較火的 Jest ，進(jìn)入下一步：

配置文件位置

這一步就是要選擇配置文件的位置了。對(duì)于 Babel 、 PostCSS 等，都可以有自己的配置文件： .babelrc 、 .postcssrc 等等，同時(shí)也可以把配置信息放在 package.json 里面。此處出于對(duì)編輯器（ Visual Studio Code ）的友好支持（編輯器一般默認(rèn)會(huì)在項(xiàng)目根目錄下尋找配置文件），選擇把配置文件放在外面，選擇 In dedicated config files ，進(jìn)入下一步：

presets

這個(gè)就是問(wèn)要不要把當(dāng)前的這一系列選項(xiàng)配置保存起來(lái)，方便下一次創(chuàng)建項(xiàng)目時(shí)復(fù)用。對(duì)于 MAC ，保存的配置信息會(huì)放在 ~/.vuerc 里面。

我這里就選擇 n 了，然后進(jìn)入下一步：

registry

這里是選擇 npm registry ，在中國(guó)的話，就直接使用默認(rèn)的淘寶鏡像就行了。

選完之后， vue-cli 就根據(jù)前面選擇的內(nèi)容，開始初始化項(xiàng)目了。

啟動(dòng)項(xiàng)目

初始完之后，進(jìn)入到項(xiàng)目根目錄：

cd my-project

啟動(dòng)項(xiàng)目：

npm run serve

稍等一會(huì)兒，可以看到自動(dòng)在瀏覽器中打開了如下界面：

界面

打包上線

在開發(fā)完項(xiàng)目之后，就應(yīng)該打包上線了。 vue-cli 也提供了打包的命令，在項(xiàng)目根目錄下執(zhí)行：

npm run build

執(zhí)行完之后，可以看到在項(xiàng)目根目錄下多出了一個(gè) dist 目錄，該目錄下就是打包好的所有靜態(tài)資源，直接部署到靜態(tài)資源服務(wù)器就好了。

實(shí)際上，在部署的時(shí)候要注意，假設(shè)靜態(tài)服務(wù)器的域名是 http://static.baidu.com ，那么對(duì)應(yīng)到訪問(wèn) <項(xiàng)目根目錄>/dist/index.html 的 URL 一定要是 http://static.baidu.com/index.html ，其他的靜態(tài)資源以此類推。

單元測(cè)試

執(zhí)行：

npm run test