egova-admin-web

新版统一用户中心前端项目

环境需求：

node>=16.0.0
pnpm>=8.0.0

运行

本地运行

pnpm install
pnpm serve

# 运行项目分支
pnpm serve --mode project

打包

pnpm build

# 打包项目分支
pnpm build --mode project

打包预览

pnpm preview

# 打包预览项目分支
pnpm preview --mode project

打包第三方集成 lib

pnpm run lib
打包后的文件在根目录lib下，
直接发布即可。
npm publish

文件拆分

将 *.vue 组件分散到多个文件中，可以为一个语块使用 src 这个 attribute 来导入一个外部文件

<template src="./template.html"></template>
<style src="./style.css"></style>
<script setup></script> 

如果需要给组件命名，使用了插件 vite-plugin-vue-setup-extend，就可以如下写法

<script src="./script.ts" setup name="xxx"></script>

不使用插件，则如下

<script lang="ts">
export default { name: 'CommonHeader' }
</script>
<script lang="ts" setup></script>

自定义指令集

项目中如果有全局的一些问题，可以通过自定义指令集方式实现，目前实现的有：

v-emoji:限制输入内容，默认只能输入中文，英文，数字。可通过外部传入正则表达式：

例如：

// 输入内容按照 传入的reg正则表达式进行处理
<a-input v-model:value="formData.username" v-emoji="reg"></a-input>

// 不传值，则默认只能输入 中文，英文，数字
<a-input v-model:value="formData.username" v-emoji></a-input>

v-upper:输入框小写转大写

登录页定制

支持登录页定制。

项目文件夹与项目名称

标准版本登录组件与项目版本登录组件以 src/views/login/projects 目录划分，项目名称以公司统一规范的项目命名命名。

开发说明

下述使用 name 指代项目名称：

• 新建 src/views/login/projects/name 文件夹，组件名称命名为 LoginProjectName
• 参考 src/views/login/projects/standard 组件开发登录组件。登录组件所需的变量与函数由 useLogin 函数统一提供，只需要定制编写 <template> 和 <style>。
• 登录入口组件添加动态组件引用 LoginProjectName: defineAsyncComponent(() => import("./projects/name/index.vue"))
• 系统配置项 修改 登录页项目名称 为 name

常见问题

开发环境代理配置

使用环境变量 env.PROXY_PATH_API 定义服务代理地址，变量定义在 .env.development 中：

########## 代理配置 ##########
# 主代理
PROXY_PATH_API=http://192.168.1.1/admin-api

开发时，不建议修改 .env.development 文件，应该新建 .env.development.local 文件定义本地变量。此文件会被 git 忽略，不会提交。

参考文档 环境变量和模式