# 基于vue3+element-plus的前台press+后台管理多页应用

**Repository Path**: niudidi/weg-element-platform

## Basic Information

- **Project Name**: 基于vue3+element-plus的前台press+后台管理多页应用
- **Description**: 实例：vite4+vue3+typescript+elementplus
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-03-21
- **Last Updated**: 2024-03-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + TypeScript + Vite + Pinia + ElementPlus

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.  
## 本多页应用使用到的技术:
- vite 4.x：vue作者研发并推荐的开箱即用构建工具，同时为项目提供超快热重启开发环境；相对于webpack，Vite更加轻量，并且构建速度足够快。  
- typescript：javascript的超集，es-next努力追求的最终形态语法标准。
- vue 3.x：vue3最新版本。
- vue-router 4.x：vue3下最新的路由。
- pinia 2.x：轻量级状态管理库，vue官方认证取代vuex：完整的 TypeScript 支持，更加轻量体积。
- element-plus 2.x：饿了么UI框架vue3版。
- CKEditor5：最好用的富文本编辑器，当前定制版直接使用在VUE3+vite项目下加载失败，需作特殊的vite配置。
- dataV-vue3：大屏展示应用使用的屏幕缩放适配及图表边框库+装饰库。
- echarts: 著名的统计图表，在本多页应用中，既用在后台管理中心里，也用在大屏展示应用里。
- Nodejs 版本要求：16+

### 更换颜色样式,一共两处地方，直接修改颜色值即可
- src/styles/global.css： main.ts文件引入的全局SCSS样式文件
- src/styles/var.css： 自定义全局css变量、vant4指定变量的值，以实现一处变量变更即全局修改
- src/styles/theme.scss： 修改定义全局的scss使用的$样式变量（对element-plus的几种基本色进行注入式覆盖）
- src/styles/resetui.scss： 修改element-plus部分组件的样式，以适配项目本身UI要求规范

## 暂时无法解决的问题:
多页应用与各入口下各自的history路由，两者不可同时拥有，只能最多一个入口用history模式路由，其它入口用hash模式路由。<br>
不过当从此框架中拆分出单页应用项目时，对拆出的单页应用可自行修改路由为history模式。<br>
hash模式有先天的缺陷：不能使用锚点导航。<br>
ckeditor5：在vite项目中，custom定制版兼容有问题，只能在vite.config.ts中进行专门针对的特殊设置。<br>
<br>
类型“Element”上不存在属性“offsetHeight、offsetWidth、offsetTop、offsetLeft”, 原因：ts中Element类型上没有定义offsetHeight，解决方式：通过`as HTMLDivElement`解决.<br>
“offsetXX”这一类HTMLelement属性，都是只读的
`(_content as HTMLDivElement).offsetHeight`

## 本多页应用共4个入口
main: resolve(__dirname, 'src/pages/index.html'), //前店入口，使用history路由<br>
manager: resolve(__dirname, 'src/pages/manager/index.html'),//后台管理入口，使用hash路由<br>
login: resolve(__dirname, 'src/pages/login/index.html'),//登录页入口，使用hash路由<br>
charts: resolve(__dirname, 'src/pages/charts/index.html'),//大屏展示图表入口，自适应1920及以上大屏幕，使用hash路由（待开发）<br>

## 环境配置文件 /env/.env.xxxx中的配置项
VITE_HOST='localhost' //部署服务地址<br>
VITE_PORT='8002' //部署服务端口<br>
VITE_BASE_URL='http://localhost:8002' //部署后的URL=HOST+PORT<br>
VITE_USE_TOKEN=1  //是否使用token作session会话，1是 0否，使用与cotroller一样的session控制<br>
VITE_MODE='mock'  //当前模式，production表示为生产环境<br>
VITE_LOGO_URL='/logo.svg'  //WEB应用的LOGO的绝对地址，当前值是放在public静态资源目录中的<br>
VITE_ADMIN_NAME='知识库管理中心'  //WEB应用的后台管理中心名称<br>
VITE_APP_NAME='WEG帮助中心'  //WEB应用的前店名称<br>
VITE_KEEP_ALIVE_NUM=20  //使用keep-alive缓存路由页的最大个数，0表示不缓存<br>
VITE_TAGS_VIEW_NUM=20  //后台管理中心里，显示最多已开路由页签的个数，0表示不使用路由页签<br>

### 本项目中所有typescript数据结构定义，均保存在：
src/types/index.ts

## 特别鸣谢
有来开源组织、iView官方、vue-element-plus-admin官方。你们充满灵性的设计与巧妙的实现给我了强大的灵感！

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

## Type Support For `.vue` Imports in TS

Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:

1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.

You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).