專案連線

github連結

介紹

• 本專案主要介紹如何使用vue+vuex+vue-router開啟一個SPA應用，注重的是將應用搭建起來，所以專案不大

• 第一次發文，不知道如何開口，那我就直接上程式碼了，一切盡在註釋中(￣▽￣)"，各位看官原諒

• 看這篇文章之前，希望你已經對vue有所認識，知道vuex，vue-router，要是懂一點flux原理就更好了

• 如果之前是react的使用者，我相信轉vue一定非常easy，因為兩者有很多的共同點

• 用到的技術： vue vuex vue-router fetch

   sass babel webpack

目錄結構

├── src

│ ├── components #元件

│ │ └── Counter.vue

│ ├── store

│ │ ├── actions

│ │ │ ├── counter.js #counter actions

│ │ │ ├── fetchApi.js #fetch action

│ │ │ └── index.js ##合併匯出 actions

│ │ ├── getters #通過一些函式對store上的元資料做一些操作後再返回給元件使用

│ │ │ └── index.js

│ │ ├── mutations #處理上面對應的actions

│ │ │ ├── counter.js #counter mutations

│ │ │ ├── fetchApi.js #fetch mutation

│ │ │ └── index.js #合併匯出 mutations

│ │ └── index.js #合併上面的東西，export store

│ ├── style #樣式

│ │ ├── app.scss

│ │ ├── counterpage.scss

│ │ └── homepage.scss

│ ├── views #頁面，由元件拼湊而成

│ │ ├── App.vue #可以理解為頁面的容器，頁面在這個容器中切換

│ │ ├── CounterPage.vue #計算頁

│ │ └── HomePage.vue #首頁

│ ├── index.html #html模板

│ ├── main.js #入口檔案

│ └── route-config.js #路由配置

├── package.json

├── .babelrc

└── webpack.config.js
 

主要檔案

src/main.js

做為入口檔案，我們當然會把所有要用到的都給引入進來。

引入router很簡單，建立一個VueRouter的例項，最重要的兩個引數一個就是路由模式，一個就是路由配置(見下)，建立好以後，扔到Vue例項的配置中就行，最終路由的所有相關資訊都會掛在this.$router 上，元件可以通過 this.$router 直接訪問。

1.  

   require('es6-promise').polyfill(); //es6 promise
   
   require('isomorphic-fetch'); //fetch庫
   
   
   import Vue from 'vue';
   
   import VueRouter from 'vue-router';
   
   import routes from './route-config.js'; //路由配置
   
   import store from './store/index.js'; //store
   
   import App from './views/App.vue'; //頁面容器
   
   
   Vue.use(VueRouter); //vue使用veux，vue-router 都是通過Vue這個物件上的use這個方法。
   
   
   //建立路由
   
   const router = new VueRouter({
   
   mode: 'hash', //路由的模式
   
   routes
   
   });
   
   
   //將store, router加入並生成應用
   
   new Vue({
   
   el: '#application',
   
   store,
   
   router,
   
   render: h => h(App)
   
   });
    
   

    

src/route-config.js

路由配置也很簡單，文件有詳細的例子。如果應用過大，打包到一個js檔案裡有點不合適，我們可以在這裡引入頁面的時候做頁面的懶載入，就是code spliting。 懶載入例子

import HomePage from './views/HomePage.vue';    //引入頁面
import CounterPage from './views/CounterPage.vue';

//當然真正應用的路由不會這麼簡單，vue-router也提供動態路由，巢狀路由等等，詳見vue-router文件
export default [
  { path: '/', component: HomePage },
  { path: '/counter', component: CounterPage}
];

src/store/index.js

同使用vue-router一樣，先調一下use方法，然後新建一個Store例項，把state，actions，getters，mutations全扔進去。

最終將store丟擲，會被用在新建vue例項的時候。同樣store的所有相關會掛在this.$store上，元件可以通過this.$store直接訪問。

1.  

   import Vue from 'vue';
   
   import Vuex from 'vuex';
   
   import actions from './actions/index.js';
   
   import mutations from './mutations/index.js';
   
   import * as getters from './getters/index.js';
   
   
   Vue.use(Vuex);
   
   
   //state
   
   const state = {
   
   count: 0, //counter actions 操作的值
   
   pageData: {} //fetch action 操作的值
   
   };
   
   
   //把上面的融到一起
   
   export default new Vuex.Store({
   
   state,
   
   actions,
   
   getters,
   
   mutations
   
   });

    

src/views/App.vue

<style lang="sass" src="../style/app.scss"></style>

<template lang="html">
  <div id="app">
    <!--你也可以在其他地方使用<router-view></router-view>來建立巢狀路由，詳見vue-router文件-->
    <router-view></router-view>
  </div>
</template>

總結

看到這裡，各位聰明的看官，一定已經知道如何把vue，vuex，vue-router串聯起來了。

vue的官方文件很全，也出了中文文件，而且vue的設計思路清晰，應用的結構也比較簡單明瞭，所以上手vue不是一件很難的事情。

分享一波文件地址：

vue vuex vue-router