vue 自定义功能封装

最新推荐文章于 2025-10-25 10:39:48 发布

原创最新推荐文章于 2025-10-25 10:39:48 发布 · 375 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何在Vue项目中进行配置，包括Vue、Vuex、VueResource等库的引入，以及Mint UI组件库的使用。同时，展示了如何注册自定义组件，并通过实例演示了两种扩展Vue功能的方法：通过原型链和插件机制。

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'
import Vuex from 'vuex'
import VueResource from 'vue-resource'
import MintUI from 'mint-ui'
import router from './router'
import Comm from './comm'
import Service from './service'
import MyContainer from './components/MyContainer'
import ArticleContainer from './components/ArticleContainer'
import HeaderContainer from './components/HeaderContainer'

import '../static/css/style.css'
import '../static/css/font/iconfont.css'


Vue.use(VueResource);
Vue.http.options.root = 'http://127.0.0.1:11111';
Vue.http.options.emulateJSON = true;

Vue.use(Vuex);
Vue.use(MintUI);
Vue.use(Comm);
Vue.use(Service);

Vue.component('my-container', MyContainer);
Vue.component('article-container', ArticleContainer);
Vue.component('header-container', HeaderContainer);


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,

})

方式一
comm.js

export default {
  install(Vue) {

    //判断手机号是否正确
    Vue.prototype.IsPhone = function (phone) {
      var isPhone = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/.test(phone);
      return isPhone;
    }

  }
}

方式二
service.js

var vue;

var UserService = {
  loginSuccess(data) {
    localStorage.setItem("LOGIN_USER", JSON.stringify(data));
  },
  loginout() {
    localStorage.removeItem("LOGIN_USER");
    vue.http.post('user/loginout', {});
  },
  getCurrUser() {
    var userStr = localStorage.getItem("LOGIN_USER")
    if (userStr) {
      return JSON.parse(userStr);
    }
    return undefined;
  }
}

export default {
  install(Vue) {
    vue = Vue;
    Vue.prototype.UserService = UserService;
  }
}

使用