一、安裝node.js并配置環境變量
1、安裝node.js
從Node.js官網下載安裝包并安裝。然后在安裝后的目錄(如果是下載的壓縮文件,則是解壓縮的目錄)下新建node_global和node_cache這兩個文件夾。
node_global:npm全局安裝位置
node_cache:npm緩存路徑
2、配置環境變量
- 在系統變量里添加一個變量NODE_HOME,值為node.js的安裝路徑如:D:\Program Files\nodejs
- 在Path中添加兩個變量:
%NODE_HOME%
%NODE_HOME%\node_global
- 環境變量配置好后,打開cmd,輸入node -v和npm -v,若顯示出版本號,說明安裝配置成功。
node -v
npm -v
3、配置npm全局模塊路徑和cache默認安裝位置
在此步驟中所有npm命令最好以管理員身份運行的cmd中執行并且都要切換到node.js的安裝目錄下執行,不然可能導致無法識別。
說明:這一步是將前面安裝之后新建的兩個文件夾node_global(npm全局安裝位置)和node_cache(npm緩存路徑)與npm聯系起來
打開cmd,將執行目錄切換到node.js的安裝目錄,分別執行以下命令,
npm config set prefix “D:\Program Files\nodejs\node_global”
npm config set cache “D:\Program Files\nodejs\node_cache”
注意,路徑用的引號是英文狀態下的雙引號,不是單引號,也不是中文的雙引號。
4、修改npm鏡像并安裝cnpm
使用npm的官網鏡像下載依賴包速度太慢,為了提高速度,這里我們使用npmmirror鏡像,同樣是在cmd中,將執行目錄切換到node.js的安裝目錄,執行以下命令
npm install -g cnpm --registry=https://registry.npmmirror.com
5、安裝vue-cli腳手架
以上都設置好后,重新打開cmd,執行以下命令,然后等待安裝完成就行。
npm install -g @vue/cli
只要執行結果中沒有出現 ERR! 都算執行成功了
二、啟動Vue項目
說明:能正常運行的Vue項目的目錄里都有一個名為node_modules的文件夾,里面存放了運行這個vue項目需要的所有依賴包,一般來講,從網上直接clone來的別人的項目目錄里是不會包含node_modules文件夾的,因為占得內存太大。所以要想運行別人的項目,必須先重新給它下載依賴包。
- 在Vue項目目錄下打開cmd,執行cnpm install命令,等待npm安裝完成(因為前面已經設置好了cnpm,所以這里可以直接用cnpm替換npm進行安裝)
cnpm install
npm安裝完成后,項目目錄下就會出現node_modules文件夾了
- 然后執行cnpm run dev,運行vue項目
cnpm run dev
出現以上就代表項目成功運行,在瀏覽器中輸入http://localhost:8088即可看到項目主界面(本項目因為端口號是8088,因此此端口為8088,這里的端口按項目實際端口號而定)。
注意:在執行命令時可能存在以下報錯問題,可通過以下鏈接解決
創建vue項目時, 無法加載文件 D:\Program Files\nodejs\node_global\cnpm.ps1,因為在此系統上禁止運行腳本,解決方法。