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