最近在開始接觸做vue框架的前端項(xiàng)目，以前用的前端比如html，js，css等都是比較原生的，寫好后直接瀏覽器打開就行。但vue跟java一樣是需要編譯的，和微信小程序類似。今天就先記錄一下vue的開發(fā)運(yùn)行搭建。所需工具如下

nodejs 等同于jdk，使得js可以跨平臺visual Studio Code 類似idel、eclipse等開發(fā)工具（也可以選別的開發(fā)工具）

一、下載安裝node.js

官方下載地址 https://nodejs.cn/download/

選這個(gè)長期支持的版本就好（就像jdk一樣目前主流還是1.7和1.8的版本）， 想下載最新版本也行。 下載后雙擊安裝，一直點(diǎn)擊下一步啥也不用修改勾選完成安裝（默認(rèn)安裝目錄C:\Program Files\nodejs\，不想裝C盤就改成別的目錄）。然后設(shè)置系統(tǒng)環(huán)境變量，雙擊path添加一行如下填上nodejs的安裝目錄（win7是在path的值后追加 ;C:\Program Files\nodejs\）

二、驗(yàn)證安裝成功

輸入如下兩個(gè)命令，顯示版本號說明安裝成功（和驗(yàn)證jdk安裝類似）

node -v
npm -v

三、查看修改模塊下載位置

（非必須可省略，有點(diǎn)類似mevan自定義本地倉庫地址，反正有默認(rèn)的下載存放路徑，想改成別的按如下去改）

npm get prefix  # 查看 全局模塊的存放路徑
npm get cache  # 查看 緩存默認(rèn)存放路徑
npm config set prefix "你的新路徑"  # 修改 全局模塊的存放路徑
npm config set cache "你的新路徑"  # 修改 全局模塊的存放路徑

四、修改鏡像

（非必須但建議，類似修改maven的settings.xml文件里面的倉庫地址）由于npm的服務(wù)器在國外下載速度慢卡，所以大家一般更換為淘寶鏡像https://registry.npm.taobao.org，可以參考下面命令替換鏡像地址即可。

npm config get registry  # 查看當(dāng)前使用的鏡像 默認(rèn)是 https://registry.npmjs.orgnpm config set registry https://registry.npm.taobao.org/  # 更換npm鏡像

這兩個(gè)命令牢記一下，后續(xù)開發(fā)中可能會常用。因?yàn)橛行┕究赡苡凶约旱乃接戌R像地址，不同的項(xiàng)目用的鏡像地址不同，所以會來回切換。切記鏡像不切換，有些依賴包就下載不下來，項(xiàng)目自然也就運(yùn)行報(bào)錯(cuò)，跟java一樣的。

cnpm安裝(淘寶提供的，主要用于下載模塊)

下載依賴包有時(shí)候通過npm命令，部分東西下載不下來但通過cnpm卻可以，所以還是有必要安裝一下，安裝也就簡單就一行命令

npm install -g cnpm --registry=https://registry.npm.taobao.org  # 安裝
cnpm -v  # 檢查是否安裝成功

執(zhí)行效果如下

安裝完成后，會多出如下文件夾。不過不用管，上面查看cnpm版本執(zhí)行成功就ok

五、安裝VSCodeUserSetup-x64-1.73.1.exe

網(wǎng)上搜索visual Studio Code下載程序包后，也一直下一步按完成安裝即可。安裝后是英文版的，首次打開的時(shí)候右下角會有個(gè)彈窗提示安裝漢化包直接點(diǎn)擊，安裝后重啟vscode。如果沒彈窗，點(diǎn)擊左測第四個(gè)菜單“拓展”（相當(dāng)于idel的plus，裝插件的地方），輸入language 選擇chinese進(jìn)行安裝。

切換語言 快捷鍵Ctrl+Shift+P會彈出命令窗口，輸入“configure language”回車，選擇需要切換的語言

六、運(yùn)行項(xiàng)目

1 導(dǎo)入項(xiàng)目

先從git/svn拉下代碼到本地，點(diǎn)擊菜單欄 file–> 打開文件夾，選擇到你代碼存放的那個(gè)文件夾， 這樣就把項(xiàng)目導(dǎo)入了。先介紹一下的布局和常用按鈕菜單（和idel的使用差不多）

“控制臺”和“終端”的喚起

方法1 ： 點(diǎn)擊菜單欄的查看，再點(diǎn)擊“控制臺”或“終端”即可。

方法2 ： 快捷鍵是ctrl + shit + Y， 更多功能的快捷鍵,可以點(diǎn)擊 幫助 --> “鍵盤快捷方式參考” 會跳轉(zhuǎn)瀏覽器展示一個(gè)pdf給你. 點(diǎn)擊查看

如果沒有 控制臺 終端 等菜單，右鍵給對應(yīng)的打勾就顯示了

2 下載依賴

點(diǎn)擊終端 輸入命令 npm install 或者 npm i (npm 也可以替換為cnpm)

下載完成后， 你的項(xiàng)目下會多出一個(gè)node_modules的文件， 這就是執(zhí)行后下載下來的依賴包了。相當(dāng)于maven的本地倉庫一樣，只不過maven是所有項(xiàng)目公用，它卻是項(xiàng)目獨(dú)享。如果有部分沒下載成功，可以嘗試刪除這個(gè)文件夾重新執(zhí)行命令進(jìn)行重新下載

3 運(yùn)行項(xiàng)目

在項(xiàng)目的跟目錄下面找到package.json 這個(gè)文件，scripts參數(shù)后面的值，就是可以運(yùn)行的服務(wù)名稱。ctrl+shfit+喚起 終端 ，輸入命令 npm run 項(xiàng)目服務(wù)名稱

執(zhí)行命令 npm run server

復(fù)制上面local的url 地址到瀏覽器打開，即可看到vue項(xiàng)目的首頁，項(xiàng)目啟動(dòng)成功。如果需要打包項(xiàng)目，執(zhí)行命令 npm run build 。

項(xiàng)目的代碼結(jié)構(gòu)介紹和常用功能，可以參考我另外一篇

到此這篇關(guān)于vue項(xiàng)目開發(fā)環(huán)境工具-node的文章就介紹到這了,更多相關(guān)vue開發(fā)環(huán)境工具node內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論