使用vue cli4.x搭建vue專案的過程詳解
cli-4.x已經發布好久了，斟酌了好久，還是決定將原來的cli-2.x升級到4.x,詳細的升級過程可以戳這裡
1、建立專案 vue create vuetest
2、選擇配置方式
? Please pick a preset: (Use arrow keys) ☜(使用箭頭鍵) > default (babel,eslint) ☜(使用預設的配置，會安裝babel和eslint) Manually select features ☜(手動配置)
這裡我選擇的是手動配置（使用↑ ↓箭頭切換，Enter確認，箭頭切換失效可以戳這裡），當然如果你之前有儲存過配置模板的話，在這裡還會有第三個選項就是你之前儲存過的（下面會說到），因為想想配置的不是很多，所以習慣了每次都是手動配置
3、手動配置項選擇
通過↑ ↓ 箭頭選擇你要配置的項，按 空格 是選中，按 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,<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 啟動就可以了...
ps：下面看下vue-cli2.9.6升級vue-cli4.x相關問題
最近公司想要進行技術升級，因為疫情的原因，我在家關了兩個多月（嗚嗚~），來公司他們都已經工作有一段時間，於是我只能自己搞了，先看一下我的環境
他們說新專案要求使用cli4.x,於是網上找了步驟執行（建議看完再實際操作）
1、首先解除安裝
npm uninstall -g @vue-cli
執行了之後使用 vue -V,發現版本仍然是2.9.6，感覺沒解除安裝掉呀，不管，繼續按照網上的教程安裝
2、安裝
npm install -g @vue-cli
執行完成之後發現檢視版本出來的仍然是2.9.6，很煩，然後就去網上找了一大堆，發現發現都是互相copy的部落格，怎麼辦了，環境還是要繼續升級的呀，然後我就只能採用最原始的辦法 刪檔案
1、命令列執行 where vue
找到vue-cli資料夾，（不相信的話先備份一下）然後刪除
2、執行 vue -V 這個時候應該是看不到版本號了吧（看得到那就說明你刪錯地方了，不能怪我）
3、重新安裝
npm install -g @vue-cli
4、看一下版本號
總結
到此這篇關於使用vue cli4.x搭建vue專案的過程詳解的文章就介紹到這了,更多相關cli4.x搭建vue專案內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！