---

天行健，君子以自強不息；地勢坤，君子以厚德載物。

---

每個人都有惰性，但不斷學習是好好生活的根本，共勉！

---

文章均為學習整理筆記，分享記錄為主，如有錯誤請指正，共同學習進步。

---

蜀國曾聞子規鳥，宣城還見杜鵑花。
一叫一回腸一斷，三春三月憶三巴。
——《宣城見杜鵑花》

---

---

Node.js的下載、安裝和配置
node的下載、安裝、配置和使用（node.js下載安裝和配置、npm命令匯總、cnpm的使用）
Vue3入門之創建vue3的單頁應用(vite+vue)
Vue入門第一篇（環境配置、腳手架安裝、項目創建、項目運行訪問、項目結構詳解等）
Vue入門第二篇（基本語法、實例演示）
Vue專欄

---

使用Vue CLI構建Vue3項目

vue-cli（?Vue CLI）?是一個基于Vue.js進行快速開發的完整系統，?包括項目腳手架、?開發服務器、?構建工具等。?當你安裝vue-cli后，?它已經包含了Vue.js的運行時環境，?因此不需要再單獨安裝Vue。?vue-cli提供了命令行工具來快速創建和管理Vue項目，?包括項目的初始化、?開發服務器的啟動、?構建和部署等

1. Vue3腳手架的安裝

關于vue cli的安裝需要在管理員權限下進行（以管理員身份運行cmd窗口）

vue-cli 3.x的安裝

1.1 默認安裝

安裝vue-cli 3.x版本的命令，不指定版本會安裝最新版本，如果安裝報錯，可參考2.1.5嘗試解決

npm i -g @vue/cli

i ：install的縮寫
-g ：global的縮寫

安裝完成后如下

1.2 指定版本安裝

指定版本安裝的命令（當前最新穩定版本為3.4.31）

npm install -g @vue/cli@3.4.31

1.3 查看版本

安裝后使用以下命令查看版本，如果命令提示'vue'不是內部或外部命令則根據2.1.4進行環境變量配置，配置后再進行版本查看

vue --version

或

vue -V

1.4 配置vue cli的環境變量

Vue CLI默認的安裝位置是全局node_modules，如果你沒有配置過，則就是該目錄加入到path環境變量

1.4.1 查看模塊存儲的全局目錄

當然，如果你不知道有沒有配置過，可以使用命令獲取你當前的全局模塊存儲路徑，將這個路徑加入Path環境變量即可
查看當前的全局模塊存儲目錄的命令如下

npm config get prefix

我之前配置過全局緩存和模塊存儲位置（使用npm config set prefix命令），則安裝的位置就是我修改過的目錄了

1.4.2 查看安裝的Vue CLI

找到目錄，之前安裝的Vue CLI就在這個目錄下（D:\JavaSoftWares\Node\node_global）
其中vue.cmd文件就是執行vue命令的腳本文件，將該文件所在位置的目錄配置到path路徑下，即可全局操作vue命令

1.4.3 配置環境變量

可以快捷方式找到高級系統設置：win+x然后點系統
也可按照如下操作一步一步找到高級系統設置

搜索控制面板–>打開系統安全–>選系統–>點擊高級系統設置–>環境變量–>系統變量–>Path–>編輯–>新建
然后將vue.cmd所在的目錄，也就是我們剛剛使用npm config get prefix命令查看到的目錄放進去

然后一路確定下去即可完成環境變量的配置
現在再重新打開任意位置的cmd窗口，輸入vue -V命令查看即可

1.5 安裝遇到的問題

如報錯如下，則表示未使用管理員權限執行命令，無權限創建相關文件

解決方法
使用管理員身份運行cmd窗口并執行安裝命令，如下

然后再執行一遍安裝命令即可安裝成功

2. Vue3項目構建

使用Vue CLI 3.x構建項目

創建時，命令執行的位置最好cd到C盤以外的某個位置，執行命令的位置就是項目創建的位置

2.1 創建項目文件夾

以管理身份打開命令符窗口，否則可能還會遇到2.1.5那個無權限問題
先在C盤以外的盤，如F盤，創建一個文件夾用于存放項目
我這里先在F盤創建一個Projects目錄
全路徑為F:\STUDY\Front\Vue\Vue3\Vue3-CLI\Projects

