vue-cli 3.0 搭建項目流程

公司最近要開新項目想要使用vue-cli 3.0 搭建項目，今天查了vue-cli 3.0 搭建項目的流程及注意事項，在這里記錄一下。

創建項目之前先確定vue-cli、node、及npm的版本，vue-cli 3.0要求node版本在8.0. 以上。

1、創建項目

vue create yaya

2、選擇預置配置，選擇 Manually select features，按上下箭頭可以切換選項，按回車選中。

3、選擇項目配置選項，如下圖:

在英文輸入法狀態下，按 '空格鍵' 選中當前箭頭所指選項，按 a 鍵全選，按 i 鍵反選，中文輸入時a 鍵和 i 鍵是輸入，不能選擇。

看一下這幾個選項都是做什么的吧

Babel                         babel是一種用途很多的javascript編譯器，簡言之可以讓我們在當前的項目中隨意的使用javascript最新的es6，甚至es7的語法。
TypeScript                 TypeScript是一種由微軟開發的自由和開源的編程語言。它是JavaScript的一個超集，而且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。
Progressive Web App (PWA) Support                   漸進式Web應用程序（PWA）支持
Router            vue路由管理器
Vuex               vue狀態管理
CSS Pre-processors                 css預處理器
Linter / Formatter       格式化規則
Unit Testing                單元測試
E2E Testing

在選擇功能后，會詢問更細節的配置，

Router：

是否使用history模式：Use history mode for router? (Requires proper server setup for index fallback in production) No

TypeScript：

1. 是否使用class風格的組件語法：Use class-style component syntax?
2. 是否使用babel做轉義：Use Babel alongside TypeScript for auto-detected polyfills?

CSS Pre-processors：

1. 選擇CSS 預處理類型：Pick a CSS pre-processor   SCSS/SASS

Linter / Formatter

1. 選擇Linter / Formatter規范類型：Pick a linter / formatter config    Prettier
2. 選擇lint方式，保存時檢查/提交時檢查：Pick additional lint features   Lint on save

Testing

1. 選擇Unit測試方式  Jest
2. 選擇E2E測試方式   Nightwatch

選擇 Babel, PostCSS, ESLint 等自定義配置的存放位置 Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files

4、 Save this as a preset for future projects?  是否保存當前配置，如果選Y會要求輸入配置名字。

如下圖：

5、安裝成功

// 進入項目文件夾
cd yaya
// 啟動項目
npm run serve

6、Ps：中間因為網速問題項目安裝失敗，重新創建項目的時候，選擇預置的那個選項里多了我之前保存的yayaPro的項目配置，直接選擇就可以了。不過像網上說的目前不知道怎么刪除這個配置，以后還是不保存了。

至此，使用vue-cli 3.0 搭建項目完成，項目中遇到別的問題再另外總結吧。