Vue 環境搭建（win10）

1.安裝node

node官網安裝地址 推薦安裝穩定版本（LTS）以及安裝路徑爲系統盤（C）

查看node安裝成功否

註釋：如下命令使用 命令提示符（管理員）權限,win10 對user權限的限制了訪問權限。 node -v 查看node版本 npm -v 查看npm版本 where node 查看node安裝位置

注意:node 版本號大於npm版本號，基於以前安裝版本太低，後面會報錯。

安裝路徑非系統盤（例D盤），出現用戶目錄丟失問題解決

上圖標註的文件目錄可能丟失，解決辦法： 主動建立目錄,更新npm配置爲新建目錄路徑，例 D:\nodejs npm config set prefix "D:\nodejs\node_global" npm config set cache "D:\nodejs\node_cache"

npm 運行慢，配置國內淘寶鏡像包

npm config set registry https://registry.npm.taobao.org
後續包安裝命令 npm 便可改成 cnpm

2.配置node環境變量

個人電腦(屬性)->高級系統設置->環境變量編輯-保存

編輯path環境變量，新增node安裝路徑

增長環境變量NODE_PATH 配置的內容爲node_modules 路徑

已經搭建好框架的項目直接跳轉 步驟6 進行項目啓動便可

3.安裝VUE

npm install vue -g
-g是指安裝到node_global全局目錄去

4.安裝Vue-cli

運行 npm install vue-cli -g
安裝vue腳手架

5.webpack構建項目

命令行進入構建項目的路徑 例：cd D:\vue-project 構建vue項目名 vue01
運行 vue init webpack vue01 構建項目並配置相關項

項目構建成功

6.項目啓動

運行 npm install 下載項目依賴包 運行 npm run dev 本地啓動

運行成功，在瀏覽器驗證

瀏覽器驗證成功，就此基本VUE目錄框架搭建完成，開始模塊開發了~~

7.靈活改變運行默認端口8080，避免端口衝突

8.項目打包

運行 npm run build 進行線上打包 打包項目代碼,通常默認從src目錄代碼壓縮混淆到dist目錄下。