QQ技术群:5678537,70210212,77813547 个人网站:http://www.lovewebgames.com 邮箱:55342775@qq.com

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

posted @ 2018-04-04 18:25 田想兵 阅读(...) 评论(...) 编辑 收藏
联系QQ:55342775,QQ技术群:5678537,70210212,77813547 个人网站:http://www.lovewebgames.com 邮箱:55342775@qq.com