|
1 | 1 | # vue3-management-system
|
2 |
| -Language: English | [中文简体](README-ZH.md) |
3 | 2 |
|
4 |
| -This template should help get you started developing with Vue 3 in Vite. |
| 3 | +文档语言: [English](README-EN.md) | 中文简体 |
5 | 4 |
|
6 |
| -## Introduce |
| 5 | +基于 Vue3 全家桶开发的后台管理系统,[线上地址在这](https://vue3-management-system.vercel.app/login)。适用于自学 Vue3 的同学,以及外包项目快速交付。 |
7 | 6 |
|
8 |
| -The main branch is used to ensure that you can run it first, and then we will create a branch for requirements |
| 7 | +## 技术栈 |
9 | 8 |
|
10 |
| -## Recommended IDE Setup |
| 9 | +该项目使用技术栈如下: |
11 | 10 |
|
12 |
| -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). |
| 11 | +- [x] Vue 3:前端框架 |
| 12 | +- [x] TypeScript:语言 |
| 13 | +- [x] Vite:打包工具 |
| 14 | +- [x] Pinia:状态管理 |
| 15 | +- [x] Vue Router:路由管理 |
| 16 | +- [x] Element Plus:UI 组件库 |
| 17 | +- [x] Echarts:图表 |
| 18 | +- [x] Axios:网络请求 |
13 | 19 |
|
14 |
| -## Type Support for `.vue` Imports in TS |
| 20 | +## 项目截图 |
15 | 21 |
|
16 |
| -TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. |
| 22 | +登录页: |
| 23 | + |
17 | 24 |
|
18 |
| -If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: |
| 25 | +首页: |
| 26 | + |
19 | 27 |
|
20 |
| -1. Disable the built-in TypeScript Extension |
21 |
| - 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette |
22 |
| - 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` |
23 |
| -2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. |
| 28 | +表格: |
| 29 | + |
24 | 30 |
|
25 |
| -## Customize configuration |
| 31 | +## 安装 |
26 | 32 |
|
27 |
| -See [Vite Configuration Reference](https://vitejs.dev/config/). |
| 33 | +``` |
| 34 | +# 克隆项目 |
| 35 | +git clone https://github.com/HearLing/vue3-management-system.git |
28 | 36 |
|
29 |
| -## Project Setup |
| 37 | +# 进入项目目录 |
| 38 | +cd vue3-management-system |
30 | 39 |
|
31 |
| -```sh |
| 40 | +# 安装依赖 |
32 | 41 | npm install
|
33 |
| -``` |
34 |
| - |
35 |
| -### Compile and Hot-Reload for Development |
36 | 42 |
|
37 |
| -```sh |
| 43 | +# 本地开发,启动服务 |
38 | 44 | npm run dev
|
39 |
| -``` |
40 |
| - |
41 |
| -### Type-Check, Compile and Minify for Production |
42 | 45 |
|
43 |
| -```sh |
| 46 | +# 打包构建 |
44 | 47 | npm run build
|
45 |
| -``` |
46 |
| - |
47 |
| -### Lint with [ESLint](https://eslint.org/) |
48 | 48 |
|
49 |
| -```sh |
| 49 | +# ESLint修复 |
50 | 50 | npm run lint
|
51 | 51 | ```
|
| 52 | + |
| 53 | +## 参考资料 |
| 54 | + |
| 55 | +- [x] [参考项目](https://preview.pro.ant.design/dashboard/analysis) |
| 56 | +- [x] [Vue3 中文文档](https://cn.vuejs.org) |
| 57 | +- [x] [Vue Router 中文文档](https://router.vuejs.org/zh/) |
| 58 | +- [x] [Pinia 中文文档](https://pinia.vuejs.org/zh/) |
| 59 | +- [x] [Element Plus 中文文档](https://element-plus.gitee.io/zh-CN/guide/quickstart.html) |
0 commit comments