一个完整的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 (￣３￣)，谢谢大家