静态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"
  }
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/43259.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【学习笔记】Unity基础(十)【Unity界面之Scene窗口工具栏】

目录 一 总览二 Scene 视图导航2.1 Orientation 场景视角2.2 场景视角的移动、旋转和缩放2.3 场景对象聚焦 三 对象可见性与场景可见性3.1 对象可见性控件3.2 场景可见性控件3.3 Isolate selected GameObjects 四 Overlays五 Position GameObjects5.1 Transform Tools5.2 Tool …

设计模式与技术场景面试题详解

工厂方法模式 简单工厂模式 工厂方法模式 抽象工厂模式 策略模式 工厂模式策略模式(登录案例) 责任链模式 技术场景 单点登录怎么实现 权限认证是如何实现的 上传数据的安全性你们怎么控制 你负责的项目遇到了哪些棘手的问题?怎么解决的 你们…

部署ELK+Kafka+Filebeat日志收集分析系统

部署ELKKafkaFilebeat日志收集分析系统 文章目录 部署ELKKafkaFilebeat日志收集分析系统一、ELK 简介1、ELK日志分析系统组成2、Elasticsearch(es)3、Logstash4、Kibana5、日志处理步骤 二、Elasticsearch介绍1、Elasticsearch核心概念2、开启分片副本的…

用户管理功能

后端 # 获取用户列表 bp.get("/user/list") def user_list():users UserModel.query.order_by(UserModel.join_time.desc()).all()user_list [user.to_dict() for user in users]return restful.ok(datauser_list)# 用户是否可用 bp.post("/user/active"…

kettle开发-Day40-AI分流之case/switch

前言: 前面我们讲到了很多关于数据流的AI方面的介绍,包括自定义组件和算力提升这块的,今天我们来学习一个关于kettle数据分流处理非常重要的组件Switch / Case 。当我们的数据来源于类似日志、csv文件等半结构化数据时,我们需要在…

Java多线程基础复习

