1. vue腳手架介紹

1.1. vue腳手架用于快速創建Vue項目的基礎架構。

2. 安裝Vue腳手架

2.1. 使用命令: npm install -g @vue/cli, 安裝Vue腳手架。

2.2. 安裝完成, 查看C:\Users\用戶名\AppData\Roaming\npm目錄?

2.3. 使用命令: vue -V, 查看腳手架版本, 報錯: \npm\vue.ps1, 因為在此系統上禁止運行腳本。?

2.4. 以管理員身份運行PowerShell?

2.5. 執行: set-ExecutionPolicy RemoteSigned(簽名或運行這些腳本)?

2.6. 使用命令: vue -V, 查看腳手架版本。?

3. 基于交互式命令行的方式創建vue項目

3.1.?使用命令: vue create my-vue-project創建vue項目

?

3.2.?通過上下箭頭鍵可以切換選項, 切換到手動選擇Vue版本和模塊, 按回車鍵切換下一步?

3.3.?使用空格鍵可以選擇我們需要的模塊, 小括號有*的就是我們選擇的模塊, 按回車鍵切換下一步?

3.4.?選擇3.x的版本?

3.5.?不使用歷史模式的router, 我們使用hash模式的router?

3.6.?使用標準版本的ESLint?

3.7.?進行ESLint語法校驗的時機?

3.8.?使用不同的配置文件, 配置模塊?

3.9.?是否保存本次選項作為未來創建工程的一個模板, 我們選擇否?

3.10.?創建完成?

3.11.?進入項目目錄, 使用命令npm run serve運行項目?

3.12.?運行成功?

3.13.?在瀏覽器訪問http://localhost:8080/?

4. 基于圖形化界面的方式創建vue項目

4.1.?使用命令vue ui, 打開圖形化界面

?

4.2.?在瀏覽器中創建項目?

4.3.?點擊創建按鈕, 選擇創建項目的路徑, 然后點擊在此創建新項目

4.4.?起一個項目名稱, 包管理器使用默認的即可, 我們不使用git, 點擊下一步按鈕?

4.5.?選擇手動配置項目, 點擊下一步按鈕?

4.6.?選擇如下功能, 點擊下一步按鈕?

4.7.?選擇如下配置, 點擊創建項目按鈕

4.8.?保存一個預設, 下一次創建項目就會直接選擇我們之前的選項, 點擊保存預設并創建項目按鈕?

4.9.?創建完成?

4.10.?點擊任務——>serve——>運行, 啟動項目?

4.11.?啟動成功, 點擊啟動app按鈕?

4.12.?訪問項目?

4.13.?創建完成的項目目錄分析

4.14.?項目文件詳細分析?

5.?通過vue.config.js文件, 配置項目

5.1.?在項目根目錄下創建vue.config.js

?

5.2.?在vue.config.js文件中, 配置自動打開瀏覽器和端口號?

?

5.3.?在終端中運行: npm run serve命令

5.4.?自動打開瀏覽器訪問?

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的035_vue脚手架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。