# vue3-vite-elementPlus-ts

**Repository Path**: dengxiaoning/vue3-vite-elementPlus-ts

## Basic Information

- **Project Name**: vue3-vite-elementPlus-ts
- **Description**: 使用vue3，vite2，element-plus和typescript搭建一个项目框架，包含动态路由，路由拦截鉴权等功能。已完善功能 1、整合富文本quill 2、整合行政区划elui 3、增加动态创建form 4、增加对象深度拷贝
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-03-18
- **Last Updated**: 2024-06-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
    <a href="https://npmjs.com/package/node"><img src="https://img.shields.io/node/v/vite.svg" alt="node compatility"></a>
    <a href="https://npmjs.com/package/npm"><img src="https://img.shields.io/badge/npm-v6.14.10-blue" alt="npm package"></a>
    <a href="https://npmjs.com/package/vue"><img src="https://img.shields.io/badge/vue-v3.0.5-success" alt="vue package"></a>
    <a href="https://npmjs.com/package/vite"><img src="https://img.shields.io/badge/vite-v2.6.10-blue" alt="vite package"></a>
    <a href="https://jestjs.io"><img src="https://github.com/openlayers/openlayers/workflows/Test/badge.svg" alt="Test Status"></a>
</p>

## 数据管理平台(skeletal-sys)

## 简介

数据管理平台：集成数据管理，文档管理，项目管理等功能模块
涉及模块，菜单，操作功能权限管理分配等功能模块，目前该系统
为初版骨架型，未涉及太多其它功能模块，只有搭建了一个大的
骨架，其它功能模块需要自行添加完善,自由发挥

## 目录结构

```md
├── public # 静态资源
│ ├── config.js # 配置文件
| └── favicon.ico # favicon 图标
├── src # 源代码
| ├── api # api 请求
| ├── assets # 主题 变量等资源
| | ├── scss # scss 变量
| | └──theme # elemet 主题
| ├──components # 全局公共组件
| ├──hooks # 全局 hooks
| ├── config # 全局公共配置
| ├── layout # 全局 layout
| ├── locale # 国际化
| ├── plugin # 三方插件
| ├── router # 全局路由
| ├── store # 全局 vuex
| ├── utils # 全局公用方法
| ├── views # 所有页面
| ├── App.tsx # 入口页面
| ├── main.ts # 入口文件
| ├── permission.ts #权限认证
| └── shims-vue.d.ts # ts 声明文件
├── static # 静态资源
| ├── img # img
| └── svg # svg
├── .editorconfig # editorconfig
├── .env.development # 环境变量 开发
├── .env.production # 环境变量 生产
├── .eslintignore # eslintignore
├── .eslintrc.js # eslint 配置项
├── .gitignore # gitignore
├── .babelrc # babel 配置项
├── index.html # html 模板
├── package.json # package.json
├── README.md # README
├── tsconfig.json # tsconfig
└── vite.config.ts # vite 配置文件
```

##

## 项目演示

- 登录
  ![loginpage](https://github.com/dengxiaoning/vue3-vite-elementPlus-ts/blob/master/src/assets/image/example/loginpagenew.png)
- 首页
  ![mainpage](https://github.com/dengxiaoning/vue3-vite-elementPlus-ts/blob/master/src/assets/image/example/firstPage.gif)
- 二维
  ![twodimensional](https://github.com/dengxiaoning/vue3-vite-elementPlus-ts/blob/master/src/assets/image/example/twoDimensional.gif)
- 三维
  ![threedimensional](https://github.com/dengxiaoning/vue3-vite-elementPlus-ts/blob/master/src/assets/image/example/threeDimensional.gif)

## 项目设置

```
yarn  or  npm install
```

### 编译开发环境

```
yarn dev  or  npm run dev
```

### 编译正式环境

```
yarn build or npm run build
```

## iconify 使用方法

[官网 https://icon-sets.iconify.design](https://icon-sets.iconify.design)

```
 <CIcon icon-class="bx:time-five" icon-color="#333" />
```

## 浏览器支持

本地开发推荐使用`Chrome 80+` 浏览器

支持现代（chrome，Firefox，Microsoft edge，etc.）浏览器, 不支持 IE

## 在线预览

https://www.benpaodehenji.com/csdata