可视化架构图
开源地址
vant
http://mui.ucmed.cn/#/zh-CN/image
vue案例
https://gitee.com/rg1008/dashboard/programs/220657/projects/rg1008/rg3-cli-community/
vue结构
https://gitee.com/rg1008/dashboard/programs/220657/projects/rg1008/rg3-cli-struct/
微信小程序
https://gitee.com/rg1008/dashboard/programs/220657/projects/rg1008/rg3-webchatmini-community/
- 前端开发定义
前端用于数据可视化实现,采用html5+css3+vue+query+echart+leaflet等框架进行开发。 - 根目录配置使用
//项目项目私有图片根目录
this.$appConfig.imgRootO "/images/rg"
//静态公共图片根目录
this.$appConfig.imgRoot "/images"
//接口根目录
this.$appConfig.api.root "//api.rg1008.com",
//附件上传根目录
this.$appConfig.api.upload "//api.rg1008.com/bo/api/v3/file/upload",
//当前应用根路径
this.$appNavs.currentRoot "//rg1008.com"
- //vue模板中使用
<div id="appMain" :class="theme" class="g-app-scrollbar">
<div :class="`lang-${lang}`">
{{$appConfig.imgRootO}}
{{$appConfig.imgRoot}}
{{$appConfig.api.root}}
{{$appConfig.api.upload}}
{{$appNavs.currentRoot}}
</div>
</div>
- CSS3静态图片根目录设置(index.html定义全局)
<style>
:root {
/*定义一个变量--box-color*/
--img-root: "/images";
--img-root-o: "/images/<%=htmlWebpackPlugin.options.ownerId%>";
/*使用变量*/
/* background-color: var(--box-color); */
}
</style>
vue.config.js 定义打包变量
config.plugin("html").tap(args => { args[0].cdn = cdn; args[0].env = process.env.NODE_ENV; args[0].title = process.env.VUE_APP_TITLE; args[0].baiduAK = process.env.VUE_APP_BaiDu_AK; args[0].appVersion = cdn.versionMy.appVersion args[0].system = process.env.VUE_APP_System; args[0].ownerId = ownerId; args[0].noPlugins = process.env.VUE_APP_NoPlugins; args[0].security = process.env.VUE_APP_Security; args[0].imageRoot = process.env.VUE_APP_ImageRoot; args[0].imageRootO = process.env.VUE_APP_ImageRootO; return args; });
.env文件设置
NODE_ENV=production VUE_APP_CONFIG=production #//rg1008.com VUE_APP_TITLE=打包标题 VUE_APP_CDN= VUE_APP_webSecurityVI=0 VUE_APP_webSecurityMethod=des VUE_APP_webSecurityKey=rg3xb VUE_APP_OWNERID=rg outputDir=dist-pro/rg VUE_APP_BaiDu_AK=9862E14DE5d373de36cd8e91503044b VUE_APP_System=rg VUE_APP_ImageRoot=/images VUE_APP_ImageRootO=/images/rg VUE_APP_NoPlugins=
文档更新时间: 2024-06-08 07:38 作者:admin