vue.js和vue-router和vuex快速上手知识

vue.js和vue-router和vuex快速上手知识

一直以来，认为vue相比react而言，学习成本会更低，会更简单，但最近真正接触后，发现vue的各方面都有作一些客户化的优化，有一些亮点，但也有一些很不顺手的地方，没有react的灵活度，但却有ng的方便性。要说vue和react哪一个更适合作移动端，其实没有绝对的答案，喜欢就好。我但愿能经过这篇文章能让你们迅速上手vue的全家桶。

本文的例子源码托管在github上，地址是https://github.com/tianxiangbing/vue-demo

首先，咱们用vue-cli搭一个vue的开发环境，目前vue-cli3.0也出来了，但使用者很少，中文文档也较少，更多配置都是vue.config.js里，这里配置是返回一个module,也是修改webpack的配置项，但其实仍是很麻烦，这个不在本文主题内，省过...

1. 服务的搭建

安装vue-cli，建议安装2.x的版本，本文使用的是vue-cli3.0

npm install -g vue-cli

建立一个vue的项目，项目名称叫vue-demo

vue create vue-demo

而后进入项目目录下执行安装依赖包

npm i

而后启动服务，执行命令 npm run serve ,你应该能够看到以下的结果：

看到这里，就算成功了，在浏览器中打开http://localhost:8080/ ，就能够看到vue整个页面了，而且已是热部署了，能够实时编译更新了。

 2. vue-router路由

vue的基础知识能够直接参考https://cn.vuejs.org/v2/guide/ ，基本上跟react没有什么共通性，也跟ng不一样，若是说必定要更像谁一点的话，应该是更像ng一些。知识点不少， 磨刀不误杀人功，因此建议先读官方教程，若是不想看教程，也不要紧，其实用的时候再看也同样^_^

先安装vue-router依赖

npm install --save vue-router

而后修改main.js文件，引入vue-router，在这里提一点，官方的例子基本上是引入外部js文件的方式，因此跟实际开发仍是有一点点的区别，实际开发中，都是以多模块的方式引用组件，因此咱们尽可能以简单又实用的方式来使用。

import VueRouter from "vue-router"; import Home from './pages/Home'; import Hello from './pages/Hello'; import User from './pages/User';

 

  Vue.use(VueRouter);//注意这里，在模块式引用时，必定要有这个

我在这里引用了vue-router，而且在pages里建立了三个组件页面。页面的代码相似于下面：

<template>
  <div> 我是hello的页面. </div>
</template>

<script> export default { name: 'Hello' } </script>

而后在main.js里配置路由地址，而且在vue的实例化中使用它。

let router = new VueRouter({ mode: "history",//默认是hash方式 routes: [ { path: '/', component: Home }, { path: '/hello', component: Hello }, { path: '/user/:id', component: User }, { path: '/vuex', component: Vuex1 } ] }); new Vue({ router,　　//es6写法，至关于router:router render: h => h(App) }).$mount('#app')

恩，这里顺便演示了如何带参数:id的方式，这与其余框架同样，获取参数的方式是： $route.params.id ,更多的配置能够参考vue-router官方文档，本文只讲最基础的入门知识。运行起来，效果大概是这样的

 

 好了，vue-router咱们就算会了。完美~

接着咱们要讲vue全家桶里最复杂也是最重要的一环，vuex

3. vuex的使用

vuex这个东西是个啥呢，其实用过redux或flux的都知道，就是个单向数据流，嗯....，就是个观察者模式，嗯....，就是事件分发，嗯....其实说得这么悬忽，就是为了提升它的逼格，用正常来讲，他就是个全局的数据对象，而后你须要经过action来修改它，而后它的改动会派发到全部影响的组件。这样就能够兄弟叔侄组件通讯了。

安装vuex依赖

npm install --save vuex

而后咱们如官方例子同样作个点击加数的demo。

import Vuex from 'vuex'; Vue.use(Vuex);

const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ } ,minus(state){ state.count--; } }, actions:{ increment(context){ context.commit('increment') }, minusAsync({commit}){//es6简单写法 setTimeout(()=>{ commit('minus') },4000) } } });

new Vue({ router, store, render: h => h(App) }).$mount('#app')

这么一长段的代码，怎么理解呢，state就是存储状态的，mutations这个就相似于redux的reducer，就是实际操做state的方法，另外咱们须要经过action来提交这个mutations,方法就是commit，咱们还记得redux里还有个actionType，这里我直接写的字符串。注意，在这里我用了一个setTimeout来测试延时的操做。

而后咱们在须要使用到vuex的地方这样调用

import { mapActions } from 'vuex' export default { computed: { count () { return this.$store.state.count } }, methods:{ add(){ // this.$store.dispatch('increment');
        this.increment(); }, minus(){ this.$store.dispatch('minusAsync'); }, ...mapActions(['increment']) } }

首先第一行引入的mapActions是帮助把action代理到当前this下面的一种捷径， this.$store.dispatch('increment'); 简写成了 this.increment(); 经过这样定义后，咱们把methods绑定到相应的按钮事件里，整个计数器的功能就算开发完了

<div> 计数器： {{count}} <button v-on:click="add">点+</button>
      <button v-on:click="minus">点-</button>
  </div>

这样看来，确实比react-redux上手更快了，只要咱们再划分下模块，就能够立马开发一个vue+vue-router+vuex的应用了。

本文的例子源码托管在github上，地址是https://github.com/tianxiangbing/vue-demo  若是有任何的疑问或问题能够提出来，你们都是成年人，有什么不能说呢~