可视化架构图

开源地址

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