環(huán)境搭建
安裝工具
下載安裝VS code編輯器想幻,作為主要開發(fā)工具
https://aka.ms/win32-x64-user-stable
下載node.js呀舔,很多工具和命令的基礎(chǔ)環(huán)境(包括了npm)
https://nodejs.org/dist/v10.15.3/node-v10.15.3-x64.msi
下載git弥虐,代碼上傳、下載媚赖、版本控制工具神器
https://github.com/git-for-windows/git/releases/download/v2.21.0.windows.1/Git-2.21.0-64-bit.exe
下載谷歌chrome瀏覽器霜瘪,必備的瀏覽和調(diào)試工具
https://www.google.cn/intl/zh-CN/chrome/
安裝vue腳手架(如果不自行新建vue項目,這個可以不裝)
win+r輸入cmd打開命令行惧磺,執(zhí)行npm i -g @vue/cli
以上工具鏈接都是windows安裝版颖对,一路默認(rèn)安裝即可。
mongodb數(shù)據(jù)庫(本機)
參考上一篇文章:MongoDB壞境搭建磨隘,2分鐘建好數(shù)據(jù)庫
拷貝代碼
在d盤新建code文件夾缤底,用vs code'文件'——'打開文件夾'打開。
在VS code中的命令行工具(快捷鍵ctrl+~)中輸入
git clone https://github.com/Rackar/node_blog_vue
拉取我的前端示例項目源碼番捂,會創(chuàng)建d:\dode\node_blog_vue文件夾
git clone https://github.com/Rackar/node_blog
拉取我的后端項目源碼个唧,會創(chuàng)建d:\dode\node_blog文件夾
前端初始化
等待下載完成后在命令提示符依次執(zhí)行下面幾行命令
cd node_blog_vue
npm config set registry https://registry.npm.taobao.org
npm i
npm run serve
分別是進入項目目錄,設(shè)置國內(nèi)的依賴下載源(配置一次一直成效)设预,下載依賴包徙歼,運行調(diào)試。
這時按住ctrl點擊 http://localhost:9529/ 即會在瀏覽器打開項目預(yù)覽。
后續(xù)所有視頻教程都會基于當(dāng)前這個項目文件夾繼續(xù)添加文件魄梯。
后端初始化
同樣
cd d:\code\node_blog
npm i
npm start
或者不用執(zhí)行npm start桨螺,在vs code中使用f5快捷鍵調(diào)試。
后端:nodemon快速調(diào)試酿秸,vs code熱重載
全局安裝工具
npm install -g nodemon
VS調(diào)試配置:點擊launch.json灭翔,右下角添加配置,搜索nodemon允扇。修改啟動路徑為express腳手架的默認(rèn)路徑
"program": "${workspaceFolder}\\bin\\www",
現(xiàn)在F5調(diào)試可以一直不管了缠局,保存JS文件時會自動重啟調(diào)試。
vs code自動修正格式
設(shè)置之后在保存時代碼自動格式化和對齊考润。
這里有幾個坑狭园,注意開一個就行,不然保存時多次改格式『危現(xiàn)在用的第二種:
- 在vue.config.js中添加保存自動修復(fù)格式的代碼:
chainWebpack: config => {
// config.module
// .rule("eslint")
// .use("eslint-loader")
// .loader("eslint-loader")
// .tap(options => {
// options.fix = true;
// return options;
// });
}
在vs code 中設(shè)置保存時format
設(shè)置中搜索formatOnSave (editor)唱矛,打鉤(可能需要預(yù)裝prettier插件)在eslint插件中設(shè)置auto fix
設(shè)置中搜索auto fix On Save (eslint),打鉤(預(yù)裝eslint插件)