node.js+mongodb+vue.js【0】零基礎(chǔ)開發(fā)環(huán)境

環(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插件)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末井辜,一起剝皮案震驚了整個濱河市绎谦,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌粥脚,老刑警劉巖窃肠,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異刷允,居然都是意外死亡冤留,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門树灶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來纤怒,“玉大人,你說我怎么就攤上這事天通〔淳剑” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵像寒,是天一觀的道長烘豹。 經(jīng)常有香客問我,道長诺祸,這世上最難降的妖魔是什么吴叶? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮序臂,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己奥秆,他們只是感情好逊彭,可當(dāng)我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著构订,像睡著了一般侮叮。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上悼瘾,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天囊榜,我揣著相機與錄音,去河邊找鬼亥宿。 笑死卸勺,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的烫扼。 我是一名探鬼主播曙求,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼映企!你這毒婦竟也來了悟狱?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤堰氓,失蹤者是張志新(化名)和其女友劉穎挤渐,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體双絮,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡浴麻,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了掷邦。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片白胀。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖抚岗,靈堂內(nèi)的尸體忽然破棺而出或杠,到底是詐尸還是另有隱情,我是刑警寧澤宣蔚,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布向抢,位于F島的核電站,受9級特大地震影響胚委,放射性物質(zhì)發(fā)生泄漏挟鸠。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一亩冬、第九天 我趴在偏房一處隱蔽的房頂上張望艘希。 院中可真熱鬧硼身,春花似錦、人聲如沸覆享。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽撒顿。三九已至丑罪,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間凤壁,已是汗流浹背吩屹。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留拧抖,地道東北人煤搜。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像徙鱼,于是被迫代替她去往敵國和親宅楞。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 前言 Git使用教程 Git是什么 Git是一個開源的分布式版本控制系統(tǒng)袱吆,用于敏捷高效地處理任何或小或大的項目厌衙。 ...
    90后的思維閱讀 913評論 0 0
  • 已經(jīng)攢了一系列 VS Code 寫作計劃和素材,之前也發(fā)過幾篇基礎(chǔ)知識的思維導(dǎo)圖(見文末)绞绒。不過一直不知道該從哪里...
    思考問題的熊閱讀 10,363評論 6 45
  • 自加入校學(xué)生會婶希,學(xué)到的本領(lǐng)或者領(lǐng)悟遠(yuǎn)比我付出的多。 這么說可能會拉低我的付出蓬衡,但喻杈,得到的,都是財富狰晚。 復(fù)雜的人際關(guān)...
    江雨南夢閱讀 298評論 0 0
  • 書名:《富爸爸財務(wù)自由之路》 字?jǐn)?shù): 小步邁進 (一)大家還記得年初制定的計劃嗎筒饰?到現(xiàn)在快過去半年了,實現(xiàn)了多少壁晒?...
    睿迪格閱讀 68評論 0 0
  • story 保護 : full relro , stack canary , nx 程序流程 :獲取用戶 id ...
    fantasy_learner閱讀 960評論 0 0