vue-cli 3.0 搭建項目流程

公司最近要開新項目想要使用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:

  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

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

以下圖:

五、安裝成功

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

六、Ps:中間由於網速問題項目安裝失敗,從新建立項目的時候,選擇預置的那個選項裏多了我以前保存的yayaPro的項目配置,直接選擇就能夠了。不過像網上說的目前不知道怎麼刪除這個配置,之後仍是不保存了。

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

相關文章
相關標籤/搜索