手把手教你用es6+vue2+webpack2+vue-router2搭建我的blog

底下評論說是標題黨，或者是光扔個github地址上來的同窗我就不說什麼了。大家有看看倉庫的提交記錄麼？我尚未吃撐到開個倉庫去騙star.個人出發點就是天天更新一部分代碼，教你們用我所提到的技術棧搭建一個blog，個人出發點就是這麼簡單。這個項目纔開始2天，就是天天晚上抽點時間寫寫，速度不會很快，這週末前將前端的靜態頁面和mock數據及webpack打包構建寫完，下週開始寫服務端的內容。

---

更新日誌

2.14更新

完成post靜態頁面原型,修復webpack使用extractTextPlugin的正確姿式

2.15更新

添加about靜態頁面

2.16更新

• 添加json-server. 使用方法請戳我

主要做用就是在你開發環節在後端同窗還未開發完成的狀況下，提供一個mock backend server。

在咱們還未開始寫後端代碼前，主要用這個backend server去模擬數據格式。

PS: 由於你webpack-dev-server佔用了一個端口,那麼json-server須要使用另一個端口。
這個時候須要利用webpack-dev-server提供的proxy功能。

具體的配置信息，見webpack.config.dev.js文件

• 添加axios做爲http資源庫

其實vue對於開發者使用什麼資源庫沒作什麼限制。使用你順手的就行了。

將axios集成進vue的方式見App.vue文件。

axios文檔請戳我

vue添加插件的方法請戳我

2.18更新

• 添加webpack生產環境配置信息

見webpack.config.prod.js文件。主要添加的內容爲文件的hash，文件的打包及輸出內容

• tags頁面添加vue-router路由動態匹配

使用方法請戳我

2.19更新

• 添加mock數據, 見lib/mock/db.json文件

• 完成archive靜態頁面

---

這是一個開源的我的blog項目。

前端的所使用的技術棧:

• es6

• vue2

• vue-router2

• webpack2

• axios

• less

後端:

• node

• mongoDB

這個小項目纔開始，使用webpack2已經搭建好了前端開發環境, 及相應的vue的路由配置。接下來我會帶着你們一塊兒完成整個blog的開發工做。

若是你想學習vue2的基本套路及其生態, 若是你想學習如何使用webpack2進行文件的編譯，打包及構建，如何進行文件的組織。。（總之做爲一個業餘項目，你能跟下來的話確定能學到不少啦~~）

你還在等什麼，趕忙上車吧~~~ 代碼倉庫請戳我