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