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

Posted 2020-10-29 田想兵

我希望能通过这篇文章能让大家迅速上手vue的全家桶。从入门到放弃，只在一念之间。

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