Vue cnpm vue - cli4.1.1 項目初始化 （詳細 流程）

1.node npm環境初始化

1.1 下載

官網下載 node Js

1.2 安裝

解壓node js 安裝包

配置 nodejs主目錄到path

PATH
//配置 vue 指令
F:\Web developer tool\node_js\node-v12.13.0-win-x64\node_global
PATH
//配置node 指令
F:\Web developer tool\node_js\node-v12.13.0-win-x64
PATH
F:\Web developer tool\node_js\node-v12.13.0-win-x64\node_modules
cmd npm -v 輸出 npm版本

cmd 設置 node緩存目錄 啓用 npm

node 主目錄 打開 cmd
npm config set prefix “\node_global”
npm config set cache “\node_cache”

測試npm，安裝個express：

npm install express -g
安裝完畢後，就可以在F:\Web developer tool\node_js\node-v12.13.0-win-x64\node_global\node_modules路徑下看到express文件夾。

2.安裝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v 查看版本

3.vue-cli4.1.1 腳手架工具安裝

vue cli 4.1.1安裝

cnpm install -g @vue/cli
輸入 vue -V 查看版本

 F:\Web developer tool\node_js\node-v12.13.0-win-x64>"node"  "F:\Web developer tool\node_js\node-v12.13.0-win-x64\node_global\\node_modules\@vue\cli\bin\vue.js" -V
@vue/cli 4.1.1

4.vue-cli4.1.1 構建項目

找到項目文件路徑
vue create vue-test //vue-test是項目名稱 採用駝峯命名不能包含大寫字母
選擇 Manually select features手動配置
空格鍵選擇需要組件

創建完 進入項目目錄 執行 cnpm run server

F:\Projects\Web storm Projects\vue-test>cnpm run serve
> wlnews@0.1.0 serve F:\Projects\Web storm Projects\wlnews
> vue-cli-service serve
 INFO  Starting development server...
  App running at:

- Local: http://localhost:8080/
- Network: http://192.168.0.104:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.

還可以通過 vue ui 管理項目

vue ui 運行啓動 管理頁面

5. 使用webstorm創建配置Vue運行環境

點擊右上角 運行

運行成功