一个完整的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 ( ̄3 ̄),谢谢大家

    原文作者:xiguadada
    原文地址: https://segmentfault.com/a/1190000007480285
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