静态html引入ucharts并直接使用组件标签

由于官方不能直接使用qiun-vue-ucharts在静态html页面使用。

DIY可视化对此类库进行了改进，把它的包独立打包成一个可以依赖的JS。

首先定义一个核心JS，用于打包生成uchart

import qiunVueUcharts from '@qiun/vue-ucharts';

const install = (app) => {
	app.component(qiunVueUcharts.name, qiunVueUcharts)
}

export default {
	install
}

核心的vite.js对uchart生成vue lib包

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

export default defineConfig(({ mode }) => {
  const isProd = mode === 'prod'
  let build = {}
  if (isProd) {
    build = {
      lib: {
        entry: resolve(__dirname, 'src/index.js'),
        name: 'UchartLib',
        fileName: 'index',
        formats: ['es', 'cjs', 'umd'],
      },
      rollupOptions: {
        external: [
          'vue', 'element-plus'
        ],
        output: {
          globals: {
            'vue': 'Vue'
          },
        },
      },
    }
  }

  return {
    plugins: [vue()],
    build,
    resolve: {
      alias: [
        {
          find: '@',
          replacement: resolve(__dirname, './src'),
        },
      ],
    },
  }
})

核心package.json写法

{
  "name": "diygw-admin-lib",
  "private": true,
  "version": "0.0.0",
  "main": "./dist/index.cjs.js",
  "module": "./dist/index.esm.js",
  "types": "./dist/types/index.d.ts",
  "unpkg": "./dist/index.umd.js",
  "jsdelivr": "./dist/index.umd.js",
  "exports": {
    ".": {
      "import": "./dist/index.es.js",
      "require": "./dist/index.umd.js"
    }
  },
  "files": [
    "dist"
  ],
  "scripts": {
    "dev": "vite",
    "build": "rimraf dist && vite build --mode prod",
    "preview": "vite preview"
  },
  "dependencies": {
    "@qiun/vue-ucharts": "^2.4.3-20220505",
    "@vueuse/core": "^9.1.1",
    "@wangeditor/editor": "^5.1.14",
    "@wangeditor/editor-for-vue": "^5.1.12",
    "element-plus": "^2.2.15",
    "typescript": "^4.8.2",
    "vue": "^3.2.37",
    "vue-draggable-next": "^2.1.1"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.3",
    "rimraf": "^3.0.2",
    "sass": "^1.54.5",
    "vite": "^3.0.7",
    "vue-tsc": "^0.40.4"
  }
}