文章目录 多线程1.进程进程属性并发和并行虚拟地址空间 2.线程概念线程的创建方式 3.Thread类常见构造方法和属性线程的状态优先级后台线程线程是否存活start和run 4. 线程的一些基本操作线程中断(interrupted)线程等待joincurrentThread(获取当前线程引用&#xff…

pytest常用执行参数详解

1. 查看pytest所有可用参数 我们可以通过pytest -h来查看所有可用参数。 从图中可以看出,pytest的参数有很多,下面是归纳一些常用的参数: -s:输出调试信息,包括print打印的信息。-v:显示更详细的信息。…

hdu7298 Coin(网络流+按时间拆点)

题目 t(t<10)组样例&#xff0c;每次给n(n<3e3)个人&#xff0c; 第i个人&#xff0c;在任意时刻&#xff0c;都最多只能有ai(1<ai<3e3)个硬币 其中k(k<n)个是小F的朋友&#xff0c;依次用点号的形式给出 初始时&#xff0c;每个人都有一个硬币&#xff0c;…

opencv 图像腐蚀膨胀 erode dilate

#include "iostream" #include "opencv2/opencv.hpp" using namespace std; using namespace cv;int main() {Mat img, dst, dstbin, distancetransform,rel, rel2;img imread("m3.jpg");//转为灰度图cvtColor(img, dst, COLOR_BGR2GRAY);//二…

(css)自定义登录弹窗页面

(css)自定义登录弹窗页面 效果&#xff1a; 代码&#xff1a; <!-- 登录弹窗 --> <el-dialog:visible.sync"dialogVisible"title"用户登录"width"25%"centerclass"custom-dialog":show-close"false":close-on-cli…

动态规划入门第2课,经典DP问题1 --- 线性

动态规划要点 阶段的2个方向&#xff1a;从上到下&#xff1b;从下到上。 动态规划要点 从递归到DP 动态规划要点 两个2个方向 优化的可能性 第1题 合唱队形 N位同学站成一排&#xff0c;音乐老师要请其中的(N-K)位同学出列&#xff0c;使得剩下的K位同学排成合唱队形…

macOS coreAudio 之 AudioQueue 播放本地音频文件

macOS的音频模块使用还是和 iOS有细微差别的。 今天记录是的是 使用 AudioQueue 配合 AudioFile 进行播放macOS 本地音频文件 本文打仓库代码为&#xff1a; JBPlayLocalMusicFile.m CoreAudio 作为Apple音频系统中音频库的集合&#xff0c;今天需要使用到的库为&#xff1a…

Spring Cloud Gateway - 新一代微服务API网关

Spring Cloud Gateway - 新一代微服务API网关 文章目录 Spring Cloud Gateway - 新一代微服务API网关1.网关介绍2.Spring Cloud Gateway介绍3.Spring Cloud Gateway的特性4.Spring Cloud Gateway的三大核心概念5.Gateway工作流程6.Gateway核心配置7.动态路由8.Predicate自定义P…

【腾讯云 Cloud Studio 实战训练营】使用Cloud Studio制作蛋仔派对兑换码工具

目录 &#x1f373;前言&#x1f373;实验介绍&#x1f373;产品介绍&#x1f373;抓包分析&#x1f603;登录分析&#x1f603;&#x1f603;第一步&#xff0c;获取验证码&#x1f603;&#x1f603;第二步&#xff0c;保存验证码&#x1f603;&#x1f603;第三步&#xff0…

山西电力市场日前价格预测【2023-07-24】

日前价格预测 预测明日&#xff08;2023-07-24&#xff09;山西电力市场全天平均日前电价为338.25元/MWh。其中&#xff0c;最高日前电价为377.59元/MWh&#xff0c;预计出现在20: 30。最低日前电价为283.56元/MWh&#xff0c;预计出现在13: 30。 价差方向预测 1&#xff1a;实…

LiveNVR监控流媒体Onvif/RTSP功能-支持无人机、IPC等设备RTMP推流转码分发H5无插件播放也支持GB28181输出

LiveNVR支持无人机、IPC等设备RTMP推流转码分发H5无插件播放也支持GB28181输出 1、无人机推流转国标2、获取RTMP推流地址2.1、RTMP推流地址格式2.2、推流地址示例 2、设备RTMP推流3、配置拉转RTMP3.1、直播流地址格式3.2、直播流地地址示例3.3、通道配置直播流地址 4、配置级联…

精准测试之分布式调用链底层逻辑

目录 前言&#xff1a; ⼀、分布式调⽤链系统概述 分布式架构所带来的问题 分布式链路监控的作用 ⼆、调用链系统的演进 链路监控系统列表 三、调用链系统的底层实现逻辑 调用链系统的本质 调用链基本元素 事件捕捉 事件串联 事件的开始与结束 上传 四、Span 内容…

Stable Diffusion如何生成高质量的图-prompt写法介绍

文章目录 Stable Diffusion使用尝试下效果prompt的编写技巧prompt 和 negative promptPrompt格式Prompt规则细节优化Guidance Scale 总结 Stable Diffusion Stable Diffusion是一个开源的图像生成AI系统,由Anthropic公司开发。它基于 Transformer模型架构,可以通过文字描述生成…

WAIC2023:图像内容安全黑科技助力可信AI发展

目录 0 写在前面1 AI图像篡改检测2 生成式图像鉴别2.1 主干特征提取通道2.2 注意力模块2.3 纹理增强模块 3 OCR对抗攻击4 助力可信AI向善发展总结 0 写在前面 2023世界人工智能大会(WAIC)已圆满结束&#xff0c;恰逢全球大模型和生成式人工智能蓬勃兴起之时&#xff0c;今年参…

Two Days wpf 分享 分页组件

迟来的wpf分享。 目录 一、序言 二、前期准备 三、前端界面 四、后台代码部分 1、先定义些变量后面使用 2、先是按钮事件代码。 首页按钮 上一页按钮 下一页按钮 末尾按钮 画每页显示等数据 每页显示多少条 判断是否为数字的事件 分页数字的点击触发事件 跳转到…