vue依賴Node JS,需要安裝Node JS。
一、安裝Node js
從https://nodejs.org/zh-cn/,下載Node js.
推薦使用管理員權限安裝Node js,否則有可能會出現權限問題。在開始中找到或搜索命令提示符,右鍵以管理員身份運行:
為方便操作,把安裝文件放在了D盤目錄下,輸入如下命令,一路安裝即可:
二、新建Vue項目
打開VS2019,篩選vue項目,可以選擇javascript或者typeScript
三、確認VS2019已安裝node js
在VS中打開工具->獲取工具和功能
Node.js開發
四、補全缺失的組件
在我的項目,右鍵,點擊:在終端中打開,在powerShell中輸入:npm install -g
或者:
如圖中點擊安裝npm包
五、運行項目:
在powerShell中輸入:npm run serve
瀏覽器打開http://localhost:8080/,可預覽網頁
修改.vue文件,頁面會自動刷新更新。
總結一下目前所用命令如下:
在項目右鍵,在終端中打開powerShell
補全缺失的組件
npm install -g
運行開發環境調試指令,修改頁面后自動刷新網頁
npm run serve
在搭建Vue開發環境時,通常需要遵循一系列步驟來確保環境配置正確且高效。以下是一個詳細的步驟指南,用于在Windows系統上搭建Vue開發環境:
一、安裝Node.js
1. 下載Node.js:
訪問Node.js官網(https://nodejs.org/zh-cn/)下載適合您操作系統的Node.js安裝包。
2. 安裝Node.js:
雙擊下載的安裝包,按照提示完成安裝。
3. 驗證安裝:
打開命令提示符(CMD)或PowerShell,輸入node -v和npm -v來檢查Node.js和npm的版本。如果返回了版本號,則說明安裝成功。
二、配置npm鏡像源(可選)
為了提高npm包的下載速度,可以配置國內的鏡像源,如淘寶鏡像。
1. 設置淘寶鏡像:
在命令提示符或PowerShell中輸入npm config set registry https://registry.npm.taobao.org。
2. 安裝cnpm(可選):
淘寶提供了一個npm的鏡像版本cnpm,可以通過npm install -g cnpm --registry=https://registry.npm.taobao.org來安裝。
三、安裝Vue CLI
Vue CLI是一個用于快速搭建Vue項目的腳手架工具。
1. 全局安裝Vue CLI:
在命令提示符或PowerShell中輸入npm install -g @vue/cli或cnpm install -g @vue/cli(如果使用cnpm)。
2. 驗證安裝:
輸入vue --version或vue -V來檢查Vue CLI的版本。
四、創建Vue項目
1. 使用Vue CLI創建項目:
在命令提示符或PowerShell中進入您想要創建項目的目錄,然后輸入vue create <項目名>來創建一個新的Vue項目。
這里直接選擇的默認的Vue3,直接按回車鍵進入下一個環節
2. 選擇配置:
在創建項目的過程中,Vue CLI會提示您選擇一系列的配置選項,如Babel、ESLint等。根據您的需求進行選擇。
3. 運行項目:
先進入項目目錄,如上命令為 cd netvuetng
再輸入npm run serve或cnpm run serve(如果使用cnpm)來啟動開發服務器。
4. 訪問項目:
在瀏覽器中打開Vue CLI提供的開發服務器地址(通常為http://localhost:8080),即可看到您的Vue項目。
五、環境變量配置(可選)
如果您想要自定義npm的全局安裝路徑和緩存路徑,可以配置環境變量。這通常不是必須的,但如果您想要更好地管理npm的全局模塊和緩存,可以考慮進行配置。
1. 創建全局安裝和緩存目錄:
在Node.js的安裝目錄下創建node_global和node_cache兩個文件夾。
2. 配置環境變量:
配置NODE_PATH環境變量,將其值設置為node_global\node_modules的路徑。
將node_global的路徑添加到系統的Path環境變量中。
六、使用IDE或編輯器
最后,您可以選擇一個合適的IDE(如Visual Studio Code、WebStorm等)或文本編輯器(如Sublime Text、Atom等)來編寫和調試您的Vue代碼。這些IDE和編輯器通常都提供了豐富的插件和工具來支持Vue開發。