Pc-test-ui NPM

plugin-vue-components

vue3+ts组件,支持unplugin-vue-components按需引入

安装

npm i -S plugin-vue-components

引入

方式一按需手动引入

main.ts引入样式

import "plugin-vue-components/dist/style.css"//引入样式

vue组件中使用

<template>
            <IoUpload>IoUpload</IoUpload>
            <IoList></IoList>
</template>
 import { Upload as IoUpload, List as IoList } from 'plugin-vue-components'

方式二基于unplugin-vue-components按需引入

   npm install --save unplugin-vue-components

vite.config.ts文件中添加配置

import Components from 'unplugin-vue-components/vite'
plugins:[
    Components({
      resolvers: [
       (componentName) => {
          if (componentName.startsWith('Io'))
            return { name: componentName, from: 'plugin-vue-components' }
        },
      ],
]

方式三（推荐使用）基于unplugin-vue-components按需自动引入

   npm install -D unplugin-vue-components

vite.config.ts文件中添加配置

import Components from 'unplugin-vue-components/vite'
import IoUIResolver from 'plugin-vue-components/resolver'
plugins:[
    Components({
      resolvers: [
       IoUIResolver(),
      ],
]

废弃,在main.ts全局注册

import IoComponents from 'plugin-vue-components'
import "plugin-vue-components/dist/style.css"//引入样式
    
const app = createApp(App)
app.use(IoComponents)
app.mount('#app')