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

標籤：build   完成   版本   module   名稱   targe   modules   ini   mon   

學習JS也有一段時間了，準備試著寫一個部落格項目，前後端分離開發，後端用node只提供資料介面，前端用vue-cli腳手架搭建，路由也由前端控制，資料非同步互動用vue的一個外掛程式vue-resourse來做，資料庫用mongodb。總的來說就是 node + vue + mongodb開發部落格系統，探索前端走向全棧之路。

我會記錄下來整個過程在我的專欄，有興趣的可以關注一下，一起學習，歡迎討論。

話不多說，先進行前後端項目的初始化。

前端項目初始化

命令列輸入命令 cd your_project // 切換到你想要切換到檔案夾
安裝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 www.dijiuyy.com 這裡blog-server是後端項目的名稱，根據自己需要改變
安裝完成後，進入後端項目 cd blog-server
然後執行 npm install 安裝項目依賴
安裝完成後，啟動項目 npm start
開啟瀏覽器訪問 localhost:3000 可看到啟動成功

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

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