mky-vent-base/README.md

VentAnaly_2.0_front

系统v2.0前端代码仓库

前言

本项目以jeecgboot为模板，请先阅读此文档后继续！

开始

建议：安装 nvm 或其他 nodejs 版本管理器，使用 VSCode 作为 IDE，使用 Chrome/Edge 浏览器；

1. 在项目目录下执行 pnpm install

2. 在项目目录下执行 git config commit.template .github/COMMIT_TEMPLATE

开发

开发的基本流程，部分内容可忽略

git pull # 可以rebase

git checkout [branch] # 可选

nvm use 20 # 建议，高版本node自带pnpm包管理器

pnpm dev # 必选，dddd

git add .

git commit # 公用模板见.github/COMMIT_TEMPLATE

git push origin [branch] # 目前master分支无保护，可直接推

构建

pnpm build

主题

主题可以在 /views/vent/sys/setting/index.vue 中找到设置入口

常规的颜色、变量在 /design/color.less 或 /design/themify/ 下添加，图片资源应在 /assets/images/themify/ 下添加

各个页面的主题化标准模板可以参考登录页 /views/sys/login/Login.vue

下面是配合主题化使用的工具，输入页面的 css 样式，即可输出标准模板所需的资源

// 使用前请确保：1、所有需主题化的 url 引入请以 url(/@/xxx/xxx.yyy) 格式声明。2、除去注释。
function themifyScript(str) {
  const reg = /url\('?(\/[@|0-9|a-z|A-Z|\-|_]+)+.(png|svg)'?\)/g;
  let strcopy = str;
  let res = reg.exec(str);
  let varstr = '';
  while (res) {
    const [url, image] = res;
    const varname = `--image-${image.replace('/', '')}`;
    varstr += `${varname}: ${url};`;
    strcopy = strcopy.replace(url, `var(${varname})`);
    res = reg.exec(str);
  }

  return [varstr, strcopy];
}