使用 vue-cli 3 快速建立 Vue 項目

爲了便於 Vue 項目的管理， Vue 團隊官方開發了 vue-cli 工具。

本文將帶您使用 vue-cli 快速建立一個 Vue 項目。

本地安裝 vue-cli

使用 npm 全局安裝 vue-cli ：

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

建立項目

執行：

vue create my-project

會彈出以下界面：

此處有兩個選擇：

• default (babel, eslint) 默認套餐，提供 babel 和 eslint 支持。
• Manually select features 本身去選擇須要的功能，提供更多的特性選擇。好比若是想要支持 TypeScript ，就應該選擇這一項。

可使用上下方向鍵來切換選項。若是隻須要 babel 和 eslint 支持，那麼選擇第一項，就完事了，靜靜等待 vue 初始化項目。

若是想要更多的支持，就選擇第二項：切換到第二項，按下 enter 鍵選中，彈出以下界面：

vue-cli 內置支持了8個功能特性，能夠多選：使用方向鍵在特性選項之間切換，使用空格鍵選中當前特性，使用 a 鍵切換選擇全部，使用 i 鍵翻轉選項。

對於每一項的功能，此處作個簡單描述：

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

那麼基於開發常見的項目，同時兼顧項目健壯性的原則，本次選擇以下特性支持：

按下 enter 鍵確認選擇，進入下一步：

這裏是讓選擇在開發 Vue 組件時，要不要使用 class 風格的寫法。爲了更方便地使用 TypeScript ，此處選擇 Y ：

按 enter 鍵，進入下一步：

這個選項的意思是要不要使用 babel 工具自動爲轉換後的 TypeScript 代碼注入 polyfiills 。若是實在搞不清楚具體是什麼意思，能夠先不用管，直接選擇 Y ，進入下一步：

這裏就是說咱們在項目裏面須要支持何種動態樣式語言，此處提供了三個選項：

• SCSS/SASS
• LESS
• Stylus

此處選擇 LESS ，進入下一步：

選擇單元測試工具，直接選擇如今比較火的 Jest ，進入下一步：

這一步就是要選擇配置文件的位置了。對於 Babel 、 PostCSS 等，均可以有本身的配置文件： .babelrc 、 .postcssrc 等等，同時也能夠把配置信息放在 package.json 裏面。此處出於對編輯器（ Visual Studio Code ）的友好支持（編輯器通常默認會在項目根目錄下尋找配置文件），選擇把配置文件放在外面，選擇 In dedicated config files ，進入下一步：

這個就是問要不要把當前的這一系列選項配置保存起來，方便下一次建立項目時複用。對於 MAC ，保存的配置信息會放在 ~/.vuerc 裏面。

我這裏就選擇 n 了，而後進入下一步：

這裏是選擇 npm registry ，在中國的話，就直接使用默認的淘寶鏡像就好了。

選完以後， vue-cli 就根據前面選擇的內容，開始初始化項目了。

啓動項目

初始完以後，進入到項目根目錄：

cd my-project

啓動項目：

npm run serve

稍等一下子，能夠看到自動在瀏覽器中打開了以下界面：

打包上線

在開發完項目以後，就應該打包上線了。 vue-cli 也提供了打包的命令，在項目根目錄下執行：

npm run build

執行完以後，能夠看到在項目根目錄下多出了一個 dist 目錄，該目錄下就是打包好的全部靜態資源，直接部署到靜態資源服務器就行了。

實際上，在部署的時候要注意，假設靜態服務器的域名是 http://static.baidu.com ，那麼對應到訪問 <項目根目錄>/dist/index.html 的 URL 必定要是 http://static.baidu.com/index.html ，其餘的靜態資源以此類推。

單元測試

執行：

npm run test