目錄
2.4 在Visual Studio Code 啓動終端命令面板
3.3 <可選擇>設置 node_global 和 node_cache 目錄
4.1 vue/cli (2.x版本）利用 init 方式創建
4.2 vue/cli (3.x版本）利用 create 方式創建
一、安裝Visual Studio Code
1.1 安裝包下載地址
sfdsf
1.2 設置中文語言包
士大夫
1.3 詳細安裝流程
參考...
二、安裝Node.js
2.1 Node.js 下載地址
https://nodejs.org/dist/v13.5.0/node-v13.5.0-x64.msi
2.2 詳細安裝流程
參考...
2.3 設置相關文件夾
在安裝完的node.js文件夾根目錄創建2個文件夾名稱分別爲 node_global 和 node_cache。
說明：創建的目的是爲了方便集中管理 vue 的相關內容，默認路徑是在“C:\Users\用戶名\AppData\Roaming\npm”，如用默認路徑可以不用參考第三步中的 “輸入如下命令配置文件夾關係”
2.4 在Visual Studio Code 啓動終端命令面板
利用快捷鍵【ctrl + shift + `】或 【終端】菜單-->【新建終端】選項
2.5 查看是否安裝 node.js
查看安裝版本的命令
node -v
2.4 查看 npm 版本
新版的 Node.js 已經自動安裝了 npm，查看版本請用如下命令
npm -v
三、利用 NPM 配置文件夾和安裝Vue.js
3.1 利用 NPM 安裝 Vue.js 腳手架（3.x）
vue/cli (3.x版本）版本輸入如下命令：
npm install -g @vue/cli
3.2 利用 NPM 安裝 Vue.js 腳手架（2.x）
vue/cli (2.x版本）版本輸入如下命令：
npm install -g vue-cli
3.3 <可選擇>設置 node_global 和 node_cache 目錄
輸入如下命令配置文件夾關係
npm config set prefix "node.js的根目錄\node_global"
npm config set cache "node.js的根目錄\node_cache"
四、創建一個 Vue.js 項目
4.1 查看 Vue.js 版本
請使用如下命令：
vue -V
說明：V 是大寫的。
如果出現“'vue' 不是內部或外部命令，也不是可運行的程序或批處理文件”，可能是執行了【3.1 設置 node_global 和 node_cache 目錄】的命令，所以需要增加一條環境變量。
先使用獲取配置文件列表命令查看 prefix 值：
npm config list
將輸出的 prefix 添加到環境變量；
第一步：我的電腦（此電腦）右鍵屬性-->【高級系統設置】如圖（1）
圖（1）
第二步：單擊【環境變量】如圖（2）
圖（2）
第三步：選擇當前用戶的變量區域的“path”這一行，單擊【編輯(E)...】進行修改，添加路徑；如圖（3）
圖（3）
第四步：將路徑添加進去保存即可解決“'vue' 不是內部或外部命令，也不是可運行的程序或批處理文件”的問題。
說明：推薦把系統區域的“path”這一行，單擊【編輯(E)...】進行修改，添加路徑。
4.1 vue/cli (2.x版本）利用 init 方式創建
輸入如下命令：
vue init webpack 項目名（只能小寫字母，不可以用大寫字母）
說明：init 方式用於 cli2.x 版本，與 cli3.x 模板不同，可升級到 cli3.x。
4.2 vue/cli (3.x版本）利用 create 方式創建
輸入如下命令：
vue create 項目名（只能小寫字母，不可以用大寫字母）
特殊說明：如果使用 vue init webpack 項目名的方式請先執行 npm install -g @vue/cli-init
說明：create 方式用於 cli3.x 版本，與 cli2.x 模板不同。
I:\Projects\學習VUE.JS\Visual Studio Code Learning Vue.js>vue -V
@vue/cli 4.1.1
I:\Projects\學習VUE.JS\Visual Studio Code Learning Vue.js>vue create my-first-vue-project
Vue CLI v4.1.1
? Please pick a preset: default (babel, eslint)
Vue CLI v4.1.1
✨ Creating project in I:\Projects\學習VUE.JS\Visual Studio Code Learning Vue.js\my-first-vue-project.
� Initializing git repository...
⚙ Installing CLI plugins. This might take a while...
> [email protected] install I:\Projects\學習VUE.JS\Visual Studio Code Learning Vue.js\my-first-vue-project\node_modules\yorkie
> node bin/install.js
setting up Git hooks
done
> [email protected] postinstall I:\Projects\學習VUE.JS\Visual Studio Code Learning Vue.js\my-first-vue-project\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> [email protected] postinstall I:\Projects\學習VUE.JS\Visual Studio Code Learning Vue.js\my-first-vue-project\node_modules\ejs
> node ./postinstall.js
added 1130 packages from 826 contributors in 31.474s
32 packages are looking for funding
run `npm fund` for details
� Invoking generators...
� Installing additional dependencies...
added 59 packages from 53 contributors in 14.47s
32 packages are looking for funding
run `npm fund` for details
⚓ Running completion hooks...
� Generating README.md...
� Successfully created project my-first-vue-project.
� Get started with the following commands:
$ cd my-first-vue-project
$ npm run serve