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  若是有任何的疑問或問題能夠提出來，你們都是成年人，有什麼不能說呢~