# vue3-admin-element-template

**Repository Path**: KeyaLiu/vue3-admin-element-template

## Basic Information

- **Project Name**: vue3-admin-element-template
- **Description**: 🎉 基于 Vue3、Vite2、Element-Plus、Vue-i18n、Vue-router4.x、Vuex4.x、Echarts5等最新技术开发的中后台管理模板,完整版本 vue3-admin-element 正在开发完善中
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://hu-snail.gitee.io/vue3-admin-element-template
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 77
- **Created**: 2025-02-08
- **Last Updated**: 2025-02-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center"><img src="https://gitee.com/hu-snail/vue3-admin-element-template/raw/master/src/assets/logo.png"/></div>

<h1 align="center">Vue3 admin element template</h1>

> Vue3-admin-element-template 是 Vue3-admin-element的精简版本，去掉了完整版本中丰富的组件库。项目使用的是`Composition Api`、和`<script setup>`新语法糖风格编写。

## 前言

`Vue3-admin-element-template`项目是`js`版本,相信有部分刚入门的程序员不熟悉`ts`编写，在github上查找了关于vue3中后台模板,大部分都是基于ts版本。所以决定自己写一个基于js版本的中后台模板，当然如果您很熟练ts建议您使用它！不熟悉的建议您开始纳入学习计划。后期准备用ts和[Naiveui](https://www.naiveui.com/zh-CN/light)开发一套开箱即用的中后台模板。

## 简介

`Vue3-admin-element-template`是一个免费开源的中后台模板你，使用了最新的`vue3`、`vite2` 等主流技术开发，开箱即用的中后台前端解决方案。

项目目的：

- 学习`Vue3`相关Api
- 掌握`Vite2`插件机制、构建配置

提示：项目使用<script setup> 新语法编写，会有黄色警告信息，不用理会！！！

在线预览地址：https://hu-snail.gitee.io/vue3-admin-element-template 

## 特性

- 最新技术栈：vue3.2.12/vite2
- Javascript版本
- 可自定义主题
- vue-i18n国际化方案
- Mock 数据方案
- 权限控制

## vue3资源库
一个收集vue3资源的网站，包含web端/移动端/小程序等
在线预览地址：[vue3-resource](https://hu-snail.github.io/vue3-resource)
## 文档

正在编写中......

## 准备

- `Node`: 版本建议 >= 12.0.0 [下载链接](https://nodejs.org/zh-cn/download/)
- `Git`: [版本管理工具](https://www.git-scm.com/download)
- `Visual Studio Code`: [最新版本](https://code.visualstudio.com/Download/)
  - [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) - vue开发必备
  - [Eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)- 脚本代码检查
  - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - 代码格式化
  - [Stylelin](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) - css格式化

## 安装使用

- 获取代码

```sh
git clone https://github.com/hu-snail/vue3-admin-element-template.git
```

- 安装依赖

```sh
yarn install
```

- 运行

```sh
yarn serve
```

- 打包

```sh
yarn build
```

- 本地预览

```sh
yarn preview
```

- 打包/预览

```sh
yarn build:preview
```

## 预览

在线预览地址：https://hu-snail.gitee.io/vue3-admin-element-template 

测试账号：admin/admin 密码可以随意输入

![截图1](https://gitee.com/hu-snail/vue3-admin-element-template/raw/master/src/assets/demo/01.png)

![截图2](https://gitee.com/hu-snail/vue3-admin-element-template/raw/master/src/assets/demo/02.png)

![截图3](https://gitee.com/hu-snail/vue3-admin-element-template/raw/master/src/assets/demo/03.png)

![截图4](https://gitee.com/hu-snail/vue3-admin-element-template/raw/master/src/assets/demo/04.png)

## 浏览器支持

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

支持现代浏览器, 不支持 IE

## 维护者

[@hu-snail](https://github.com/hu-snail/)

## 捐赠

如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持!

<div style="display: flex; justify-content: space-between;"><img width="48%" src="https://gitee.com/hu-snail/vue3-admin-element-template/raw/master/src/assets/wx.jpeg"/><img  width="48%" src="https://gitee.com/hu-snail/vue3-admin-element-template/raw/master/src/assets/zfb.jpeg"/></div>

## License

[MIT © hu-snail-2021](https://github.com/hu-snail/vue3-admin-element-template/blob/master/LICENSE)