一个完整的vue应用 ( vuex+vue-router ) 起手
2017-07-01 18:12
246 查看
项目连接
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 ̄),谢谢大家
相关文章推荐
- Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
- webpack+Vue.js+vue-router的一个简单实例应用
- 基于vue2 + vue-router + vuex 构建的一个音乐类单页面应用 —— echo回声
- 使用Vue.js创建一个时间跟踪的单页应用
- 如何使一个iPhone应用 - iPhone开发的秘密审查一个完整的分步应用程序开发课程
- hibernate一个完整的应用(2)
- 如何使用国际开源项目构建一个完整的GIS(地理信息)应用系统
- 深入浅出Ext JS:一个完整的EXT应用
- vue-router完整实例
- 使用 Antlr 开发领域语言 - 开发一个完整的应用
- JS使用google地图API完成一个完整地图应用
- 创建一个Cordova完整应用
- 数据挖掘在商业应用上的一个完整的流程
- 使用Yeoman和AngularJS搭建一个功能完整的应用前端环境
- 【深入浅出Node.js系列八】一个基于Node.js完整的Web应用实战
- 使用国际开源项目构建一个完整的GIS(地理信息)应用系统
- 如何使用国际开源项目构建一个完整的GIS(地理信息)应用系统
- 一个带完整的RBAC授权系统的rails应用(第二部分)
- 一个完整的linux 驱动demo 加应用测试 demo
- 一个完整的 Core Data 应用