使用cli-4.x搭建vue項目詳情過程

前言

cli-4.x已經發布很久了，斟酌了很久，仍是決定將原來的cli-2.x升級到4.x,詳細的升級過程能夠 戳這裏

一、建立項目 vue create vuetest

二、選擇配置方式

? Please pick a preset: (Use arrow keys)  ☜(使用箭頭鍵)
> default (babel, eslint)                 ☜(使用默認的配置，會安裝babel和eslint)
  Manually select features                ☜(手動配置)
複製代碼

這裏我選擇的是手動配置（使用↑ ↓箭頭切換，Enter確認，箭頭切換失效能夠戳這裏），固然若是你以前有保存過配置模板的話，在這裏還會有第三個選項就是你以前保存過的（下面會說到），由於想一想配置的不是不少，因此習慣了每次都是手動配置

三、手動配置項選擇

經過↑ ↓ 箭頭選擇你要配置的項，按 空格 是選中，按 a 是全選，按 i 是反選 (如下是每個選項的詳細解釋)

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel                                 ☜(轉碼器，能夠將ES6代碼轉爲ES5代碼)
 ( ) TypeScript                            ☜( js的超集，強類型語言)
 ( ) Progressive Web App (PWA) Support     ☜(漸進式Web應用程序)
 ( ) Router                                ☜(vue-router（vue路由）)
 ( ) Vuex                                  ☜(vuex（vue的狀態管理模式）)
 ( ) CSS Pre-processors                    ☜(CSS 預處理器（如：less、sass）)
 (*) Linter / Formatter                    ☜(代碼風格檢查和格式化（如：ESlint）)
 ( ) Unit Testing                          ☜(單元測試)
 ( ) E2E Testing                           ☜(集成測試)
複製代碼

根據本身項目的實際需求選擇合適的配置

我這裏是全選了 這裏是後面會出現的配置詳細信息

?Use class-style component syntax? (Y/n)：  ☜(是否使用babel作轉義)

---------------------------------------------------------------------------------------
?Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? ☜(使用Babel與TypeScript一塊兒用於自動檢測的填充)

---------------------------------------------------------------------------------------
?Use history mode for router? (Requires proper server setup for index fallback in production)   ☜(路由模式)

--------------------------------------------------------------------------------------
?Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)      ☜(CSS編譯器)
> Sass/SCSS (with dart-sass)   ☜(保存後編譯)
 Sass/SCSS (with node-sass)    ☜(實時編譯)
 Less
 Stylus
----------------------------------------------------------------------------------------
?Pick a linter / formatter config: (Use arrow keys) ☜(選擇語法檢查規範)
> ESLint with error prevention only                 ☜(只進行報錯提醒)
 ESLint + Airbnb config                             ☜(不嚴謹模式)
 ESLint + Standard config                           ☜(正常模式)
 ESLint + Prettier                                  ☜(嚴格模式)
 TSLint (deprecated)                                ☜(typescript格式驗證工具)
----------------------------------------------------------------------------------------
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)  ☜(選擇何時進行代碼規則檢測)
>(*) Lint on save                                    ☜(保存就檢測)
( ) Lint and fix on commit                          ☜(fix和commit時候檢測)
-----------------------------------------------------------------------------------------
? Pick a unit testing solution
>(*) Mocha + Chai           ☜(mocha靈活,只提供簡單的測試結構，若是須要其餘功能須要添加其餘庫/插件完成。必須在全局環境中安裝)
( ) Jest                    ☜(安裝配置簡單，容易上手。內置Istanbul，能夠查看到測試覆蓋率，相較於Mocha:配置簡潔、測試代碼簡潔、易於和babel集成、內置豐富的expect)
------------------------------------------------------------------------------------------
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)  ☜(選擇如何存放配置測) 
> In dedicated config files   ☜(獨立文件放置) 
 In package.json              ☜(放package.json裏) 
 -----------------------------------------------------------------------------------------
 ? Save this as a preset for future projects? (y/N)    ☜(保存上述配置，保存後下一次可直接根據上述配置生成項目，就是上面提到的第三種狀況) 
複製代碼

到這裏配置就基本完成了，等待項目加載各類包...

加載完成後，進入項目，npm run serve啓動就能夠了...

好了今天就到這裏了

轉載需標註，謝謝~.~