封装公共组件中在main.js中通过插件统一注册

插件:插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码(也可以注册组件)

https://cn.vuejs.org/guide/reusability/plugins.html

全局注册组件:https://cn.vuejs.org/guide/components/registration.html

javascript 复制代码
import { App } from 'vue'
import table from './src/index.vue' //引入组件

// 让这个组件可以通过use的形式使用
export default {
  install(app: App) {
    app.component('m-table', table) //插件为注册组件
  }
}
javascript 复制代码
import { App } from 'vue'
// 每一个引入的都是一个插件
import chooseArea from './chooseArea' 
import chooseIcon from './chooseIcon'
import trend from './trend'
import notification from './notification'
import list from './list'
import menu from './menu'
import chooseTime from './chooseTime'
import chooseDate from './chooseDate'
import progress from './progress'
import chooseCity from './chooseCity'
import form from './form'
import modalForm from './modalForm'
import table from './table'
import calendar from './calendar'

const components = [
  chooseArea,
  chooseIcon,
  trend,
  notification,
  list,
  menu,
  chooseTime,
  chooseDate,
  chooseCity,
  progress,
  form,
  modalForm,
  table,
  calendar
]

export default {
  install(app: App) {
    // 循环中使用插件
    components.map(item => {
      app.use(item)
    })
  }
}

最后可以在main.js

javascript 复制代码
import mUI from './components'

app.use(use(mUI))
相关推荐
2601_9498095915 分钟前
flutter_for_openharmony家庭相册app实战+我的Tab实现
java·javascript·flutter
Up九五小庞26 分钟前
开源埋点分析平台 ClkLog 本地部署 + Web JS 埋点测试实战--九五小庞
前端·javascript·开源
摘星编程1 小时前
React Native + OpenHarmony:UniversalLink通用链接
javascript·react native·react.js
qq_177767371 小时前
React Native鸿蒙跨平台数据使用监控应用技术,通过setInterval每5秒更新一次数据使用情况和套餐使用情况,模拟了真实应用中的数据监控场景
开发语言·前端·javascript·react native·react.js·ecmascript·harmonyos
烬头88211 小时前
React Native鸿蒙跨平台应用实现了onCategoryPress等核心函数,用于处理用户交互和状态更新,通过计算已支出和剩余预算
前端·javascript·react native·react.js·ecmascript·交互·harmonyos
程序员清洒3 小时前
Flutter for OpenHarmony:Text — 文本显示与样式控制
开发语言·javascript·flutter
雨季6663 小时前
Flutter 三端应用实战:OpenHarmony 简易“动态内边距调节器”交互模式深度解析
javascript·flutter·ui·交互·dart
天人合一peng4 小时前
Unity中button 和toggle监听事件函数有无参数
前端·unity·游戏引擎
会飞的战斗鸡4 小时前
JS中的链表(含leetcode例题)
javascript·leetcode·链表
方也_arkling4 小时前
别名路径联想提示。@/统一文件路径的配置
前端·javascript