vue 自定义功能封装

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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;
  }
}

使用

this.UserService.loginout();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小萨技术

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值