Vue-cli4.0快速搭建一個專案

　　搭建專案之前，請確認好你自己已經安裝過node, npm或者cnpm, vue-cli。

1、進入自己放專案的目錄，輸入命令建立一個專案

　　vue creat 專案名

2、這裡選擇手動配置

　　按↓選擇“Manually select features”，再按Enter

3、選擇自己需要的配置項

　　按中空格選中或取消選中，下圖是我最後的配置

　　下面是每個配置項表示什麼意思

>( ) Babel //轉碼器，可以將ES6程式碼轉為ES5程式碼，從而在現有環境執行。 
 ( ) TypeScript// TypeScript是一個JavaScript（字尾.js）的超集（後
 
綴.ts）包含並擴充套件了 JavaScript 的語法，需要被編譯輸出為 JavaScript在瀏覽器執行
 ( ) Progressive Web App (PWA) Support// 漸進式Web應用程式
 ( ) Router // vue-router（vue路由）
 ( ) Vuex // vuex（vue的狀態管理模式）
 ( ) CSS Pre-processors // CSS 前處理器（如：less、sass）
 ( ) Linter / Formatter // 程式碼風格檢查和格式化（如：ESlint）
 ( ) Unit Testing // 單元測試（unit tests）
 ( ) E2E Testing //
 
 e2e（end to end） 測試

4、選擇vue版本

　　我這裡使用的是2.0版本

5、選擇是否使用history router

　其實直白來說就是是否路徑帶 # 號，建議選擇 N，否則伺服器還要進行配置

　 Vue-Router 利用了瀏覽器自身的hash 模式和 history 模式的特性來實現前端路由（通過呼叫瀏覽器提供的介面）。

• 選n。這樣打包出來丟到伺服器上可以直接使用了，後期要用的話，也可以自己再開起來。
• 選yes的話需要伺服器那邊再進行設定。

6、選擇css前處理器

　　css 的前處理器我選擇的是 Sass/SCSS(with dart-sass) 。node-sass是自動編譯實時的，dart-sass需要儲存後才會生效

　　sass 官方目前主力推 dart-sass最新的特性都會在這個上面先實現

7、選擇Eslink程式碼驗證規則

　　提供一個外掛化的javascript程式碼檢測工具，ESLint + Prettier //使用較多

8、選擇什麼時候進行程式碼規則檢測

　　Lint on save 儲存就檢查，Lint and fix on commit fix 或者 commit 的時候檢查，建議第一個，否則等到commit的時候問題就很多了

9、選擇單元測試

Mocha + Chai //mocha靈活,只提供簡單的測試結構，如果需要其他功能需要新增其他庫/外掛完成。必須在全域性環境中安裝
Jest //安裝配置簡單，容易上手。內建Istanbul，可以檢視到測試覆蓋率，相較於Mocha:配置簡潔、測試程式碼簡潔、易於和babel整合、內建豐富的expect

10、選擇如何存放配置

In dedicated config files // 獨立檔案放置
In package.json // 放package.json裡

　　如果是選擇獨立檔案放置，專案會有單獨如下圖所示的幾件檔案。

11、是否儲存當前配置

　　看自己心情吧

12、等待專案建立

13、執行它給出的命令，就可以通過下面的地址訪問了

好了，到這裡我們的專案就搭建好了~(*^▽^*)~