vue-cli3搭建項目之項目初始化配置

Vue-cli3搭建完整項目之項目初始化配置

​ 最近發現vue-cli的版本更新到3+了，本着學習的態度開始研究了一下它，發現裏面變化太大了，比如原先的暴露出來的webpack的配置你會發現在3裏面根本找不到，下面就開始搭建一個完整的項目。

vue-cli3官網

一、升級或下載vue-cli3

npm install -g @vue/cli

二、創建項目

1. 創建項目

vue create 你的項目名稱

注意：原先的vue init 指令已經不適用了，如果想繼續使用可以安裝@vue/cli-init

npm install -g @vue/cli-init
vue init webpack 你的項目名稱

2. 項目配置
   

3. default: 默認配置，只有bable和eslint

4. Manually select features: 手動配置

   我選的是手動配置，以下是我的配置：

   • Babel：將ES6編譯成ES5
   • TypeScript：JS超集，主要是類型檢查
   • Progressive Web App（PWA）Support：漸進式WEB應用支持
   • Router：路由
   • Vuex：狀態管理
   • Linter/ Formatter：代碼檢查工具
   • CSS Pre-processors：css預編譯 (稍後會對這裏進行配置)
   • Unit Testing：單元測試，開發過程中前端對代碼進行自運行測試
   • E2E Testing: 端對端測試，屬於黑盒測試，通過編寫測試用例，自動化模擬用戶操作，確保組件間通信正常，程序流數據傳遞如預期。

   路由使用歷史模式? 這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面

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

   使用什麼css預編譯器？ 我選擇的less(由於我項目中配了一個vux,它是基於lessd的)

   代碼檢查工具選擇：

   • tslint: typescript格式驗證工具（如果前面選擇了TypeScript會有這一項）
   • eslint w...: 只進行報錯提醒；（如果還沒熟悉eslint,推薦使用此模式）
   • eslint + A...: 不嚴謹模式；
   • eslint + S...: 正常模式
   • eslint + P...: 嚴格模式；

   代碼檢查方式：我是都選了

5. List item

   所有的依賴目錄的配置放置的位置（一般都是package.json）

   是否在以後的項目中使用以上配置？(我選的是no,如果選是的話，下一次初始化項目時，會多出一條你上一次的配置)

   Save this as a preset for future projects? (y/N) n
   

   下載依賴的工具：使用 yarn，速度快。（也可以使用npm,看個人習慣）

到此爲止，安裝就完成了，可以等待安裝成功。

注：也可以使用vue ui指令進行可視化界面創建項目，與上面的指令式的沒多少差別，只是將我們要做的那些操作變成網頁選項的形式，個人感覺還是挺不錯，推薦使用(裏面加了很多人性化的小功能)

這就是創建好後的項目目錄結構