六月份在上一家公司提出離職赤嚼，本意想著學(xué)習(xí)半年去考研静檬，由于手續(xù)流程辦理的繁瑣復(fù)雜，離職路上格外煎熬，被真香打臉咐熙，無奈偏偏為五斗米折了腰，考研的事推到明年吧毡琉，離職證明剛下來蕾久，去了新的公司工作，接觸新的項(xiàng)目歌豺，需要學(xué)習(xí)vue及springoot相關(guān)知識(shí)⊥魄睿現(xiàn)使用webpack搭建vue空白項(xiàng)目，并使用vscode終端運(yùn)行vue項(xiàng)目类咧。
創(chuàng)建一個(gè)vue項(xiàng)目
配置相關(guān)開發(fā)環(huán)境
安裝node.js_官方網(wǎng)站下載：https://nodejs.org/en/
具體安裝步驟：
選擇符合操作系統(tǒng)的安裝包馒铃，下載完成并傻瓜式安裝(一直下一步)蟹腾，注意修改安裝路徑，直到finish結(jié)束区宇。
win+R輸入cmd娃殖，分別輸入命令:node -v和npm -v回車查看版本號(hào)，判斷是否安裝成功议谷。
因?yàn)槟J(rèn)此后的安裝路徑默認(rèn)在c盤占用內(nèi)存炉爆，此時(shí)需要配置npm安裝全局模塊時(shí)的路徑和緩存cache的路徑：
在你的node.js安裝目錄下新建兩個(gè)文件夾 node_global和node_cache，然后在cmd下執(zhí)行：
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
注意：“D:\Program Files\nodejs\”此處為你的安裝路徑卧晓。
隨后打開環(huán)境變量芬首，在系統(tǒng)變量中添加NODE_PATH，路徑為“D:\nodejs\node_global”自己的node_global路徑逼裆；并在path后添加“;D:\nodejs\“自己的nodejs安裝路徑郁稍，保存。
更改注冊表:在cmd中輸入npm config set registry https://registry.npm.taobao.org胜宇。執(zhí)行此命令后耀怜，每次執(zhí)行npm install，都會(huì)默認(rèn)從淘寶鏡像搜索并下載包桐愉。
安裝vue财破，打開cmd命令，執(zhí)行npm install --global vue-cli 全局安裝仅财，安裝完成后在global目錄輸入cmd 再輸入vue -V狈究，出現(xiàn)Vue版本號(hào)，（若未設(shè)置全局變量盏求，在全局變量中的path加上你vue.cmd的路徑再次嘗試）驗(yàn)證Vue 安裝成功抖锥。
創(chuàng)建基于webpack模板的新項(xiàng)目
在自定位置新建文件夾。
cmd命令打開文件夾【d:~cd 文件夾名~...】
cmd命令上輸入vue init webpack project01 【project01 為項(xiàng)目名】
待執(zhí)行完畢碎罚，填寫基礎(chǔ)信息（內(nèi)容如下）
其中should we run npm install.... (這句話是在問是否在工程創(chuàng)建后就去跑 npm 安裝依賴 這里面有幾個(gè)選項(xiàng) 本人選最后一個(gè) 稍后自己安裝依賴)繼續(xù)等待下載完畢磅废。
待執(zhí)行完畢cmd命令在項(xiàng)目文件目錄中執(zhí)行：cnpm install --by=npm 命令安裝依賴，依賴安裝完成目錄中會(huì)出現(xiàn)node_modules文件夾（安裝依賴的位置）
隨后進(jìn)入文件夾 執(zhí)行運(yùn)行命令 npm run dev 運(yùn)行荆烈。
使用VsCode運(yùn)行Vue項(xiàng)目
下載vscode并配置語言
下載并安裝vscode軟件拯勉，運(yùn)行vscode程序，按Ctrl + Shift + P打開命令板(失效多半是因?yàn)樗压贩斌w切換快捷鍵沖突憔购，關(guān)閉此快捷鍵ok宫峦，若還是失效就按ctrl+p,然后輸入>)，然后開始鍵入“display”以過濾并顯示Configure Display Language命令
選擇Configure Display Language玫鸟，按Enter鍵导绷，會(huì)打開locale.json文件，其默認(rèn)值位當(dāng)前使用的語言屎飘，為“en”妥曲。將“en”改為“zh-CN”贾费，然后ctrl +S 保存locale.json并重新啟動(dòng)VS Code以使用新的顯示語言。
點(diǎn)擊擴(kuò)展視圖檐盟，搜索語言包 category:"Language Packs"褂萧。選擇中文（簡體），點(diǎn)擊Install葵萎，然后重啟
配置vscode環(huán)境并導(dǎo)入項(xiàng)目運(yùn)行
點(diǎn)擊Ctrl + Shit + X打開插件擴(kuò)展窗口导犹，同上，下載vetur（高亮顯示）插件并安裝羡忘，下載eslint（錯(cuò)誤檢測）插件并安裝（若出現(xiàn)卡住時(shí)可重啟锡足，換個(gè)網(wǎng)號(hào)的地方安裝）
隨后直接文件->打開文件夾 導(dǎo)入項(xiàng)目，Ctrl+shift+Y打開控制臺(tái)壳坪，在控制臺(tái)選擇終端，輸入npm install添加包依賴 掰烟，若添加時(shí)間過長可重新執(zhí)行cnpm install --by=npm 命令安裝依賴爽蝴。
若安裝過程報(bào)錯(cuò)，再執(zhí)行'npm cache clean --force'清緩存再安裝纫骑，反復(fù)幾次后蝎亚，安裝成功。
最后執(zhí)行運(yùn)行命令 npm run dev 運(yùn)行先馆。
（本人添加依賴時(shí)出現(xiàn)各種不同錯(cuò)誤发框，發(fā)現(xiàn)可能是webpack版本過新導(dǎo)致的問題，把webpack版本更替成低版本后程序運(yùn)行成功）
高版本webpack更換為低版本
在全局下安裝：npm install webpack -g
先執(zhí)行在全局下刪除 ：cmd命令 npm uninstall webpack -g
將項(xiàng)目目錄下的node-modules一起刪除煤墙，有些殘留文件影響結(jié)果梅惯。
隨后安裝指定版本：npm install webpack@<版本號(hào)> -g ,例：npm install webpack@3.4.1 -g
查看webpack 版本信息
npm info webpack
如果要使用webpack開發(fā)工具，要單獨(dú)安裝 webpack-dev-server
npm install webpack-dev-server --save-dev
注：
--save：將保存配置信息到pacjage.json的dependencies節(jié)點(diǎn)中仿野。
--save-dev：將保存配置信息到pacjage.json的devDependencies節(jié)點(diǎn)中铣减。
dependencies：運(yùn)行時(shí)的依賴，發(fā)布后脚作，即生產(chǎn)環(huán)境下還需要用的模塊
devDependencies：開發(fā)時(shí)的依賴葫哗。里面的模塊是開發(fā)時(shí)用的，發(fā)布時(shí)用不到它球涛。
2019.7.19
