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:

  },

  mutations: {

    increment(state) {

      state.count++

    }

    ,minus(state){

      state.count--;

    }

  },

  actions:{

    increment(context){

      context.commit('increment')

    },

    minusAsync({commit}){//es6简单写法

      setTimeout(()=>{

        commit('minus')

      },)

    }

  }

});

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 如果有任何的疑问或问题可以提出来，大家都是成年人，有什么不能说呢~

巴特西

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

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

1. 服务的搭建

2. vue-router路由

3. vuex的使用

最新文章

热门文章