一、Vue-cli 3.x安裝

Node 版本要求：Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)

npm install -g @vue/cli

查版本是否正確 (3.x)：

vue --version

官方安裝文檔：https://cli.vuejs.org/zh/guide/installation.html

二、創建一個項目

以搭建一個項目名稱為vue-test的Vue前端項目為例

1.在cmd下運行以下命令創建項目

vue create vue-test

下面將根據提示進行相應的配置。

2.選擇配置方式

說明：

• default (babel, eslint) ：默認配置
• Manually select features： 手動選擇配置

這裏選擇 Manually select features

3.手動選擇項目需要的特性

說明：

• Babel： Babel編譯
• TypeScript：TypeScript支持
• Progressive Web App (PWA) Support： PWA支持
• Router： Vue路由
• Vuex： Vue狀態管理
• CSS Pre-processors： CSS預編譯器（包括：SCSS/Sass、Less、Stylus）
• Linter / Formatter： 代碼檢測和格式化
• Unit Testing： 單元測試
• E2E Testing： 端到端測試

這裏選擇上圖勾選的項。

4.路由是否采用history模式，這裏選擇 y

5.選擇CSS預編譯器，這裏選擇 Less

6.選擇ESLint的代碼規範，這裏選擇 ESLint + Standard config

7.選擇何時進行代碼檢測，這裏選擇 Lint on save

說明：

• Lint on save： 在保存時進行檢測
• Lint and fix on commit： 在fix和commit是進行檢查

8.選擇單元測試解決方案，這裏選擇 Jest

9.選擇 Babel、PostCSS、ESLint等配置文件存放位置，這裏選擇 In dedicated config files

說明：

• In dedicated config files： 單獨保存在各自的配置文件中
• In package.json： 保存在package.json文件中

10.是否記錄一下以便下次使用這套配置，這裏選擇 N 不記錄，如果鍵入Y需要輸入保存名字

11.確定後，等待Vue-cli完成初始化

12.vue-cli初始化完成後，根據提示，進入vue-test項目中，並啟動項目

（1）進入vue-test項目

cd vue-test

（2）啟動服務

yarn server

（3）打包編譯

yarn build

（4）執行lint

yarn lint

（5）執行單元測試

yarn test:unit

效果預覽：

更多請查看：https://cli.vuejs.org/zh/

使用Vue-cli 3.x搭建Vue項目