【Part1】用JS寫一個Blog（node + vue + mongoDB）

學習JS也有一段時間了，準備試着寫一個博客項目，先後端分離開發，後端用node只提供數據接口，前端用vue-cli腳手架搭建，路由也由前端控制，數據異步交互用vue的一個插件vue-resourse來作，數據庫用mongodb。總的來講就是 node + vue + mongodb 開發博客系統，探索前端走向全棧之路。

我會記錄下來整個過程在個人專欄，有興趣的能夠關注一下，一塊兒學習，歡迎討論。

話很少說，先進行先後端項目的初始化。

前端項目初始化

新建項目的文件夾，並切換到新建的文件夾
安裝vue腳手架vue-cli 命令行輸入 npm install vue-cli -g
安裝完成後，輸入 vue init webpack blog // vue初始化，blog是項目的名稱，可自行更改，初始化的數據可根據本身的的須要選擇默認或是本身命名，須要說明的是，vue-router選項須要選擇yes，由於要先後端分離，路由由前端控制。

安裝完成後，輸入命令 cd blog 切換到項目文件夾後,輸入命令 npm run dev 訪問一下 http://localhost:8080,項目初始化完成。（最新版本的vue-cli不用手動安裝依賴，他會自動安裝，因此沒有了 npm install )

下面解釋一下項目的目錄

build和config文件都是關於webpack的相關配置，暫且先無論它
項目中安裝的依賴都存放在node_modules目錄中
src目錄就是咱們在開發過程當中寫代碼的地方
assets存放一些js css 圖片等資源，可根據須要選擇要與不要
components中放的就是.vue的文件，每個文件都是一個組件
router中index.js就是咱們寫路由的地方
app.vue就是最終的單頁面呈現的組件
main.js就是整個項目的入口文件

後端項目初始化

這裏我用的node的express框架，先安裝expres生成器，用來快速生成express應用骨架
命令行輸入 npm install express-generator -g
安裝成功後，命令行輸入 express blog-server // 這裏blog-server是後端項目的名稱，根據本身須要改變
安裝完成後，進入後端項目 cd blog-server
而後執行 npm install 安裝項目依賴
安裝完成後，啓動項目 npm start
打開瀏覽器訪問 localhost:3000 可看到啓動成功

前端和後端都啓動成功，接下來就正式開始開發。
show time~