一个完整的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

目录结构

[code]├── 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.  

   [code]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.  

   [code]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