<!--原網頁： http://www.jianshu.com/p/aa46fbf198e2?open_source=weibo_search -->
學習如何使用vue-cli，去元件化的開發一個專案；以及如何使用路由vue-router，完成頁面之間的跳轉；還有vuex如何管理頁面之間需要互動的全域性資料；如何使用vue-resource跨域請求，node後臺又如何配置。

一. 使用的技術棧
後臺：nodejs + express + mongodb + mongoose
前端：vue + vue-router + vuex + vue-router
後臺是自己之前就寫過的一個基於nodejs的個人部落格的練習，當時是轉發頁面的形式，即將頁面和資料一同傳給瀏覽器，現在只是改成介面的形式，只發送資料，感興趣的同學可以去github下載：https://github.com/SpiritLiftedHigh/BlogAPI

二. 專案預覽
    略

三. 一些問題的解決
1 . 頁面靜態資源的配置：
（1）將圖片資源放在static資料夾中
一開始，覺得靜態資源都應該發在assets資料夾的，可是因為圖片的名字是存在伺服器端的，在渲染頁面時，圖 片的路徑需要使用字串拼接，發現如果將路徑寫成靜態的就會直接對映到static目錄下，可是如果是動態拼接的話，就不能成功對映。
（2）bootstrap的部署
因為bootstrap是完全依賴jQuery的，所以要使用bootstrap，就必須先下載並配置jQuery。如下：
開啟build/webpack.base.conf.js，新增如下配置：
plugins: [
   new webpack.optimize.CommonsChunkPlugin('common.js'),
   new webpack.ProvidePlugin({
     jQuery: "jquery",
     $: "jquery"
   })
  ],
將resolve改為入下的配置：
resolve: {
　　extensions: ['.js', '.vue', '.json'],
　　alias: {
　　'vue$': 'vue/dist/vue.esm.js',
　　'@': resolve('src'),
　　'bootstrap':resolve('src/assets/bootstrap'),
　　}
}
在main.js中直接匯入：
import './assets/bootstrap/css/bootstrap.min.css' 
import './assets/bootstrap/js/bootstrap.min.js'
2 . vuex的使用
首先下載，然後進入main.js檔案，並新增如下程式碼：
import Vuex from 'vuex'
Vue.use(Vuex)
const  vuex_store = new Vuex.Store({
    state:{
        totalmess: 0,  //未讀訊息總數，在footer公用元件
        title: '登入' //每個頁面的名稱，在nav公用元件中
    },
    mutations:{
        
    }
})
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  store: vuex_store  //注入vue例項中，這樣所有元件都可以獲取
})
在nav元件中的使用：
<div class="header"><span>{{this.$store.state.title}}</span></div>
在其他元件中的使用，比如訊息顯示頁面：
this.$store.state.title = '訊息';
這樣每個元件中的變化，都可以體現在nav公用元件中。
3 . 路由之間的跳轉和引數的傳遞，以及獲取
（1）路由的跳轉（在程式碼中動態跳轉）：
this.$router.push({path: '/list'});
（2）通過連結跳轉時的傳參和獲取引數
路由的配置：
export default new Router({
  routes: [
    {
      path: '/blog/:id',
      name: 'blog',
      component: blog
    }
]
})
跳轉傳參：
<router-link :to="{path: '/blog/' + blog._id}"></router-link>
獲取引數：
let blogid = this.$route.params.id;
4 . vue-resource跨域請求，儲存session
在後臺配置好的情況下，必須要傳送cookie，不然後臺不能儲存session，所以在每次請求時都必須傳送cookie
this.$http.get(url, { 
    withCredentials: true  //開啟cookie
}).then( res => {
    //
}).catch( error => {
    //
})
後臺介面API：https://github.com/SpiritLiftedHigh/BlogAPI
前端vue實現：https://github.com/SpiritLiftedHigh/xiaojingBlog