vue2入坑隨記(一)-- 初始全家桶

時間 2019-11-21

原文原文鏈接

都說Vue2簡單，上手容易，但小馬過河，本身試了才曉得，除了ES6語法和webpack的配置讓你感到陌生，重要的是思路的變換，之前隨便拿全局變量和修改dom的錘子不能用了，變換到關注數據自己。vue的官方文檔仍是不錯的，由淺到深，可是當你用vue-cli構建一個工程的時候，發現官方文檔仍是不夠用，得參考git上開源的項目並去學習es6。並且vue的全家桶(vue-cli,vue-router,vue-resource,vuex)仍是都要上的。html

1.vue-cli

這個構建工具大大下降了webpack的使用難度，支持熱更新，有webpack-dev-server的支持，至關於啓動了一個請求服務器，給你搭建了一個測試環境，你只關注開發就好。前端

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 建立一個基於 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev

熱更新的機制是檢測文件的變化並用websocket通知客戶端作出相應的更新。詳細的能夠移步：【webpack】-- 模塊熱替換vue

2.vue-router

vue的路由仍是很方便的，比ag1的時候要方便不少。這種方便體如今三個方面：node

1個是路由和頁面(組件)對應：webpack

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Chat from '@/components/Chat'
import Firends from '@/components/Firends'
import Logon from '@/components/Logon'

Vue.use(Router)
let router=new Router({
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
     { path: '/', redirect: '/home' },//重定向
    {
      path: '/chat',
      name: 'Chat',
      component: Chat
    },
    {
      path: '/firends',
      name: 'Firends',
      component: Firends
    },
    {
      path: '/logon',
      name: 'Logon',
      component: Logon
    }
  ]
});

常人的思路就是這樣，而ag1中還須要帶上控制器(vue中沒有這個概念,取而代之的是關注組件就行)，這樣用起來更簡單。MVC模式中，須要指到controller下的action，若是導航分類多，對應策略是嵌套路由。git

2個是能夠具體到元素了：es6

<router-link    class="footer-item"  exact  to="home">首頁</router-link>

這個to後面的home(忽略大小寫)就是上面定義的路由名稱。這樣就很方便了。相似於Asp.net MVC 的路由能夠用名稱來渲染出路徑，而不用何時都要輸入路徑。github

3個是事件攔截：web

若是咱們要作驗證，最好不過的就是在用戶到達頁面以前進行驗證：vue-router

router.beforeEach((to, from, next) => {
  //todo 之後增長不須要驗證的地址判斷
  if(to.path!=="/logon"&&!store.state.userInfo.Account){
     next({ path: '/logon' })
     return;
  }else{
   next();
  } 
})

好比在beforeEach中進行處理。它還有不少功能，就不一一枚舉了，官方文檔：http://router.vuejs.org/zh-cn/

3.組件中使用組件

看了幾個移動UI庫，一開始奇怪怎麼沒有footer組件，如今明白，路由都這麼方便了，第三方ui不必封裝了footer，也不方便封裝(由於依賴路由)。因而導航多是你須要本身來寫的第一個組件。

好比定義了個Footer.vue

<template>
    <footer class="footer">
     <router-link    class="footer-item"  exact  to="home">
     <span class="icon icon-home">
     </span>
     <label>首頁</label>
     </router-link>
     <router-link    class="footer-item"   to="statistics">
      <span class="icon icon-stat">
      </span>
      <label>統計</label>
     </router-link>
       <router-link    class="footer-item"   to="more">
      <span class="icon icon-more">
      </span>
      <label>更多</label>
     </router-link>
  </footer>
</template>

只在App.Vue中就須要引入

import VFooter from './VFooter'
 
export default {
name: 'app',
data () {
return {
msg: 'this is home'
}
},
components:{VFooter}
}

而後在App.Vue中就可使用了

<VFooter></VFooter>

若是是要註冊到全局就用先在main.js中引入

import Footer from './components/VFooter'
//
Vue.component('VFooter', Footer)//寫在構造函數以前

到了這一步就能夠愉快的組裝本身的頁面了。若是須要給頁面加上滑動效果，能夠加一個transition(位於app.vue):

  <transition  name="slide-in" mode="out-in">
    <router-view></router-view>
   </transition>

