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

news2024/11/28 18:49:37

由于官方不能直接使用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"
  }
}

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

el-select实现el-option可编辑

鼠标悬浮出现编辑图标 点击编辑图标对选择项进行修改 核心代码如下&#xff0c;注意el-input不要使用focus&#xff0c;会导致el-select面板收起来&#xff1b;使用click.native.stop即可 <el-select v-model"value" placeholder"选择" style"widt…

酷雷曼无人机技能培训考试圆满举办

2023年7月18日、19日&#xff0c;以“向云端起航&#xff0c;让技术落地”为主题的酷雷曼无人机技能提升培训会在酷雷曼北京运营中心隆重举行&#xff0c;来自全国各地的众多合作商参加了本次培训&#xff0c;通过系统、全面的学习成功取得了专业无人机飞行员执照&#xff0c;为…

基于linux下的高并发服务器开发(第三章)- 3.10 死锁

deadlock.c #include <stdio.h> #include <pthread.h> #include <unistd.h>// 全局变量&#xff0c;所有的线程都共享这一份资源。 int tickets 1000;// 创建一个互斥量 pthread_mutex_t mutex;void * sellticket(void * arg) {// 卖票while(1) {// 加锁pt…

十、正则表达式详解:掌握强大的文本处理工具(二)

文章目录 &#x1f340;多字符匹配&#x1f340;匹配规则的代替&#x1f340;特殊的匹配&#x1f340;特殊的匹配plus&#x1f340;总结 &#x1f340;多字符匹配 星号&#xff08;*&#xff09;&#xff1a;匹配0个或者多个字符 import retext 111-222-333 result re.matc…

Cardboard for Pictures(cf)

Mircea有n张照片&#xff0c;第 i 张照片的是边长为si的正方形&#xff0c;他把每张照片都装在一块正方形的硬纸板上&#xff0c;这样每张照片的四周都有一个w厘米的硬纸板边框。他总共用了 c 立方厘米见方的硬纸板。给定图片大小和值c&#xff0c;求w。&#xff08;请注意&…

Java-API简析_java.net.InetSocketAddress类(基于 Latest JDK)(浅析源码)

【版权声明】未经博主同意&#xff0c;谢绝转载&#xff01;&#xff08;请尊重原创&#xff0c;博主保留追究权&#xff09; https://blog.csdn.net/m0_69908381/article/details/131870760 出自【进步*于辰的博客】 因为我发现目前&#xff0c;我对Java-API的学习意识比较薄弱…

Dubbogo 详解

Dubbogo 详解 简介 dubbo功能很强大的微服务开发框架&#xff0c;支持多种通信协议&#xff0c;并具有流量治理的功能。 dubbo在有了大转变&#xff0c;拥抱了云原生&#xff0c;从哪些方面可以体现呢&#xff1f; 推出了自己的Trip协议修复了服务发现的级别&#xff0c;之…

Bug竞技场【已经修复】

目录 1.基础知识 2.最佳组合 2.1 铁男-螳螂 2.2 弟弟组合 海克斯抽卡bug 1.基础知识 背景&#xff1a;美测服-美服-马服-可以有效地减少bug率 复盘是为了更好的战斗&#xff01; 提前观看一些视频资料也是如此。 通过看直播博主的经验&#xff0c;可以让你关注到本来对战的…

利用Canvas根据经纬度绘制轨迹(一)

根据经纬度坐标绘制轨迹图形 一段时间没更新了&#xff0c;主人最近有点懒~ 前段时间有个需求&#xff0c;在uniapp App端实现轨迹绘制&#xff0c;于是先用html实现看看效果~ 效果图 html <canvasid"canvasId"width"300"height"300"style&…

DOS命令(windows)

DOS命令&#xff08;windows&#xff09; 目录 1. 打开命令提示符。2. 切换至根。3. 当前路径。4. 切换至上级路径。5. 查看当前目录。6. 查看文件内容。7. 删除文件。8. 进入长文件夹名时缩写。9. 复制文件。10. 移动文件。 1. 打开命令提示符。 命令&#xff1a;winR 输入&a…

