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目錄下。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM