mod vue2 to vue3
This commit is contained in:
chenhaodong
@@ -0,0 +1,104 @@
|
|||||||
|
# exam-jyt
|
||||||
|
|
||||||
|
## 项目简介
|
||||||
|
|
||||||
|
基于 Spring Boot + Vue 3 的图书管理系统，包含用户管理、书籍管理、借还书、公告管理、留言管理等模块。
|
||||||
|
|
||||||
|
## 技术栈
|
||||||
|
|
||||||
|
### 后端（exam-api）
|
||||||
|
|
||||||
|
| 技术 | 版本 |
|
||||||
|
|------|------|
|
||||||
|
| JDK | 1.8 |
|
||||||
|
| Spring Boot | 2.1.4.RELEASE |
|
||||||
|
| MyBatis-Plus | 3.4.1 |
|
||||||
|
| MySQL Connector | 8.0.11 |
|
||||||
|
| Apache Shiro | 1.8.0 |
|
||||||
|
| Druid 连接池 | 1.2.6 |
|
||||||
|
| Swagger | 2.9.2 |
|
||||||
|
| FastJSON | 1.2.56 |
|
||||||
|
| Hutool | 5.8.5 |
|
||||||
|
| Lombok | 1.18.4 |
|
||||||
|
| Log4j2 | 2.16.0 |
|
||||||
|
| Maven | 构建工具 |
|
||||||
|
|
||||||
|
### 前端（exam-vue）
|
||||||
|
|
||||||
|
| 技术 | 版本 |
|
||||||
|
|------|------|
|
||||||
|
| Vue | 3.4.21 |
|
||||||
|
| Vue Router | 4.3.0 |
|
||||||
|
| Vuex | 4.1.0 |
|
||||||
|
| Element Plus | 2.9.1 |
|
||||||
|
| Vite | 5.2.0 |
|
||||||
|
| Axios | 0.21.1 |
|
||||||
|
| Sass | 1.49.9 |
|
||||||
|
| pnpm | 10.6.4 |
|
||||||
|
| npm | 9.8.1 |
|
||||||
|
| nvm | 1.1.9 |
|
||||||
|
| Node.js | 18.18.0 |
|
||||||
|
|
||||||
|
## 项目结构
|
||||||
|
|
||||||
|
```
|
||||||
|
exam-jyt/
|
||||||
|
├── exam-api/ # 后端 Spring Boot 项目
|
||||||
|
│ └── src/main/java/com/bc/exam/
|
||||||
|
│ ├── config/ # 配置类（Shiro、Swagger、CORS 等）
|
||||||
|
│ ├── modules/ # 业务模块
|
||||||
|
│ ├── core/ # 核心工具类
|
||||||
|
│ └── ability/ # 能力组件（JWT、Shiro Realm）
|
||||||
|
├── exam-vue/ # 前端 Vue 3 项目
|
||||||
|
│ └── src/
|
||||||
|
│ ├── api/ # 接口请求
|
||||||
|
│ ├── views/ # 页面视图
|
||||||
|
│ ├── components/ # 公共组件
|
||||||
|
│ ├── store/ # Vuex 状态管理
|
||||||
|
│ ├── router/ # 路由配置
|
||||||
|
│ └── layout/ # 布局组件
|
||||||
|
└── README.md
|
||||||
|
```
|
||||||
|
|
||||||
|
## 环境要求
|
||||||
|
|
||||||
|
- JDK 1.8
|
||||||
|
- Node.js 18.18.0（nvm 1.1.9 管理）
|
||||||
|
- pnpm 10.6.4
|
||||||
|
- npm 9.8.1
|
||||||
|
- MySQL 8.0
|
||||||
|
- Maven
|
||||||
|
|
||||||
|
## 快速启动
|
||||||
|
|
||||||
|
### 后端
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd exam-api
|
||||||
|
mvn spring-boot:run
|
||||||
|
```
|
||||||
|
|
||||||
|
后端默认端口：**8101**
|
||||||
|
|
||||||
|
### 前端
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd exam-vue
|
||||||
|
pnpm install
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
前端默认端口：**9527**
|
||||||
|
|
||||||
|
### 构建部署
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd exam-vue
|
||||||
|
pnpm build
|
||||||
|
```
|
||||||
|
|
||||||
|
构建产物输出到 `dist/` 目录，复制到 `exam-api/src/main/resources/static/` 下即可通过后端统一访问。
|
||||||
|
|
||||||
|
## API 文档
|
||||||
|
|
||||||
|
启动后端后访问：http://127.0.0.1:8101/doc.html
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
|
<meta name="renderer" content="webkit">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||||
|
<link rel="icon" href="/favicon.png">
|
||||||
|
<title>图书管理系统</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Generated
+3646
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,12 @@
|
|||||||
|
// Variables exported as JS object for Vite compatibility
|
||||||
|
// Original source: variables.scss :export block
|
||||||
|
export default {
|
||||||
|
menuText: '#bfcbd9',
|
||||||
|
menuActiveText: '#409EFF',
|
||||||
|
subMenuActiveText: '#f4f4f5',
|
||||||
|
menuBg: '#304156',
|
||||||
|
menuHover: '#263445',
|
||||||
|
subMenuBg: '#1f2d3d',
|
||||||
|
subMenuHover: '#001528',
|
||||||
|
sideBarWidth: '210px'
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
/**
|
||||||
|
* 简易路径解析工具，替代 Node.js path 模块（Vite 不提供 Node polyfill）
|
||||||
|
* 用法: resolve('/sys', 'config') => '/sys/config'
|
||||||
|
*/
|
||||||
|
export function resolve(...segments) {
|
||||||
|
let joined = segments.join('/')
|
||||||
|
// 去除重复斜杠
|
||||||
|
joined = joined.replace(/\/+/g, '/')
|
||||||
|
// 确保以 / 开头
|
||||||
|
if (!joined.startsWith('/')) joined = '/' + joined
|
||||||
|
// 去除末尾斜杠（除非就是根路径）
|
||||||
|
if (joined.length > 1 && joined.endsWith('/')) joined = joined.slice(0, -1)
|
||||||
|
return joined
|
||||||
|
}
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
import { defineConfig, loadEnv } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
|
||||||
|
import path from 'path'
|
||||||
|
|
||||||
|
const resolve = (dir) => path.resolve(__dirname, dir)
|
||||||
|
|
||||||
|
export default defineConfig(({ mode }) => {
|
||||||
|
const env = loadEnv(mode, process.cwd())
|
||||||
|
|
||||||
|
return {
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
createSvgIconsPlugin({
|
||||||
|
iconDirs: [resolve('src/icons/svg')],
|
||||||
|
symbolId: 'icon-[name]'
|
||||||
|
})
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': resolve('src')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
define: {
|
||||||
|
'process.env': {}
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
port: 9527,
|
||||||
|
open: true
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
outDir: 'dist',
|
||||||
|
assetsDir: 'static',
|
||||||
|
sourcemap: false,
|
||||||
|
rollupOptions: {
|
||||||
|
output: {
|
||||||
|
chunkFileNames: 'static/js/[name]-[hash].js',
|
||||||
|
entryFileNames: 'static/js/[name]-[hash].js',
|
||||||
|
assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
|
||||||
|
manualChunks(id) {
|
||||||
|
if (id.includes('node_modules')) {
|
||||||
|
if (id.includes('element-plus')) {
|
||||||
|
return 'chunk-elementPlus'
|
||||||
|
}
|
||||||
|
return 'chunk-libs'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
css: {
|
||||||
|
preprocessorOptions: {
|
||||||
|
scss: {
|
||||||
|
charset: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user