【Go】Go 语言开发工具GoLand 使用(二十二)

往期回顾&#xff1a; Go 语言教程–介绍&#xff08;一&#xff09;Go 语言教程–语言结构&#xff08;二&#xff09;Go 语言教程–语言结构&#xff08;三&#xff09;Go 语言教程–数据类型&#xff08;四&#xff09;Go 语言教程–语言变量&#xff08;五&#xff09;Go …

STM32外设系列—TB6612FNG

本文涉及到定时器和串口的知识&#xff0c;详细内容可见博主STM32速成笔记专栏。 文章目录 一、TB6612简介二、TB6612使用方法2.1 TB6612引脚连接2.2 控制逻辑2.3 电机调速 三、实战项目3.1 项目简介3.2 初始化GPIO3.3 PWM初始化3.3 电机控制程序3.4 串口接收处理函数 一、TB66…

PHP反序列化漏洞之魔术方法

一、魔术方法 PHP魔术方法&#xff08;Magic Methods&#xff09;是一组特殊的方法&#xff0c;它们在特定的情况下会被自动调用&#xff0c;用于实现对象的特殊行为或提供额外功能。这些方法的名称都以双下划线开头和结尾&#xff0c;例如: __construct()、__toString()等。 …

java项目之网络视频播放器(ssm+mysql+jsp)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的网络视频播放器。技术交流和部署相关看文章末尾&#xff01; 开发环境&#xff1a; 后端&#xff1a; 开发语言&#xff1a;Java 框架&a…

Arduino RP2040 两个CDC虚拟串口通讯

Arduino RP2040 两个CDC虚拟串口通讯 &#x1f3ac;通讯效果演示&#xff1a; &#x1f33f;基于Earle F. Philhower的固件开发平台&#xff1a; https://github.com/earlephilhower/arduino-pico&#x1f516;USB配置参考&#xff1a;https://arduino-pico.readthedocs.io/en/…

【算法基础:数学知识】4.1 质数

文章目录 质数例题列表866. 试除法判定质数&#xff08;质数的判定&#xff09;867. 分解质因数&#xff08;&#xff09;868. 筛质数埃氏筛欧氏筛 / 线性筛 相关链接 质数 定义&#xff1a;质数是指在大于1的自然数中&#xff0c;除了1和它本身以外不再有其他因数的自然数。 …

安装Electron时报错command sh -c node install.js

在安装Electron报如下错误 在指令后面添加 --ignore-scripts&#xff0c;意思是npm 将不会运行在package.json中指定的scripts npm install --save -dev electron --ignore-scripts

Linux系统安装部署MySQL完整教程(图文详解)

前言&#xff1a;最近网上翻阅了大量关于Linux安装部署MySQL的教程&#xff0c;在自己部署的时候总是存在一些小问题&#xff0c;例如&#xff1a;版本冲突&#xff0c;配置失败和启动失败等等&#xff0c;功夫不负有心人&#xff0c;最后还是安装部署成功了&#xff0c;所以本…

《TCP IP网路编程》第九章

第 9 章 套接字的多种可选项 我们进行套接字编程时往往只关注数据通信&#xff0c;而忽略了套接字具有的不同特性。但是&#xff0c;理解这些特性并根据实际需要进行更改也很重要。下面列出了一些套接字可选项。 从表中可以看出&#xff0c;套接字可选项是分层的。 IPPROTO_IP …

[java安全]TemplatesImpl在Shiro550反序列化

文章目录 【java安全】TemplatesImpl在Shiro550反序列化Shiro的原理Shiro反序列化产生演示攻击过程payload使用key加密 构造不含数组的GadGets简单调用链 改造cc6为CommonsCollctionsShiro完整POC触发Shiro550漏洞进阶POC总结 【java安全】TemplatesImpl在Shiro550反序列化 Sh…