手把手教你用vue+node+mongodb搭建一個小商城（1.前期準備工作）

手把手教你用vue+node+mongodb搭建一個小商城（1.前期準備工作）

來自專欄前端組隊小夥伴

hello，大家好，接下來我會以這個項目為基礎更新一系列的文章，但是每天只更新一點，也只學一點；目的希望大家利用工作學習之餘的碎片時間來通過這個項目學習vue和node等知識點，不管看到這篇文章的同學是不是棒棒團的成員，希望大家都一起參與進來，動手實踐，有什麼問題都可以在QQ群里（陽叔WX：erdaori拉你入群）一起討論學習，文章中有什麼錯誤也歡迎大家指出，共同學習，一起進步，早日走上人生巔峰。

一、git倉庫

1、首先我先創建一個倉庫，大家fork這個倉庫（https://github.com/Ewall1106/mall），以此倉庫為核心，我會把每天新完成的代碼提交上去更新，一直到大家一起把這個項目做完；大家fork完以後可以同步我的倉庫查看或者在我的倉庫上直接做修改，有問題也可以提issue。

2、大家在github上建一個自己的項目，自己動手親自寫一遍，有問題可以查看fork的核心倉庫，也可以在群里一起討論解決問題。

好了，廢話不多說了，今天的內容很簡單，就是把前期的準備工作做好，環境搭好，為我們後面的項目做準備。

二、安裝node環境

去官網上根據自己的電腦環境下載對應的版本（https://nodejs.org/en/）；然後傻瓜式的點下一步完成完成即可，然後打開命令行輸入：

安裝成功

如果顯示版本號了就證明你安裝成功了。具體你可以移步我的簡書關於node安裝的詳細步驟（https://www.jianshu.com/p/d3eccfa30da1](https://www.jianshu.com/p/d3eccfa30da1）

三、用腳手架搭建一個基於webpack的vue項目

1、命令輸入

安裝的步驟呢官網（https://cn.vuejs.org/v2/guide/installation.html）已經寫得十分詳細了，我就照搬過來了：

# 全局安裝 vue-cli$ npm install --global vue-cli# 創建一個基於 webpack 模板的新項目$ vue init webpack my-project# 安裝依賴，走你$ cd my-project$ npm run dev

2、含義

安裝過程中出現的命令行是什麼意思呢？我簡單解釋下，從上到下依次的含義為：

• 項目的名字是什麼？ 我們這裡選默認的myproject

• 項目的描述？ 默認

• 項目的作者？

• 是否使用路由v-router？ 我們選yes

• 是否使用ESLint語法校檢？ 我們選n
  （ ps：ESLint語法校檢工具可以幫你養成良好的編碼習慣、規範的格式，但是每個人習慣不同，會很繁瑣，所以前期我們選擇不安裝。）

• 後面「unit tests」、「e2e tests」都是單元測試，這裡我們不安裝。

搭建vue項目

3、安裝完成，我們進入項目啟動編譯

新的vue-cli腳手架構建一個新的項目的時候，連依賴都一起幫你安裝好了，也就是不用進入項目後使用npm install安裝依賴了，幫我們省略了一個npm install的步[圖片上傳中...(Image.png-6f2ff7-1526894543744-0)]

驟。

（1）好，現在我們進入項目，npm run啟動編譯：

啟動編譯

編譯完成

（2）現在我們進入瀏覽器中輸入http:localhost:8080就可以看到一個初始化的vue項目

作者：Ewall_

鏈接：https://www.jianshu.com/p/0b91e9a05694

來源：簡書

著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

推薦閱讀：