.slide-out-enter-active,
.slide-out-leave-active,
.slide-in-enter-active,
.slide-in-leave-active {
  will-change: transform;
  transition: all 400ms;
  position: absolute;
}
.slide-out-enter {
  opacity: 0;
   transform: translateX(-100%);
  
}
.slide-out-leave-active {
  opacity: 0;
   transform: translateX(100%);
  
}
.slide-in-enter {
  opacity: 0;
   transform: translateX(100%);

}
.slide-in-leave-active {
  opacity: 0;
   transform: translateX(-100%);

如何作到左右切換呢?

4.vue-resource

頁面敲好了，得能發請求。https://github.com/pagekit/vue-resource 而前端若是不是本身寫的接口首先關心的仍是怎麼設置代理，這個位於config/index.js下面的proxyTable。

    proxyTable: {
    '/api':
     {
           target: 'http://11.111.249.12:11',
           changeOrigin: true,
           pathRewrite:
           {
              '^/api': ''
            }
    },

跨域的設置不能少了changeOrigin。另外須要注意最後的這個'^/api': ''。要注意你選擇的"/api"是否是原路徑中的一部分，否則容易出錯。

而後還有一部分就是設置請求頭(main.js)：

import VueResource from 'vue-resource'
Vue.use(VueResource);
Vue.http.interceptors.push(function(request, next) {// modify method
  //request.method = 'POST';

  // modify headers
      
  request.headers.set('token',「token」);// continue to next interceptor
  next();
});

5.vuex

全家桶裏面一開始最讓我懵逼的就是這個vuex。這是個什麼鬼，爲何須要這個。沒有玩過React，不知道什麼是狀態管理。當你想用一個全局變量的時候，你發現以前的招都不靈了。好比設置一個登陸狀態

let login=(name,pwd,success,fail)=>{
    Vue.http.post(loginUrl,{account:name,password:pwd}).then(res=>{
　　　　　//....
        window.hasLogin=true;
  
 },res=>{ fire(fail,"請求失敗"); }) }

而後再首頁顯示出來：

<div @click="toggle">{{hasLogin}}</div>

data () {
    return {
      hasLogin:window.hasLogin
    }
  },
   methods:{
     toggle(){
       window.hasLogin=!window.hasLogin;
       console.log("clicked",window.hasLogin)
     }
   },

你發現你登陸以後確實顯示了true，但怎麼點擊也不會切換false或true。

須要再賦值一次：

this.hasLogin=window.hasLogin;

爲何呢？由於你本身定義的變量，根本不屬於vue的model。也就是沒有處理過geter和seter,雖然變量的值是變化了，但仍然沒法改變界面上的狀態。因此你須要一個狀態管理，按照必定的機制把你的變量變換成vue內部的模型。這個東西就是vuex。由於約定比較多，略顯複雜點，可是耐心看一下仍是很容易接受的。它主要分四個部分，state,getters,mutations,actions。先定義一個user.js以下：

state就是咱們放共享變量的地方。好比下面的userInfo.

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

const userStore=new Vuex.Store({
   state:{
       userInfo:{
           userName:""
       }
   },
   getters:{
       getUserInfo(state){
           return state.userInfo;
       }
   },
   mutations:{
       setUserInfo(state,userInfo){
           state.userInfo=userInfo;
       }
   },
   actions:{
       setUserInfo({commit}){
           commit('setUserInfo');
       }
   }

})


export default userStore;

而getters顧名思義就是獲取接口，mutations(突變)這個詞有點唬人，其實就是setters嘛。裏面的方法自帶state參數。而actions就是mutations的異步方法。而後再main.js中引用一下：

import store from './store/user';
//...
 new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

而後咱們在設置或獲取的時候就可使用指定的方法：

import store from '@/store/user';
//...
store.commit('setUserInfo',user)

能夠直接經過store.state獲取變量，也能夠經過getters接口：

 computed:{
   ...mapGetters({username:'getUserName'})
  },

這三個點是es6中的擴展運算符。將一個數組轉爲用逗號分隔的參數序列。

固然這些狀態刷新以後就沒有了，若是想要暫存下來，能夠放到sessionStorage中：

if (window.sessionStorage.user) {
    var json=JSON.parse(window.sessionStorage.user);
    store.commit('setSessionUser',json)
}

固然要在muations中放進去

  //我的信息
  setUserInfo(state,user)
  {
  state.userInfo=user;
   window.sessionStorage.user=JSON.stringify(state.userInfo);
  },

官方文檔： https://vuex.vuejs.org/zh-cn/

小結：到這兒基本五臟俱全了，能夠愉快的玩耍了。還有一個是對生命週期的理解。組件實例每次加載都會執行一遍，因此在生命週期的方法中作請求和綁定的時候要清楚這一點。

其餘:

Demo

https://github.com/CommanderXL/x-blog

https://github.com/bailicangdu/vue2-elm

https://github.com/shinygang/Vue-cnodejs

UI:

http://element.eleme.io/#/zh-CN element

http://mint-ui.github.io/docs/#/zh-cn2 Mint UI

https://github.com/airyland/vux vux

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。