Vue 插件寫法

時間 2019-11-09

標籤 vue 插件寫法简体版

原文原文鏈接

都說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

學習了Vue全家桶和一些UI基本夠用了，可是用元素的方式使用組件仍是不夠靈活，好比咱們須要經過js代碼直接調用組件，而不是每次在頁面上經過屬性去控制組件的表現。下面講一下如何定義動態組件。

Vue.extend

思路就是拿到組件的構造函數，這樣咱們就能夠new了。而Vue.extend能夠作到：https://cn.vuejs.org/v2/api/#Vue-extend

// 建立構造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 建立 Profile 實例，並掛載到一個元素上。
new Profile().$mount('#mount-point')

官方提供了這個示例，咱們進行一下改造，作一個簡單的消息提示框。

動態組件實現

建立一個vue文件。widgets/alert/src/main.vue

<template>
 <transition name="el-message-fade">
<div  v-show="visible" class="my-msg">{{message}}</div>
  </transition>
</template>

<script  >
    export default{
        data(){
           return{
               message:'',
               visible:true
           } 
        },
        methods:{
            close(){
                setTimeout(()=>{
                     this.visible = false;
                },2000)
            },
        },
        mounted() {
        this.close();
      }
    }
</script>

這是咱們組件的構成。若是是第一節中，咱們能夠把他放到components對象中就能夠用了，可是這兒咱們要經過構造函數去建立它。再建立一個widgets/alert/src/main.js

import Vue from 'vue';
let MyMsgConstructor = Vue.extend(require('./main.vue'));

let instance;

var MyMsg=function(msg){
 instance= new MyMsgConstructor({
     data:{
         message:msg
}})

//若是 Vue 實例在實例化時沒有收到 el 選項，則它處於「未掛載」狀態，沒有關聯的 DOM 元素。可使用 vm.$mount() 手動地掛載一個未掛載的實例。
instance.$mount();
 
 document.body.appendChild(instance.$el)
 return instance;
}


export default MyMsg;

require('./main.vue')返回的是一個組件初始對象，對應Vue.extend( options )中的options，這個地方等價於下面的代碼：

import alert from './main.vue'
let MyMsgConstructor = Vue.extend(alert);

而MyMsgConstructor以下。

參考源碼中的this._init,會對參數進行合併，再按照生命週期運行：

  Vue.prototype._init = function (options) {
    ...// merge options
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options);
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      );
    }
// expose real self
    vm._self = vm;
    initLifecycle(vm);
    initEvents(vm);
    initRender(vm);
    callHook(vm, 'beforeCreate');
    initInjections(vm); // resolve injections before data/props
    initState(vm);
    initProvide(vm); // resolve provide after data/props
    callHook(vm, 'created');

    ...

    if (vm.$options.el) {
      vm.$mount(vm.$options.el);
    }
  };

而調用$mount()是爲了得到一個掛載實例。這個示例就是instance.$el。

能夠在構造方法中傳入el對象(注意上面源碼中的mark部分，也是進行了掛載vm.$mount(vm.$options.el)，可是若是你沒有傳入el，new以後不會有$el對象的，就須要手動調用$mount()。這個方法能夠直接傳入元素id。

 instance= new MessageConstructor({
     el:".leftlist",
     data:{
         message:msg
}})

這個el不能直接寫在vue文件中，會報錯。接下來咱們能夠簡單粗暴的將其設置爲Vue對象。

調用

在main.js引入咱們的組件：

//..
import VueResource from 'vue-resource'
import MyMsg from './widgets/alert/src/main.js';
//..
//Vue.component("MyMsg", MyMsg);
Vue.prototype.$mymsg = MyMsg;

而後在頁面上測試一下：

<el-button type="primary" @click='test'>主要按鈕</el-button>
//..

　methods:{
test(){
this.$mymsg("hello vue");
}
}

這樣就實現了基本的傳參。最好是在close方法中移除元素：

 close(){
    setTimeout(()=>{
       this.visible = false;
       this.$el.parentNode.removeChild(this.$el);
      },2000)
   },

回調處理

回調和傳參大同小異，能夠直接在構造函數中傳入。先修改下main.vue中的close方法：

export default{
        data(){
           return{
               message:'',
               visible:true
           } 
        },
        methods:{
            close(){
                setTimeout(()=>{
                     this.visible = false;
                      this.$el.parentNode.removeChild(this.$el);

                if (typeof this.onClose === 'function') {
                 this.onClose(this);
                }
                },2000)
            },
        },
        mounted() {
        this.close();
      }
    }

若是存在onClose方法就執行這個回調。而在初始狀態並無這個方法。而後在main.js中能夠傳入

var MyMsg=function(msg,callback){

 instance= new MyMsgConstructor({
     data:{
         message:msg
    },
    methods:{
        onClose:callback
    } 
})

這裏的參數和原始參數是合併的關係，而不是覆蓋。這個時候再調用的地方修改下，就能夠執行回調了。

   test(){
      this.$mymsg("hello vue",()=>{
        console.log("closed..")
      });
    },

你能夠直接重寫close方法，但這樣不推薦，由於可能搞亂以前的邏輯且可能存在重複的編碼。如今就靈活多了。

統一管理

若是隨着自定義動態組件的增長，在main.js中逐個添加就顯得很繁瑣。因此這裏咱們可讓widgets提供一個統一的出口，往後也方便複用。在widgets下新建一個index.js

import MyMsg from './alert/src/main.js';

const components = [MyMsg];

let install =function(Vue){
  components.map(component => {
    Vue.component(component.name, component);
  });

 Vue.prototype.$mymsg = MyMsg;

}

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
};

export default {
    install
}

在這裏將全部自定義的組件經過Vue.component註冊。最後export一個install方法就能夠了。由於接下來要使用Vue.use。

安裝 Vue.js 插件。若是插件是一個對象，必須提供 install 方法。若是插件是一個函數，它會被做爲 install 方法。install 方法將被做爲 Vue 的參數調用。

也就是把全部的組件當插件提供：在main.js中加入下面的代碼便可。

...
import VueResource from 'vue-resource'
import Widgets from './Widgets/index.js'

...
Vue.use(Widgets)

這樣就很簡潔了。

小結：經過Vue.extend和Vue.use的使用，咱們自定義的組件更具備靈活性，並且結構很簡明，基於此咱們能夠構建本身的UI庫。以上來自於對Element源碼的學習。

widgets部分源碼：http://files.cnblogs.com/files/stoneniqiu/widgets.zip

相關標籤/搜索

每日一句

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