The vue package component is published to npm, and unplugin-vue-components is supported on demand.

Purpose: publish vue packaged components to npm, support unplugin-vue-components on-demand introduction

vue 组件gitee plugin-vue-components
Tool class gitee plugin-validate
taro component gitee plugin-taro-components

This article only introduces the plugin-vue-components component, tools and taro components can directly look at the code
First effect: https://www.npmjs.com/package/plugin-vue-components

plugin-vue-componets

Install

npm i -S plugin-vue-components

introduce

Method 1 Manual import on demand

main.ts import style

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

Used in vue components

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

Method 2 is based on unplugin-vue-components on-demand import

   npm install --save unplugin-vue-components

Add configuration to the vite.config.ts file

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

Method 3 (recommended) automatically import on demand based on unplugin-vue-components

   npm install -D unplugin-vue-components

Add configuration to the vite.config.ts file

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

Obsolete, register globally in 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')

Vue component encapsulation

project structure

insert image description here

create project

npm create vite@latest

Packaging components

Package component upload/upload.vue under the src/packages/components/ directory

<template>
    <div class="upload">上传图片
        <slot></slot>
    </div>
</template>
<style lang="css">
.upload {
    color: red;
    display: flex;
}
</style>

upload/index.ts component registration

import { App } from 'vue'
import Upload from './upload.vue'


Upload.install = (app: App) => {
    app.component(Upload.name, Upload)
}
export {
    Upload
}
export default Upload

Component registration

Create a new index.ts in the src/package/components directory for component registration

import Upload from './components/upload'
import List from './components/list'
import type { App } from 'vue'

const components = [
    Upload,
    List,
]
//注册
const install = (app: App) => {
    components.forEach((component) => {
        app.component(component.name, component)
    })
}
export {
    Upload,
    List
}
export default {
    install
}

Configuration component name, entry, output location

Create a new vite.config.build.ts in the root directory

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import dts from 'vite-plugin-dts'
// 打包后的目录
// https://vitejs.dev/config/
export default defineConfig({
  resolve: {                                       // +++
    alias: {
      '@': resolve(__dirname, './src')         // +++
    }                                            // +++
  },
  plugins: [
    vue(),
    dts(),//使用的typescript，需要生成*.d.ts声明文件
  ],
  //配置打包入口 https://cn.vitejs.dev/guide/build.html#library-mode
  build: {
    lib: {
      entry: resolve(__dirname, 'src/packages/index.ts'),//入口
      name: 'plugin-vue-components',//组件名
      fileName: (format) => `plugin-vue-components.${format}.ts`
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue',
        },
        // dir: resolve(__dirname, 'dist') //打包输出目录
      },
    },
  },
})

The configuration is compatible with unplugin-vue-components and automatically imported on demand

src/resolver.ts processing component import

import type { ComponentResolveResult, ComponentResolver } from 'unplugin-vue-components/types';

function getIoResolved(name: string): ComponentResolveResult {

    const packageName = 'plugin-vue-components';

    const style = `${packageName}/dist/style.css`;

    return {
        name,
        from: packageName,
        sideEffects: style
    };
}

const IoUIResolver = (): ComponentResolver => {
    return {
        type: 'component',
        resolve: (name) => {
            if (name.startsWith('Io')) {
                return getIoResolved(name.slice(2));
            }
        }
    };
}

export {
    IoUIResolver
}
export default IoUIResolver

Root directory vite.config.build.resolver.ts

import { defineConfig } from 'vite';
import path, { resolve } from 'path'
import vue from '@vitejs/plugin-vue';
import dts from 'vite-plugin-dts'

export default defineConfig({
  resolve: {                                       // +++
    alias: {
      '@': resolve(__dirname, './src')         // +++
    }                                            // +++
  },
  plugins: [
    vue(),
    dts(),
  ],
  build: {
    minify: true,
    lib: {
      entry: path.resolve(__dirname, './src/resolver.ts'),
      name: 'name',
      fileName: (format) => {
        if (format === 'es') {
          return 'resolver.mjs';
        } else {
          return 'resolver.cjs';
        }
      },
      formats: ['es', 'cjs']
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        dir: path.resolve(__dirname, './dist')
      }
    },
    emptyOutDir: false
  }
});

Configure package.json

{
  "name": "plugin-vue-components",//插件名
  "private": false,//发布到npm 需要设置false
  "version": "0.1.13",//插件版本号
  "files": [//发布到npm 需要包含的目录和文件
    "dist"
  ],
  "type": "module",
  "style": "./dist/style.css",
  "main": "./dist/plugin-vue-components.umd.ts",//入口
  "module": "./dist/plugin-vue-components.es.ts",
  "typings": "./dist/packages/index.d.ts",//类型
  "exports": {
    ".": {
      "types": "./dist/packages/index.d.ts",// exports优先级高于main、module
      "import": "./dist/plugin-vue-components.es.ts",
      "require": "./dist/plugin-vue-components.umd.ts"
    },
    "./resolver": {//兼容unplugin-vue-components按需自动引入,路径必须一致
      "types": "./dist/resolver.d.ts",
      "import": "./dist/resolver.mjs",
      "require": "./dist/resolver.cjs"
    },
    "./*": [
      "./*",
      "./*.d.ts"
    ]
  },
  "typesVersions": {
    "*": {
      "*": [
        "./dist/*",
        "./*"
      ]
    }
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build && vite build --config vite.config.build.ts && vite build --config vite.config.build.resolver.ts ",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@types/node": "^20.2.5",
    "@vitejs/plugin-vue": "^4.2.3",
    "sass": "^1.62.1",
    "typescript": "^5.1.3",
    "unplugin-vue-components": "^0.25.0",
    "vite": "^4.3.9",
    "vite-plugin-dts": "^2.3.0",
    "vue-tsc": "^1.6.5"
  },
  "description": "### 安装 * npm install --save plugin-vue-components",
  "repository": {
    "type": "git",
    "url": "https://gitee.com/jiangzhuqingfeng/plugin-vue-componets.git"
  },
  "keywords": [
    "io"
  ],
  "author": "[email protected]",
  "license": "ISC"
}

compile and publish to npm

npm run build compile
npm publish publish to npm

npm common commands

npm config get registry View npm mirror
npm config set registry https://registry.npmjs.org set mirror
Taobao mirror https://registry.npm.taobao.org
npm mirror https://registry.npmjs.org
npm login login
npm login --auth-type=legacy
npm whoami Check if the current user is logged in
npm logout https://registry.npmjs.org Log out of the mirror
npm publish publish