搭建項目之前，請確認好你自己已經安裝過node, npm, vue cli。沒安裝的可以參考下面的鏈接安裝。

如何安裝node?

安裝好node默認已經安裝好npm了，所以不用單獨安裝了。

如何安裝vue cli?

劇場環境已搭建好，開始表演！

1.進入一個目錄，創建項目

 

 對應命令：

vue create project-one

 

2.我們這里選擇手動配置

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

 3.選擇你需要的配置項

通過↑ ↓ 箭頭選擇你要配置的項，按 空格 是選中，按 a 是全選，按 i 是反選。具體每個配置項表示什么意思在下面會有說明。

 

 

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) 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） 測試

 

選完之后按 Enter。分別選擇每個對應功能的具體包。選你擅長的，沒有擅長的，就選使用廣的，哈哈，方便咨詢別人。

 

3.1 選擇是否使用history router

 

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

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

  Use history mode for router? (Requires proper server setup for index fallback in production)

 

3.2 選擇css 預處理器

我選擇的是Sass/Scss(with dart-sass) 

node-sass是自動編譯實時的，dart-sass需要保存后才會生效。sass 官方目前主力推dart-sass 最新的特性都會在這個上面先實現。（該回答參考http://www.imooc.com/qadetail/318730）

 

3.3 選擇Eslint代碼驗證規則

提供一個插件化的javascript代碼檢測工具，ESLint + Prettier //使用較多

 

3.4 選擇什么時候進行代碼規則檢測

( ) Lint on save // 保存就檢測
( ) Lint and fix on commit // fix和commit時候檢查

建議選擇保存就檢測，等到commit的時候，問題可能都已經積累很多了。

 

3.5 選擇單元測試

 

> Mocha + Chai //mocha靈活,只提供簡單的測試結構，如果需要其他功能需要添加其他庫/插件完成。必須在全局環境中安裝
Jest //安裝配置簡單，容易上手。內置Istanbul，可以查看到測試覆蓋率，相較於Mocha:配置簡潔、測試代碼簡潔、易於和babel集成、內置豐富的expect

 

3.6 選擇如何存放配置

> In dedicated config files // 獨立文件放置
  In package.json // 放package.json里

如果是選擇 獨立文件放置，項目會有單獨如下圖所示的幾件文件。

 

3.7 是否保存當前配置

鍵入N不記錄，如果鍵入Y需要輸入保存名字，如第2步所看到的我保存的名字為test。

 

4.等待創建項目

 

5.執行它給出的命令，可以直接訪問了

到這里我們的項目就已搭建完成啦~~

有問題歡迎留言~~