由于官方不能直接使用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"
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>首页</title>
<link rel="stylesheet" href="common/vant.min.css" />
<script src="common/vue.js"></script>
<script src="common/vant.min.js"></script>
<script src="common/axios.min.js"></script>
<script src="common/Session.js"></script>
<script src="common/Tools.js"></script>
<script src="common/Validate.js"></script>
<script src="common/Page.js"></script>
<script src="common/Http.js"></script>
<script src="common/index.umd.js"></script>
<link rel="stylesheet" href="common/diygw-ui/index.css" />
</head>
<body>
<div id="app">
<div class="container container22828">
<div class="diygw-title diygw-top solid-bottom" style="color: white; background: #07c160">
<div class="title flex1 text-center">首页</div>
</div>
<div style="height: 200px" class="flex diygw-col-24">
<qiun-vue-ucharts type="column" style="width: 100%" :opts="columnOpts" :chart-data="columnData" />
</div>
<div class="clearfix"></div>
</div>
</div>
</body>
<script type="module">
const app = Vue.createApp({
data() {
return {
globalData: { logintype: '0', agree: '0' },
columnOpts: { type: 'column', color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'], padding: [15, 15, 0, 5], xAxis: { disableGrid: true }, yAxis: { data: [{ min: 0 }] }, legend: {}, extra: { column: { type: 'group', width: 30, linearType: 'custom', linearOpacity: 0.9, barBorderCircle: true, activeBgColor: '#000000', activeBgOpacity: 0.08 } } },
columnData: {
categories: ['2018', '2019', '2020', '2021'],
series: [
{ name: '目标值', data: [35, 36, 31, 33] },
{ name: '完成量', data: [18, 27, 21, 24] }
]
}
};
},
created() {
this.init();
},
methods: {
async init() {},
// agree 自定义方法
async agreeFunction(param) {
let thiz = this;
//如果不同意，改为同意
this.globalData.agree = this.globalData.agree == '1' ? '0' : '1';
},
// code 自定义方法
async codeFunction(param) {
let thiz = this;
//如果1表示验证码登录，0表进密码登录
this.globalData.logintype = this.globalData.logintype == '1' ? '0' : '1';
},
// sendMsg 自定义方法
async sendMsgFunction(param) {
let thiz = this;
this.formData.codeFlag = false;
if (!this.form.phone) {
this.showToast('手机号码不能为空');
//不给发送验证码
this.formData.codeFlag = false;
return;
}
let pattern = /^1[3-9]\d{9}$/;
if (!pattern.test(this.form.phone)) {
this.showToast('手机号码输入有误');
//不给发送验证码
this.formData.codeFlag = false;
return;
}
let http_url = '';
//配置后可删除下面的判断
if (!http_url) {
this.showToast('默认发送短信验证地址，配置后可删除此判断');
return;
}
let http_data = {
phone: this.form.phone
};
let http_header = {};
let data = await this.$http.post(http_url, http_data, http_header, 'json');
if (data.code == 0) {
this.showToast(data.msg);
return;
} else {
//修改为true
this.formData.codeFlag = true;
this.$refs.codeCodeRef.start();
this.showToast('验证码已发送');
}
}
}
});
app.use(vant);
app.use(DiygwLib);
app.config.globalProperties.$tools = new Tools();
app.config.globalProperties.$http = httpService;
app.config.globalProperties.$session = Session;
app.mixin({
methods: {
Validate,
setData,
navigateTo,
showModal,
showToast,
uploadImage
}
});
app.mount('#app');
</script>
<style>
.container22828 {
padding-left: 0px;
padding-right: 0px;
}
.container22828 {
padding-top: 45px;
}
</style>
</html>
其实此用法，可以把自己实现的任意组件库生成vue lib,然后在JS引进来就能用了，是不是相当的方便。
![Spring MVC 自学杂记（五） -- SpringMVC与前台的json数据交互[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)