使用vue-cli3/4 搭建vue項目
一、安裝vue-cli3/4
- 查看版本號:命令行中輸入
vue -V
查看一下vue-cli的版本,如果之前安裝過2XX 版本的vue-cli,卸載後安裝新的 - 卸載舊版本:
npm uninstall vue-cli -g
- 安裝最新版本:
npm install -g @vue/cli
- 安裝指定版本:
npm install -g @vue/[email protected]
,比如安裝3.11.0版本的,需要@後接版本號
二、創建一個vue項目
- 創建位置:我想將整個前端的項目放在E盤的code文件夾中,則打開code文件夾,在文件路徑的位置輸入cmd,則可以在當前路徑下打開命令行。
- 創建項目:命令行輸入
vue create vue-demo
三、預設選項
- 創建成功之後會彈出一個預設選項,第一個是默認設置,第二個是手動選擇設置,選中第二個後回車。
- vue-cli提供了一些快速安裝的選項,按上下箭頭移動,按空格選擇,需要的都選擇了之後,按Enter。
我選擇了以下的安裝(並不是一定按照我的選,選自己項目用的就可以了)。
- Babe:一個js編譯器,主要是將es6的代碼轉換爲向後兼容的js語法,以便讓js更好的運行在舊版本的瀏覽器或環境中。babel官網,學習更多>
- TypeScript:可以理解爲一個嚴格版的JS。TypeScript官網,學習更多>
- Router:vue的路由管理器。vue-router官網,學習更多>
- Vuex:一個專爲vue開發的狀態管理模式,用於集中存儲組件的狀態。vuex官網,學習更多>
- CSS pre-processor:css預處理語言,css本身是寫樣式的,css預處理語言也是用於編輯樣式,最後編譯成css文件,css預處理語言擴展了css,增加了變量、函數等功能,讓css更簡潔,可讀性更強,更容易維護,css預處理語言有很多,less、scss等。
- Unit Testing:單元測試,對最小可測試的單元進行的檢查和驗證。Unit Testing官網,學習更多>
- E2E Testing:端對端測試,通過編寫測試用例,自動化模擬用戶操作,對功能、流程進行檢查和驗證。
- 預設選項選擇之後,會根據預設安裝的選項,選擇更具體的設置
我的選擇如下(並不是一定按照我的選)
- Use class-style component syntax:是否使用Class風格的語法(es6的Class)。阮一峯es6的Class講解,學習更多>
- Use history mode for router?:是否用history模式的路由(路由的hash模式和history模式)
- Pick a CSS pre-processor?:是否選一個CSS預處理語言?(我選了less)
- Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?:你將Babel、PostCSS、ESLint等配置放在哪?
- Save this as a preset for future projects?:上面選中的配置是不是要保存起來,作爲你將來項目的預設?
四、啓動項目
使用vue-cli成功創建了項目之後,首先需要cd到當前項目中,如果此時項目中沒有node-modules文件夾,可以先執行npm install,然後運行項目。
- cd到當前項目中
cd vue-demo
- 下載依賴包:
npm install
- 運行項目:
npm run serve
五、可視化UI
目前項目就可以正常啓動了,但是一個項目根據需求可能還需要安裝其他的依賴包,比如需要element UI、axios,寫tsx的還要安裝vue-tsx.support等,項目的依賴可以在package.json中查看,當然vue還提供了更直觀的插件 vue ui
。
- 命令行中輸入
vue -V
,查看已經安裝了vue-cli,如果有版本號,則安裝成功。 - 輸入
vue ui
,此時會在瀏覽器中新打開一個頁面Vue項目管理器。
- 點擊導入,導入已經創建的項目文件夾,導入成功後,可以直觀的看到這個項目的依賴、插件和配置等。