ym-table-tpl v0.0.22

导出组件index.js配置

import 组件名称 from "组件路径";

//按需引入
export { 组件名称 };

const components = [组件名称];

const install = (App) => {
  components.forEach((item) => {
    //item.name中的neme取的是组件的name
    App.component(item.name, item);
  });
};

export default {
  install,
};

vite.config.js配置

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from "path";
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
  plugins: [
    vue(),
    //专门用来解析第三方组件sTable的dom结构
    Components({
      resolvers: [
        (componentName) => {
          if (componentName.startsWith('@surely-vue'))
            return { name: '组件名称', from: '@surely-vue/table' }
        },
      ]
    })
  ],
  build: {
    outDir: 'lib',
    lib: {
      entry: resolve(__dirname, 'package/index.js'),// 设置入口文件
      name: '组件名称',// 起个名字，安装、引入用
      fileName: '打包后的文件名',
    },
    rollupOptions: {
      // 确保外部化处理不想打包进库的依赖
      external: ['vue','@surely-vue/table'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
})

package.json配置

{
  "name": "制品名称-跟组件name保持一致",
  "private": false,
  "version": "0.0.1",//版本号，每次更新注意修改
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "files": [
    "lib" //打包模式：库模式
  ],
  "main": "lib/入口js名称.umd.cjs", //包函数入口
  "module": "lib/入口js名称.js",//ESM标准入口
  "exports": {
    "./lib/style.css":"./lib/style.css", //导出样式
    ".": {
      //向外暴露的文件 node规范
      "import": "./lib/向外暴露js名称.js",
      "require": "./lib/向外暴露js名称.umd.cjs"
    }
  },
  "dependencies": {
    "@surely-vue/table": "^2.4.9", //s-table
    "unplugin-vue-components": "^0.22.4", //用于解析s-table所必须的
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@types/node": "^18.7.15",
    "@vitejs/plugin-vue": "^3.1.0",
    "vite": "^3.1.0"
  }
}

npm publish前请先本地打包

使用方式

全局引用：示例（后续正式发布后修改）

import { createApp } from 'vue'
import App from './App.vue'
import tableTpl from 'ym-wd-table'
import 'ym-wd-table/lib/style.css'

createApp(App).use(tableTpl).mount('#app')

wd-table使用说明（demo示例非正式）