2.2 切換路徑到指定位置

使用管理員身份打開cmd窗口，cd到剛剛創建的目錄位置

cd F:\STUDY\Front\Vue\Vue3\Vue3-CLI\Projects

這里因為是從C盤切換到F盤的位置，所以直接cd加路徑并未切換成功，此時再輸入盤符加冒號回車即可成功，如下

f:

2.3 創建項目

執行創建命令，項目命令自定義，建議全小寫，我這里項目名稱定義為vue3-demo-cli-01

vue create vue3-demo-cli-01

這里先預覽一下整體的配置，心里有個底，后面會有每一步具體的操作演示，如下圖

以上的配置按順序從上到下依次是：

• 選擇預設配置，這里選的手動配置Manually select features
• 為項目確認所選模塊，這里選了三個Babel、Router、Linter，其含義分別是JS轉義工具、vue路由、代碼規范工具
• 選擇vue的版本，這里選擇3的版本
• 是否為路由使用歷史模式，這里選擇是
• 為代碼規范工具選擇配置，這里選擇標準配置
• 代碼規范的額外配置，選擇何時開啟代碼規范的檢測，選擇保存后開啟
• 對于Babel、ESLint等的配置存放到哪里，這里選擇存放到專有配置文件下
• 是否保存以上設置以便于后續創建項目使用，這里選擇是
• 保存設置的名稱為，這里起個名，自定義即可，我這里取名為vue3-b-r-l

2.4 項目預設

執行命令后如下，可以選擇默認的Vue3或Vue2，也可以選擇手動配置
這里我們手動選擇，使用上下鍵選擇Manually select features

2.5 項目模塊

選擇模塊，使用上下鍵調整位置，然后空格勾選，a全選，i取消選項，回車完成進入下一步
這里我們除了默認勾選的兩個之外再選一個Router即可，回車進入下一步

關于選項的解釋如下：
Babel是一個JS的轉義工具
TypeScript 是否需要TS
Progressive Web App (PWA) Support 漸進式Web應用
Router Vue路由
Vuex Vue狀態管理器
CSS Pre-processors 是CSS的預處理器，如sass less
Linter/Formatter 是保障代碼規范的工具，如ESLint
Unit Testing 單元測試
E2E Testing E2E測試

2.6 Vue版本

這里選擇Vue的版本，選擇3.x的版本，回車

2.7 路由模式

下面是路由模式的選擇，使用history模式，還有一種是hash模式，輸入Y回車

2.8 代碼規范配置

接下來選擇代碼格式配置，選擇標準配置

2.9 代碼規范檢測時機

什么時候進行代碼規則檢測，選擇保存時進行代碼檢測

2.10 模塊配置存放位置

關于Babel、ESLint等的配置存放位置，選擇存放在專用的配置文件中

2.11 項目配置是否保存

是否保存配置，保存后下次構建項目可以直接使用這次的配置

2.12 項目配置保存文件命令

保存預設配置為vue3-b-r-l

保存后下次再次創建項目時就會出現vue3-b-r-l這個選項，可直接使用該配置而無需再一一選擇，如下

2.13 項目構建完成

項目創建完成后界面如下

2.14 啟動項目

根據藍色提示命令啟動項目

cd vue3-demo-cli-01

npm run serve

如下，即為啟動成功，可通過Local和Network兩個地址進行訪問

2.15 訪問項目

本地訪問地址
http://localhost:8080/

服務器訪問地址
http://192.168.8.171:8080/

2.16 構建生產環境所用項目

在最后一行提示信息中還有一個命令，可以構建項目用于生產環境應用的文件
項目發布到生產環境前，構建版本，執行以下命令會生成一個./dist文件夾

npm run build

2.17 停止項目

如何停止項目，使用命令Ctr+c，然后選擇Y即可停止項目

2.18 VsCode運行項目

使用VsCode打開項目，項目結構如下

可在Vscode中的控制臺執行命令運行項目，與上面的命令一樣，這里不做演示

---

感謝閱讀，祝君暴富！

---