一個完整的vue應用 ( vuex+vue-router ) 起手

項目鏈接

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直接訪問。

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直接訪問。

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

最後各位別忘了github右上角點波關注, 噢，說錯了，點顆star (￣３￣)，謝謝你們