Element Plus[开源]Vue3、Element-Plus、TypeScript4、Vite3的后台集成方案vue3引入组件居然可以这样,
日期:2023/03/23 14:47作者:陈政倩人气:
导读:一飞开源,介绍创意、新奇、有趣、实用的免费开源应用、系统、软件、硬件及技术,一个探索、发现、分享、使用与互动交流的开源技术社区平台。致力于打造活...
一飞开源,介绍创意、新奇、有趣、实用的免费开源应用、系统、软件、硬件及技术,一个探索、发现、分享、使用与互动交流的开源技术社区平台。致力于打造活力开源社区,共建开源新生态!
一、开源项目简介
vue-element-plus-admin 是一个基于 element-plus 免费开源的中后台模版。使用了最新的vue3,vite4,typescript等主流技术开发,开箱即用的中后台前端解决方案,可以用来作为项目的启动模版,也可用于学习参考。并且时刻关注着最新技术动向,尽可能的第一时间更新。
vue-element-plus-admin 的定位是后台集成方案,不太适合当基础模板来进行二次开发。因为集成了很多你可能用不到的功能,会造成不少的代码冗余。如果你的项目不关注这方面的问题,也可以直接基于它进行二次开发。
如需要基础模版,请切换到 tempalte 分支,tempalte 只简单集成了一些如:布局、动态菜单等常用布局功能,更适合开发者进行二次开发。
二、开源协议
使用MIT开源协议
三、界面展示
四、功能概述
特性
最新技术栈:使用 Vue3/vite4 等前端前沿技术开发
TypeScript: 应用程序级
javascript 的语言
主题: 可配置的主题
国际化:内置完善的国际化方案
自定义数据 内置 Mock 数据方案
权限 内置完善的动态路由权限生成方案
组件 二次封装了多个常用的组件
示例 内置丰富的示例
五、技术选型
前序准备
node 和 git - 项目开发环境Vite4 - 熟悉 vite 特性Vue3 - 熟悉 Vue 基础语法TypeScript - 熟悉
TypeScript 基本语法Es6+ - 熟悉 es6 基本语法Vue-Router-Next - 熟悉 vue-router 基本使用Element-Plus - element-plus 基本使用Mock.js - mockjs 基本语法
安装和使用
获取代码访问一飞开源:https://code.exmay.com/ 下载安装依赖cd vue-element-plus-admin
pnpm install
运行pnpm run dev打包pnpm run build:pro
目录结构
.
├── .github # github workflows 相关
├── .husky # husky 配置
├── .vscode # vscode 配置
├── mock # 自定义 mock 数据及配置
├── public # 静态资源
├── src # 项目代码
│ ├── api # api接口管理
│ ├── assets # 静态资源
│ ├── components # 公用组件
│ ├── hooks # 常用hooks
│ ├── layout # 布局组件
│ ├── locales # 语言文件
│ ├── plugins # 外部插件
│ ├── router # 路由配置
│ ├── store # 状态管理
│ ├── styles # 全局样式
│ ├── utils # 全局工具类
│ ├── views # 路由页面
│ ├── App.vue # 入口vue文件
│ ├── main.ts # 主入口文件
│ └── permission.ts # 路由拦截
├── types # 全局类型
├── .env.base # 本地开发环境 环境变量配置
├── .env.dev # 打包到开发环境 环境变量配置
├── .env.gitee # 针对 gitee 的环境变量 可忽略
├── .env.pro # 打包到生产环境 环境变量配置
├── .env.test # 打包到测试环境 环境变量配置
├── .eslintignore # eslint 跳过检测配置
├── .eslintrc.js # eslint 配置
├── .gitignore # git 跳过配置
├── .prettierignore # prettier 跳过检测配置
├── .stylelintignore # stylelint 跳过检测配置
├── .versionrc 自动生成版本号及更新记录配置
├── CHANGELOG.md # 更新记录
├── commitlint.config.js # git commit 提交规范配置
├── index.
html # 入口页面
├── package.json
├── .post
cssrc.js # postcss 配置
├── prettier.config.js # prettier 配置
├── README.md # 英文 README
├── README.zh-CN.md # 中文 README
├── stylelint.config.js # stylelint 配置
├── tsconfig.json # typescript 配置
├── vite.config.ts # vite 配置
└── windi.config.ts # windicss 配置
六、源码地址
访问一飞开源:https://code.exmay.com/