Hooke / stdj_h5

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
cc097891 0 parents

feat: 初始化三坛大戒H5应用项目 

- 完成启动页面设计和动画效果
- 实现首页布局和功能模块
- 添加三师七证、义工、戒子等核心页面
- 集成Vue3 + Vite + Vant UI框架
- 实现页面路由和导航功能
- 添加响应式设计和交互动画
Expand all
Inline Side-by-side
Showing 39 changed files with 2139 additions and 0 deletions
# 开发环境配置
# API 基础地址
VITE_API_BASE_URL=http://localhost:3000/api
# 是否开启 Mock
VITE_USE_MOCK=true
# 开发服务器端口
VITE_PORT=5173
# 是否自动打开浏览器
VITE_OPEN=true
\ No newline at end of file
# 生产环境配置
# API 基础地址
VITE_API_BASE_URL=https://api.yourdomain.com
# 是否开启 Mock
VITE_USE_MOCK=false
# 构建输出目录
VITE_OUTPUT_DIR=dist
# 静态资源目录
VITE_ASSETS_DIR=assets
\ No newline at end of file
{
"globals": {
"Component": true,
"ComponentPublicInstance": true,
"ComputedRef": true,
"DirectiveBinding": true,
"EffectScope": true,
"ExtractDefaultPropTypes": true,
"ExtractPropTypes": true,
"ExtractPublicPropTypes": true,
"InjectionKey": true,
"MaybeRef": true,
"MaybeRefOrGetter": true,
"PropType": true,
"Ref": true,
"VNode": true,
"WritableComputedRef": true,
"computed": true,
"createApp": true,
"customRef": true,
"defineAsyncComponent": true,
"defineComponent": true,
"effectScope": true,
"getCurrentInstance": true,
"getCurrentScope": true,
"h": true,
"inject": true,
"isProxy": true,
"isReactive": true,
"isReadonly": true,
"isRef": true,
"markRaw": true,
"nextTick": true,
"onActivated": true,
"onBeforeMount": true,
"onBeforeRouteLeave": true,
"onBeforeRouteUpdate": true,
"onBeforeUnmount": true,
"onBeforeUpdate": true,
"onDeactivated": true,
"onErrorCaptured": true,
"onMounted": true,
"onRenderTracked": true,
"onRenderTriggered": true,
"onScopeDispose": true,
"onServerPrefetch": true,
"onUnmounted": true,
"onUpdated": true,
"onWatcherCleanup": true,
"provide": true,
"reactive": true,
"readonly": true,
"ref": true,
"resolveComponent": true,
"shallowReactive": true,
"shallowReadonly": true,
"shallowRef": true,
"toRaw": true,
"toRef": true,
"toRefs": true,
"toValue": true,
"triggerRef": true,
"unref": true,
"useAttrs": true,
"useCssModule": true,
"useCssVars": true,
"useId": true,
"useLink": true,
"useModel": true,
"useRoute": true,
"useRouter": true,
"useSlots": true,
"useTemplateRef": true,
"watch": true,
"watchEffect": true,
"watchPostEffect": true,
"watchSyncEffect": true
}
}
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
# Environment variables
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
# Build outputs
build/
coverage/
# Cache
.cache/
.parcel-cache/
.eslintcache
# History
.history/
\ No newline at end of file
# H5 Vite Template
基于 Vue 3 + Vite + Vant 4 的移动端 H5 项目模板
## 特性
- ⚡️ **Vite** - 极速的开发体验
- 🖖 **Vue 3** - 渐进式 JavaScript 框架
- 📱 **Vant 4** - 轻量、可靠的移动端组件库
- 🎨 **Tailwind CSS** - 原子化 CSS 框架
- 📦 **Pinia** - 符合直觉的 Vue.js 状态管理库
- 🛣️ **Vue Router** - Vue.js 官方路由
- 📡 **Axios** - 基于 Promise 的 HTTP 客户端
- 🔧 **ESLint** - 代码质量检查
- 📐 **PostCSS** - CSS 后处理器
- 📱 **移动端适配** - 基于 postcss-px-to-viewport 的移动端适配方案
## 目录结构
```
h5_vite_template/
├── public/ # 静态资源
├── src/
│ ├── api/ # API 接口
│ ├── assets/ # 资源文件
│ ├── components/ # 通用组件
│ ├── router/ # 路由配置
│ ├── stores/ # 状态管理
│ ├── utils/ # 工具函数
│ ├── views/ # 页面组件
│ ├── App.vue # 根组件
│ ├── main.js # 入口文件
│ └── style.css # 全局样式
├── .env # 环境变量
├── .env.development # 开发环境变量
├── .env.production # 生产环境变量
├── .gitignore # Git 忽略文件
├── index.html # HTML 模板
├── package.json # 项目配置
├── postcss.config.js # PostCSS 配置
├── tailwind.config.js # Tailwind CSS 配置
└── vite.config.js # Vite 配置
```
## 快速开始
### 安装依赖
```bash
npm install
# 或
yarn install
# 或
pnpm install
```
### 开发
```bash
npm run dev
# 或
yarn dev
# 或
pnpm dev
```
### 构建
```bash
npm run build
# 或
yarn build
# 或
pnpm build
```
### 预览
```bash
npm run preview
# 或
yarn preview
# 或
pnpm preview
```
## 配置说明
### 环境变量
项目支持多环境配置，通过 `.env` 文件进行管理：
- `.env` - 所有环境的默认配置
- `.env.development` - 开发环境配置
- `.env.production` - 生产环境配置
### 移动端适配
项目使用 `postcss-px-to-viewport` 进行移动端适配，设计稿基准为 375px。
### 路由配置
路由配置位于 `src/router/index.js`，支持：
- 路由懒加载
- 路由守卫
- 页面标题设置
- 滚动行为控制
### 状态管理
使用 Pinia 进行状态管理，store 文件位于 `src/stores/` 目录。
### API 请求
API 请求基于 Axios 封装，配置文件位于 `src/utils/request.js`，支持：
- 请求/响应拦截器
- 自动 Loading
- 错误处理
- Token 自动携带
## 组件说明
### 页面组件
- **Home** - 首页，展示轮播图、菜单网格、通知栏等
- **About** - 关于页面，展示项目信息和功能特性
- **Profile** - 个人中心，展示用户信息和功能菜单
- **Demo** - 组件演示页面，展示 Vant 组件使用示例
- **NotFound** - 404 页面
### 通用组件
- **LoadingSpinner** - 加载动画组件
- **EmptyState** - 空状态组件
## 开发规范
### 代码风格
项目使用 ESLint 进行代码质量检查，请遵循以下规范：
- 使用 2 空格缩进
- 使用单引号
- 行末不加分号
- 组件名使用 PascalCase
- 文件名使用 kebab-case
### Git 提交规范
建议使用以下格式进行 Git 提交：
```
<type>(<scope>): <subject>
<body>
<footer>
```
类型说明：
- `feat`: 新功能
- `fix`: 修复 bug
- `docs`: 文档更新
- `style`: 代码格式调整
- `refactor`: 代码重构
- `test`: 测试相关
- `chore`: 构建过程或辅助工具的变动
## 部署
### 构建产物
执行 `npm run build` 后，构建产物将输出到 `dist` 目录。
### 静态部署
构建产物可以部署到任何静态文件服务器，如：
- Nginx
- Apache
- Vercel
- Netlify
- GitHub Pages
### 注意事项
1. 如果部署到子路径，需要在 `vite.config.js` 中配置 `base` 选项
2. 确保服务器支持 History 模式的路由
3. 生产环境需要配置正确的 API 地址
## 浏览器支持
- Chrome >= 87
- Firefox >= 78
- Safari >= 14
- iOS Safari >= 14.4
- Android Browser >= 87
## 许可证
MIT License
\ No newline at end of file
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>H5 Vite Template</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
\ No newline at end of file
This diff could not be displayed because it is too large.
{
"name": "stdj-h5",
"description": "三坛大戒",
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"start": "vite --host 0.0.0.0",
"build": "vite build",
"build-watch": "vite build --watch",
"serve": "vite preview",
"lint": "eslint . --ext vue,js,jsx,cjs,mjs --fix --ignore-path .gitignore"
},
"dependencies": {
"@vant/area-data": "^1.3.1",
"@vant/touch-emulator": "^1.4.0",
"@vueuse/core": "^10.7.2",
"axios": "^1.6.7",
"dayjs": "^1.11.10",
"js-cookie": "^3.0.5",
"lodash": "^4.17.21",
"pinia": "^2.1.7",
"vant": "^4.9.1",
"vue": "^3.4.15",
"vue-router": "^4.2.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.3",
"autoprefixer": "^10.4.17",
"postcss": "^8.4.35",
"postcss-px-to-viewport": "^1.1.1",
"tailwindcss": "^3.4.1",
"unplugin-auto-import": "^0.17.5",
"unplugin-vue-components": "^0.26.0",
"vite": "^5.1.0"
}
}
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
'postcss-px-to-viewport': {
unitToConvert: 'px',
viewportWidth: 375,
unitPrecision: 6,
propList: ['*'],
viewportUnit: 'vw',
fontViewportUnit: 'vw',
selectorBlackList: ['ignore-'],
minPixelValue: 1,
mediaQuery: true,
replace: true,
exclude: [],
landscape: false
}
}
}
\ No newline at end of file
<template>
<div id="app">
<router-view />
</div>
</template>
<script setup>
// 这里可以添加全局逻辑
</script>
<style>
/* 全局样式已在 style.css 中定义 */
</style>
\ No newline at end of file
import request from '@/utils/request'
// 用户相关 API
export const userApi = {
// 获取用户信息
getUserInfo: () => request.get('/user/info'),
// 更新用户信息
updateUserInfo: (data) => request.put('/user/info', data),
// 用户登录
login: (data) => request.post('/user/login', data),
// 用户注册
register: (data) => request.post('/user/register', data),
// 用户登出
logout: () => request.post('/user/logout')
}
// 通用 API
export const commonApi = {
// 上传文件
upload: (file) => {
const formData = new FormData()
formData.append('file', file)
return request.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
},
// 获取配置信息
getConfig: () => request.get('/config'),
// 发送验证码
sendSms: (phone) => request.post('/sms/send', { phone })
}
// 示例 API
export const demoApi = {
// 获取列表数据
getList: (params) => request.get('/demo/list', { params }),
// 获取详情
getDetail: (id) => request.get(`/demo/${id}`),
// 创建数据
create: (data) => request.post('/demo', data),
// 更新数据
update: (id, data) => request.put(`/demo/${id}`, data),
// 删除数据
delete: (id) => request.delete(`/demo/${id}`)
}
// 导出所有 API
export default {
userApi,
commonApi,
demoApi
}
\ No newline at end of file
/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// noinspection JSUnusedGlobalSymbols
// Generated by unplugin-auto-import
export {}
declare global {
const EffectScope: typeof import('vue')['EffectScope']
const computed: typeof import('vue')['computed']
const createApp: typeof import('vue')['createApp']
const customRef: typeof import('vue')['customRef']
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
const defineComponent: typeof import('vue')['defineComponent']
const effectScope: typeof import('vue')['effectScope']
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
const getCurrentScope: typeof import('vue')['getCurrentScope']
const h: typeof import('vue')['h']
const inject: typeof import('vue')['inject']
const isProxy: typeof import('vue')['isProxy']
const isReactive: typeof import('vue')['isReactive']
const isReadonly: typeof import('vue')['isReadonly']
const isRef: typeof import('vue')['isRef']
const markRaw: typeof import('vue')['markRaw']
const nextTick: typeof import('vue')['nextTick']
const onActivated: typeof import('vue')['onActivated']
const onBeforeMount: typeof import('vue')['onBeforeMount']
const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
const onDeactivated: typeof import('vue')['onDeactivated']
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
const onMounted: typeof import('vue')['onMounted']
const onRenderTracked: typeof import('vue')['onRenderTracked']
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
const onScopeDispose: typeof import('vue')['onScopeDispose']
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
const onUnmounted: typeof import('vue')['onUnmounted']
const onUpdated: typeof import('vue')['onUpdated']
const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
const provide: typeof import('vue')['provide']
const reactive: typeof import('vue')['reactive']
const readonly: typeof import('vue')['readonly']
const ref: typeof import('vue')['ref']
const resolveComponent: typeof import('vue')['resolveComponent']
const shallowReactive: typeof import('vue')['shallowReactive']
const shallowReadonly: typeof import('vue')['shallowReadonly']
const shallowRef: typeof import('vue')['shallowRef']
const toRaw: typeof import('vue')['toRaw']
const toRef: typeof import('vue')['toRef']
const toRefs: typeof import('vue')['toRefs']
const toValue: typeof import('vue')['toValue']
const triggerRef: typeof import('vue')['triggerRef']
const unref: typeof import('vue')['unref']
const useAttrs: typeof import('vue')['useAttrs']
const useCssModule: typeof import('vue')['useCssModule']
const useCssVars: typeof import('vue')['useCssVars']
const useId: typeof import('vue')['useId']
const useLink: typeof import('vue-router')['useLink']
const useModel: typeof import('vue')['useModel']
const useRoute: typeof import('vue-router')['useRoute']
const useRouter: typeof import('vue-router')['useRouter']
const useSlots: typeof import('vue')['useSlots']
const useTemplateRef: typeof import('vue')['useTemplateRef']
const watch: typeof import('vue')['watch']
const watchEffect: typeof import('vue')['watchEffect']
const watchPostEffect: typeof import('vue')['watchPostEffect']
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
}
// for type re-export
declare global {
// @ts-ignore
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
import('vue')
}
/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}
declare module 'vue' {
export interface GlobalComponents {
EmptyState: typeof import('./components/EmptyState.vue')['default']
LoadingSpinner: typeof import('./components/LoadingSpinner.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
VanBadge: typeof import('vant/es')['Badge']
VanButton: typeof import('vant/es')['Button']
VanCard: typeof import('vant/es')['Card']
VanCell: typeof import('vant/es')['Cell']
VanCellGroup: typeof import('vant/es')['CellGroup']
VanCheckbox: typeof import('vant/es')['Checkbox']
VanCollapse: typeof import('vant/es')['Collapse']
VanCollapseItem: typeof import('vant/es')['CollapseItem']
VanField: typeof import('vant/es')['Field']
VanForm: typeof import('vant/es')['Form']
VanGrid: typeof import('vant/es')['Grid']
VanGridItem: typeof import('vant/es')['GridItem']
VanIcon: typeof import('vant/es')['Icon']
VanImage: typeof import('vant/es')['Image']
VanNavBar: typeof import('vant/es')['NavBar']
VanNoticeBar: typeof import('vant/es')['NoticeBar']
VanProgress: typeof import('vant/es')['Progress']
VanRate: typeof import('vant/es')['Rate']
VanSidebar: typeof import('vant/es')['Sidebar']
VanSidebarItem: typeof import('vant/es')['SidebarItem']
VanStep: typeof import('vant/es')['Step']
VanSteps: typeof import('vant/es')['Steps']
VanSwipe: typeof import('vant/es')['Swipe']
VanSwipeItem: typeof import('vant/es')['SwipeItem']
VanSwitch: typeof import('vant/es')['Switch']
VanTab: typeof import('vant/es')['Tab']
VanTabbar: typeof import('vant/es')['Tabbar']
VanTabbarItem: typeof import('vant/es')['TabbarItem']
VanTabs: typeof import('vant/es')['Tabs']
VanTag: typeof import('vant/es')['Tag']
}
}
<template>
<div class="empty-state">
<div class="empty-icon">
<van-empty
:image="image"
:image-size="imageSize"
:description="description"
>
<template v-if="$slots.image" #image>
<slot name="image" />
</template>
<template v-if="$slots.description" #description>
<slot name="description" />
</template>
<template v-if="showAction" #default>
<van-button
:type="actionType"
:size="actionSize"
round
@click="handleAction"
>
{{ actionText }}
</van-button>
</template>
</van-empty>
</div>
</div>
</template>
<script setup>
import { defineEmits } from 'vue'
const props = defineProps({
// 图片类型
image: {
type: String,
default: 'default'
},
// 图片大小
imageSize: {
type: [Number, String],
default: 160
},
// 描述文字
description: {
type: String,
default: '暂无数据'
},
// 是否显示操作按钮
showAction: {
type: Boolean,
default: false
},
// 按钮文字
actionText: {
type: String,
default: '重新加载'
},
// 按钮类型
actionType: {
type: String,
default: 'primary'
},
// 按钮大小
actionSize: {
type: String,
default: 'normal'
}
})
const emit = defineEmits(['action'])
const handleAction = () => {
emit('action')
}
</script>
<style scoped>
.empty-state {
padding: 40px 20px;
text-align: center;
}
</style>
\ No newline at end of file
<template>
<div class="loading-spinner" :class="{ 'loading-overlay': overlay }">
<div class="spinner-container">
<div class="spinner" :style="{ width: size + 'px', height: size + 'px' }">
<div class="spinner-inner" :style="{ borderColor: color }"></div>
</div>
<p v-if="text" class="loading-text" :style="{ color: textColor }">{{ text }}</p>
</div>
</div>
</template>
<script setup>
defineProps({
// 是否显示遮罩层
overlay: {
type: Boolean,
default: false
},
// 加载器大小
size: {
type: Number,
default: 40
},
// 加载器颜色
color: {
type: String,
default: '#1989fa'
},
// 加载文本
text: {
type: String,
default: ''
},
// 文本颜色
textColor: {
type: String,
default: '#969799'
}
})
</script>
<style scoped>
.loading-spinner {
display: flex;
align-items: center;
justify-content: center;
}
.loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.9);
z-index: 9999;
}
.spinner-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.spinner {
position: relative;
}
.spinner-inner {
width: 100%;
height: 100%;
border: 3px solid transparent;
border-top-color: currentColor;
border-radius: 50%;
animation: spin 1s linear infinite;
}
.loading-text {
font-size: 14px;
margin: 0;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
\ No newline at end of file
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import router from './router'
import App from './App.vue'
// 引入样式
import './style.css'
import 'vant/lib/index.css'
// 引入 Vant 组件（按需引入会通过 unplugin-vue-components 自动处理）
// 这里只需要引入一些全局配置的组件
import { ConfigProvider, Toast, Dialog, Notify, ImagePreview } from 'vant'
const app = createApp(App)
const pinia = createPinia()
// 全局配置
app.config.globalProperties.$toast = Toast
app.config.globalProperties.$dialog = Dialog
app.config.globalProperties.$notify = Notify
app.config.globalProperties.$imagePreview = ImagePreview
// 使用插件
app.use(pinia)
app.use(router)
app.use(ConfigProvider)
// 挂载应用
app.mount('#app')
\ No newline at end of file
/*
* @Date: 2025-10-30 10:29:15
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-10-30 10:29:24
* @FilePath: /itomix/h5_vite_template/src/router/index.js
* @Description: 文件描述
*/
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Splash',
component: () => import('../views/Splash.vue')
},
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/teachers',
name: 'Teachers',
component: () => import('../views/Teachers.vue')
},
{
path: '/teachers/:id',
name: 'TeacherDetail',
component: () => import('../views/TeacherDetail.vue')
},
{
path: '/volunteers',
name: 'Volunteers',
component: () => import('../views/Volunteers.vue')
},
{
path: '/students',
name: 'Students',
component: () => import('../views/Students.vue')
},
{
path: '/students/:id',
name: 'StudentDetail',
component: () => import('../views/StudentDetail.vue')
},
{
path: '/news/:id',
name: 'NewsDetail',
component: () => import('../views/NewsDetail.vue')
},
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: () => import('../views/NotFound.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { top: 0 }
}
}
})
// 路由守卫
router.beforeEach((to, from, next) => {
// 设置页面标题
if (to.meta.title) {
document.title = to.meta.title
}
// 这里可以添加权限验证逻辑
next()
})
router.afterEach(() => {
// 路由跳转后的逻辑
})
export default router
\ No newline at end of file
/*
* @Date: 2025-10-30 10:30:17
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-10-30 10:30:26
* @FilePath: /itomix/h5_vite_template/src/stores/user.js
* @Description: 文件描述
*/
import { defineStore } from 'pinia'
import { userApi } from '@/api'
export const useUserStore = defineStore('user', {
state: () => ({
userInfo: null,
token: localStorage.getItem('token') || '',
isLogin: false
}),
getters: {
// 获取用户名
username: (state) => state.userInfo?.username || '',
// 获取用户头像
avatar: (state) => state.userInfo?.avatar || '',
// 是否已登录
hasLogin: (state) => !!state.token && !!state.userInfo
},
actions: {
// 设置 token
setToken(token) {
this.token = token
localStorage.setItem('token', token)
},
// 清除 token
clearToken() {
this.token = ''
localStorage.removeItem('token')
},
// 设置用户信息
setUserInfo(userInfo) {
this.userInfo = userInfo
this.isLogin = true
},
// 清除用户信息
clearUserInfo() {
this.userInfo = null
this.isLogin = false
},
// 登录
async login(loginData) {
const response = await userApi.login(loginData)
const { token, userInfo } = response.data
this.setToken(token)
this.setUserInfo(userInfo)
return response
},
// 获取用户信息
async getUserInfo() {
try {
const response = await userApi.getUserInfo()
this.setUserInfo(response.data)
return response
} catch (error) {
// 如果获取用户信息失败，清除本地存储
this.logout()
throw error
}
},
// 登出
async logout() {
try {
await userApi.logout()
} catch (error) {
console.error('登出失败:', error)
} finally {
this.clearToken()
this.clearUserInfo()
}
}
}
})
\ No newline at end of file
@tailwind base;
@tailwind components;
@tailwind utilities;
/* 全局样式 */
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #f7f8fa;
}
#app {
min-height: 100vh;
}
/* 自定义工具类 */
.safe-area-inset-top {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
.safe-area-inset-bottom {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
/* 覆盖 Vant 样式 */
.van-nav-bar {
background-color: #fff;
}
.van-nav-bar__title {
color: #323233;
}
/* 页面容器 */
.page-container {
min-height: 100vh;
background-color: #f7f8fa;
}
.content-container {
padding: 16px;
}
\ No newline at end of file
import axios from 'axios'
import { Toast } from 'vant'
// 创建 axios 实例
const request = axios.create({
baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
timeout: 10000,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})
// 请求拦截器
request.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么
// 添加 token
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
// 显示加载提示
Toast.loading({
message: '加载中...',
forbidClick: true,
duration: 0
})
return config
},
(error) => {
// 对请求错误做些什么
Toast.clear()
return Promise.reject(error)
}
)
// 响应拦截器
request.interceptors.response.use(
(response) => {
// 对响应数据做点什么
Toast.clear()
const { data } = response
// 根据后端接口规范处理响应
if (data.code === 200 || data.success) {
return data
} else {
// 业务错误
Toast.fail(data.message || '请求失败')
return Promise.reject(new Error(data.message || '请求失败'))
}
},
(error) => {
// 对响应错误做点什么
Toast.clear()
let message = '网络错误'
if (error.response) {
const { status, data } = error.response
switch (status) {
case 401:
message = '未授权，请重新登录'
// 清除 token 并跳转到登录页
localStorage.removeItem('token')
// router.push('/login')
break
case 403:
message = '拒绝访问'
break
case 404:
message = '请求地址出错'
break
case 408:
message = '请求超时'
break
case 500:
message = '服务器内部错误'
break
case 501:
message = '服务未实现'
break
case 502:
message = '网关错误'
break
case 503:
message = '服务不可用'
break
case 504:
message = '网关超时'
break
case 505:
message = 'HTTP版本不受支持'
break
default:
message = data?.message || `连接错误${status}`
}
} else if (error.code === 'ECONNABORTED') {
message = '请求超时'
} else if (error.message) {
message = error.message
}
Toast.fail(message)
return Promise.reject(error)
}
)
export default request
\ No newline at end of file
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
<template>
<div class="not-found-container">
<div class="not-found-content">
<!-- 404 图标 -->
<div class="not-found-icon">
<svg viewBox="0 0 200 200" class="w-32 h-32 text-gray-300">
<circle cx="100" cy="100" r="90" fill="none" stroke="currentColor" stroke-width="4"/>
<text x="100" y="120" text-anchor="middle" font-size="48" font-weight="bold" fill="currentColor">404</text>
</svg>
</div>
<!-- 错误信息 -->
<div class="not-found-text">
<h1 class="text-2xl font-bold text-gray-800 mb-2">页面不存在</h1>
<p class="text-gray-600 mb-8">抱歉，您访问的页面不存在或已被删除</p>
</div>
<!-- 操作按钮 -->
<div class="not-found-actions space-y-4">
<van-button
type="primary"
round
block
@click="goHome"
class="mb-4"
>
返回首页
</van-button>
<van-button
plain
round
block
@click="goBack"
>
返回上页
</van-button>
</div>
<!-- 建议链接 -->
<div class="suggested-links mt-8">
<p class="text-sm text-gray-500 mb-4">您可能想要访问：</p>
<div class="space-y-2">
<van-cell
title="首页"
is-link
@click="$router.push('/')"
icon="home-o"
/>
<van-cell
title="组件演示"
is-link
@click="$router.push('/demo')"
icon="apps-o"
/>
<van-cell
title="关于我们"
is-link
@click="$router.push('/about')"
icon="info-o"
/>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
// 返回首页
const goHome = () => {
router.push('/')
}
// 返回上一页
const goBack = () => {
if (window.history.length > 1) {
router.back()
} else {
router.push('/')
}
}
</script>
<style scoped>
.not-found-container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.not-found-content {
text-align: center;
max-width: 400px;
width: 100%;
}
.not-found-icon {
margin-bottom: 2rem;
}
.suggested-links {
background: white;
border-radius: 12px;
padding: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>
\ No newline at end of file
<template>
<div class="splash-container" :class="{ 'fade-out': isLeaving }">
<div class="splash-content">
<!-- 背景装饰 -->
<div class="bg-decoration">
<div class="lotus-pattern animate-float"></div>
<div class="cloud-pattern animate-drift"></div>
</div>
<!-- 主要内容 -->
<div class="main-content">
<!-- Logo区域 -->
<div class="logo-section animate-fade-in-up">
<div class="logo-circle">
<div class="dharma-wheel animate-rotate">
<div class="wheel-center"></div>
<div class="wheel-spokes"></div>
</div>
</div>
<h1 class="app-title">三坛大戒</h1>
<p class="app-subtitle">传承千年佛法 弘扬戒律精神</p>
</div>
<!-- 加载动画 -->
<div class="loading-section animate-fade-in-up-delay">
<div class="loading-dots">
<span></span>
<span></span>
<span></span>
</div>
<p class="loading-text">正在加载...</p>
</div>
</div>
<!-- 底部信息 -->
<div class="footer-info animate-fade-in">
<p class="version">版本 1.0.0</p>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const isLeaving = ref(false)
onMounted(() => {
// 3秒后开始离开动画，然后跳转到首页
setTimeout(() => {
isLeaving.value = true
// 等待淡出动画完成后跳转
setTimeout(() => {
router.push('/home')
}, 500)
}, 2500)
})
</script>
<style scoped>
.splash-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, #fffbeb, #fed7aa);
background-image:
radial-gradient(circle at 20% 20%, rgba(251, 191, 36, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(245, 158, 11, 0.1) 0%, transparent 50%);
transition: opacity 0.5s ease-out;
}
.splash-container.fade-out {
opacity: 0;
}
.splash-content {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 3rem 2rem;
}
.bg-decoration {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.lotus-pattern {
position: absolute;
top: 2.5rem;
right: 2.5rem;
width: 8rem;
height: 8rem;
opacity: 0.1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 20c-5 0-10 5-10 15s5 15 10 15 10-5 10-15-5-15-10-15z' fill='%23f59e0b'/%3E%3Cpath d='M35 35c-5-3-12-1-15 5s-1 12 5 15 12 1 15-5 1-12-5-15z' fill='%23f59e0b'/%3E%3Cpath d='M65 35c5-3 12-1 15 5s1 12-5 15-12 1-15-5-1-12 5-15z' fill='%23f59e0b'/%3E%3C/svg%3E");
}
.cloud-pattern {
position: absolute;
bottom: 5rem;
left: 2.5rem;
width: 6rem;
height: 4rem;
opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M20 40c-8 0-15-7-15-15s7-15 15-15c2 0 4 0 6 1 3-6 9-10 16-10s13 4 16 10c2-1 4-1 6-1 8 0 15 7 15 15s-7 15-15 15H20z' fill='%23f59e0b'/%3E%3C/svg%3E");
}
.main-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.logo-section {
text-align: center;
margin-bottom: 4rem;
}
.logo-circle {
position: relative;
width: 8rem;
height: 8rem;
margin: 0 auto 2rem;
border-radius: 50%;
background: linear-gradient(135deg, #fbbf24, #f97316);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
animation: float 3s ease-in-out infinite;
}
.dharma-wheel {
position: absolute;
top: 1rem;
left: 1rem;
right: 1rem;
bottom: 1rem;
border-radius: 50%;
background: white;
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
display: flex;
align-items: center;
justify-content: center;
}
.wheel-center {
width: 1rem;
height: 1rem;
border-radius: 50%;
background: linear-gradient(135deg, #f59e0b, #ea580c);
}
.wheel-spokes {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.wheel-spokes::before,
.wheel-spokes::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 4rem;
height: 0.125rem;
background: linear-gradient(to right, #f59e0b, #ea580c);
transform: translate(-50%, -50%);
}
.wheel-spokes::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.wheel-spokes::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.app-title {
font-size: 2.25rem;
font-weight: 700;
color: #92400e;
margin-bottom: 0.5rem;
font-family: 'PingFang SC', 'Hiragino Sans GB', sans-serif;
}
.app-subtitle {
font-size: 1.125rem;
color: #b45309;
opacity: 0.8;
}
.loading-section {
text-align: center;
}
.loading-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.loading-dots span {
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background-color: #f59e0b;
animation: bounce 1.4s ease-in-out infinite both;
}
.loading-dots span:nth-child(1) {
animation-delay: -0.32s;
}
.loading-dots span:nth-child(2) {
animation-delay: -0.16s;
}
.loading-text {
color: #b45309;
font-size: 0.875rem;
}
.footer-info {
text-align: center;
}
.version {
color: #d97706;
font-size: 0.75rem;
opacity: 0.6;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
@keyframes bounce {
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes drift {
0%, 100% {
transform: translateX(0px);
}
50% {
transform: translateX(20px);
}
}
.animate-fade-in-up {
animation: fadeInUp 0.8s ease-out;
}
.animate-fade-in-up-delay {
animation: fadeInUp 0.8s ease-out 0.3s both;
}
.animate-fade-in {
animation: fadeInUp 0.8s ease-out 0.6s both;
}
.animate-rotate {
animation: rotate 8s linear infinite;
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
.animate-drift {
animation: drift 4s ease-in-out infinite;
}
</style>
\ No newline at end of file
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
<template>
<div class="page-container">
<!-- 导航栏 -->
<van-nav-bar title="三师七证" left-arrow @click-left="$router.back()" class="custom-nav">
<template #right>
<van-icon name="search" size="18" />
</template>
</van-nav-bar>
<!-- 内容区域 -->
<div class="content-container">
<!-- 顶部说明 -->
<div class="intro-section">
<div class="intro-card">
<div class="intro-icon">📜</div>
<div class="intro-content">
<h3>三师七证</h3>
<p>三师：得戒和尚、羯磨阿阇梨、教授阿阇梨<br>七证：七位证明师</p>
</div>
</div>
</div>
<!-- 筛选栏 -->
<div class="filter-section">
<van-tabs v-model:active="activeTab" @change="handleTabChange" class="custom-tabs">
<van-tab title="全部" name="all"></van-tab>
<van-tab title="三师" name="teachers"></van-tab>
<van-tab title="七证" name="witnesses"></van-tab>
</van-tabs>
</div>
<!-- 法师列表 -->
<div class="teachers-list">
<div
v-for="teacher in filteredTeachers"
:key="teacher.id"
class="teacher-card"
@click="handleTeacherClick(teacher)"
>
<div class="teacher-avatar">
<img v-if="teacher.avatar" :src="teacher.avatar" :alt="teacher.name" />
<div v-else class="avatar-placeholder">
<span>{{ teacher.name.charAt(0) }}</span>
</div>
</div>
<div class="teacher-info">
<div class="teacher-header">
<h4 class="teacher-name">{{ teacher.name }}</h4>
<div class="teacher-role" :class="getRoleClass(teacher.role)">
{{ teacher.role }}
</div>
</div>
<div class="teacher-details">
<p class="teacher-title">{{ teacher.title }}</p>
<p class="teacher-temple">{{ teacher.temple }}</p>
<div class="teacher-meta">
<span class="ordination-year">{{ teacher.ordinationYear }}年受戒</span>
<span class="experience">{{ teacher.experience }}年戒腊</span>
</div>
</div>
</div>
<div class="teacher-actions">
<van-icon name="arrow" />
</div>
</div>
</div>
<!-- 空状态 -->
<van-empty v-if="filteredTeachers.length === 0" description="暂无相关法师信息" />
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const activeTab = ref('all')
// 法师数据
const teachers = ref([
{
id: 1,
name: '慧明法师',
title: '方丈',
role: '得戒和尚',
temple: '大觉寺',
ordinationYear: 1985,
experience: 39,
avatar: null,
type: 'teacher'
},
{
id: 2,
name: '智慧法师',
title: '首座',
role: '羯磨阿阇梨',
temple: '大觉寺',
ordinationYear: 1990,
experience: 34,
avatar: null,
type: 'teacher'
},
{
id: 3,
name: '觉悟法师',
title: '监院',
role: '教授阿阇梨',
temple: '大觉寺',
ordinationYear: 1992,
experience: 32,
avatar: null,
type: 'teacher'
},
{
id: 4,
name: '慈悲法师',
title: '知客',
role: '证明师',
temple: '大觉寺',
ordinationYear: 1995,
experience: 29,
avatar: null,
type: 'witness'
},
{
id: 5,
name: '般若法师',
title: '维那',
role: '证明师',
temple: '大觉寺',
ordinationYear: 1998,
experience: 26,
avatar: null,
type: 'witness'
},
{
id: 6,
name: '禅定法师',
title: '典座',
role: '证明师',
temple: '大觉寺',
ordinationYear: 2000,
experience: 24,
avatar: null,
type: 'witness'
},
{
id: 7,
name: '精进法师',
title: '书记',
role: '证明师',
temple: '大觉寺',
ordinationYear: 2002,
experience: 22,
avatar: null,
type: 'witness'
},
{
id: 8,
name: '持戒法师',
title: '库头',
role: '证明师',
temple: '大觉寺',
ordinationYear: 2005,
experience: 19,
avatar: null,
type: 'witness'
},
{
id: 9,
name: '忍辱法师',
title: '僧值',
role: '证明师',
temple: '大觉寺',
ordinationYear: 2008,
experience: 16,
avatar: null,
type: 'witness'
},
{
id: 10,
name: '布施法师',
title: '衣钵',
role: '证明师',
temple: '大觉寺',
ordinationYear: 2010,
experience: 14,
avatar: null,
type: 'witness'
}
])
// 过滤后的法师列表
const filteredTeachers = computed(() => {
if (activeTab.value === 'all') {
return teachers.value
} else if (activeTab.value === 'teachers') {
return teachers.value.filter(teacher => teacher.type === 'teacher')
} else if (activeTab.value === 'witnesses') {
return teachers.value.filter(teacher => teacher.type === 'witness')
}
return teachers.value
})
// 获取角色样式类
const getRoleClass = (role) => {
if (role.includes('和尚') || role.includes('阿阇梨')) {
return 'role-teacher'
}
return 'role-witness'
}
// 处理标签切换
const handleTabChange = (name) => {
activeTab.value = name
}
// 处理法师点击
const handleTeacherClick = (teacher) => {
router.push(`/teachers/${teacher.id}`)
}
</script>
<style scoped>
.page-container {
min-height: 100vh;
background: #fafafa;
}
.custom-nav {
background: linear-gradient(135deg, #fbbf24, #f97316);
color: white;
}
.custom-nav :deep(.van-nav-bar__title) {
color: white;
font-weight: 600;
}
.custom-nav :deep(.van-icon) {
color: white;
}
.content-container {
padding-top: 46px;
}
.intro-section {
padding: 16px;
}
.intro-card {
background: white;
border-radius: 12px;
padding: 20px;
display: flex;
align-items: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.intro-icon {
font-size: 32px;
margin-right: 16px;
}
.intro-content h3 {
font-size: 18px;
font-weight: 600;
color: #333;
margin: 0 0 8px 0;
}
.intro-content p {
font-size: 14px;
color: #666;
margin: 0;
line-height: 1.5;
}
.filter-section {
background: white;
border-bottom: 1px solid #eee;
}
.custom-tabs :deep(.van-tab) {
font-weight: 500;
}
.custom-tabs :deep(.van-tab--active) {
color: #f59e0b;
}
.custom-tabs :deep(.van-tabs__line) {
background: #f59e0b;
}
.teachers-list {
padding: 16px;
}
.teacher-card {
background: white;
border-radius: 12px;
padding: 16px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.3s ease;
}
.teacher-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.teacher-card:active {
transform: translateY(-1px);
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}
.teacher-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
margin-right: 16px;
flex-shrink: 0;
}
.teacher-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.avatar-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #fbbf24, #f97316);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
font-weight: 600;
}
.teacher-info {
flex: 1;
}
.teacher-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.teacher-name {
font-size: 18px;
font-weight: 600;
color: #333;
margin: 0;
}
.teacher-role {
padding: 4px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.role-teacher {
background: linear-gradient(135deg, #fbbf24, #f97316);
color: white;
}
.role-witness {
background: #f0f9ff;
color: #0369a1;
border: 1px solid #bae6fd;
}
.teacher-details {
space-y: 4px;
}
.teacher-title {
font-size: 16px;
color: #666;
margin: 0 0 4px 0;
}
.teacher-temple {
font-size: 14px;
color: #999;
margin: 0 0 8px 0;
}
.teacher-meta {
display: flex;
gap: 16px;
}
.ordination-year,
.experience {
font-size: 12px;
color: #999;
background: #f5f5f5;
padding: 2px 6px;
border-radius: 4px;
}
.teacher-actions {
margin-left: 12px;
color: #ccc;
}
</style>
\ No newline at end of file
This diff is collapsed. Click to expand it.
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
primary: '#1989fa',
success: '#07c160',
warning: '#ff976a',
danger: '#ee0a24',
},
fontSize: {
'xs': '10px',
'sm': '12px',
'base': '14px',
'lg': '16px',
'xl': '18px',
'2xl': '20px',
'3xl': '24px',
}
},
},
plugins: [],
corePlugins: {
preflight: false, // 禁用 Tailwind 的基础样式重置，避免与 Vant 冲突
}
}
\ No newline at end of file
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import postcsspxtoviewport from 'postcss-px-to-viewport'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: ['vue', 'vue-router'],
dts: 'src/auto-imports.d.ts',
eslintrc: {
enabled: true
}
}),
Components({
resolvers: [VantResolver()],
dts: 'src/components.d.ts'
})
],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'@components': path.resolve(__dirname, 'src/components'),
'@utils': path.resolve(__dirname, 'src/utils'),
'@api': path.resolve(__dirname, 'src/api'),
'@assets': path.resolve(__dirname, 'src/assets'),
'@views': path.resolve(__dirname, 'src/views'),
'@stores': path.resolve(__dirname, 'src/stores')
}
},
css: {
postcss: {
plugins: [
tailwindcss,
autoprefixer,
postcsspxtoviewport({
unitToConvert: 'px',
viewportWidth: 375,
unitPrecision: 6,
propList: ['*'],
viewportUnit: 'vw',
fontViewportUnit: 'vw',
selectorBlackList: ['ignore-'],
minPixelValue: 1,
mediaQuery: true,
replace: true,
exclude: [],
landscape: false
})
]
}
},
server: {
host: '0.0.0.0',
port: 3000,
open: true,
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
},
build: {
outDir: 'dist',
assetsDir: 'static',
rollupOptions: {
output: {
chunkFileNames: 'static/js/[name]-[hash].js',
entryFileNames: 'static/js/[name]-[hash].js',
assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
}
}
}
})
\ No newline at end of file