公司最近要開新項目想要使用vue-cli 3.0 搭建項目,今天查了vue-cli 3.0 搭建項目的流程及注意事項,在這裏記錄一下。javascript
建立項目以前先肯定vue-cli、node、及npm的版本,vue-cli 3.0要求node版本在8.0. 以上。css
一、建立項目vue
vue create yaya
二、選擇預置配置,選擇 Manually select features,按上下箭頭能夠切換選項,按回車選中。java
三、選擇項目配置選項,以下圖:node
在英文輸入法狀態下,按 '空格鍵' 選中當前箭頭所指選項,按 a 鍵全選,按 i 鍵反選,中文輸入時a 鍵和 i 鍵是輸入,不能選擇。es6
看一下這幾個選項都是作什麼的吧vue-cli
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 Testingnpm
在選擇功能後,會詢問更細節的配置,編程
Router:babel
是否使用history模式:Use history mode for router? (Requires proper server setup for index fallback in production) No
TypeScript:
CSS Pre-processors:
Linter / Formatter
Testing
選擇 Babel, PostCSS, ESLint 等自定義配置的存放位置 Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
四、 Save this as a preset for future projects? 是否保存當前配置,若是選Y會要求輸入配置名字。
以下圖:
五、安裝成功
// 進入項目文件夾 cd yaya // 啓動項目 npm run serve
六、Ps:中間由於網速問題項目安裝失敗,從新建立項目的時候,選擇預置的那個選項裏多了我以前保存的yayaPro的項目配置,直接選擇就能夠了。不過像網上說的目前不知道怎麼刪除這個配置,之後仍是不保存了。
至此,使用vue-cli 3.0 搭建項目完成,項目中遇到別的問題再另外總結吧。