404
+页面未找到
+抱歉,您访问的页面不存在。
+commit af33978d28e0c95c5a84b6e55aabd312a0e6fadf Author: zguiy <1415466602@qq.com> Date: Wed Jul 9 20:36:32 2025 +0800 awake diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..590e62c --- /dev/null +++ b/.env.development @@ -0,0 +1,6 @@ +ENV = 'production' +VUE_APP_MODE = 'production' +VITE_BASE_URL = 'https://wly-demo.wlyun.co' +VITE_ENVURL='https://wlyun-public.oss-cn-hangzhou.aliyuncs.com/shuangxi/hdr/' +VITE_MODELURL='https://wlyun-public.oss-cn-hangzhou.aliyuncs.com/shuangxi/model/' +VITE_PUBLIC_URL=/ diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..442b22e --- /dev/null +++ b/.env.production @@ -0,0 +1,6 @@ +ENV = 'production' +VUE_APP_MODE = 'production' +VITE_BASE_URL = 'https://wly-demo.wlyun.co' +VITE_ENVURL='https://wlyun-public.oss-cn-hangzhou.aliyuncs.com/shuangxi/hdr/' +VITE_MODELURL='https://wlyun-public.oss-cn-hangzhou.aliyuncs.com/shuangxi/model/' +VITE_PUBLIC_URL=./ diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# 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? diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..a7cea0b --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["Vue.volar"] +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..6beb18c --- /dev/null +++ b/README.md @@ -0,0 +1,156 @@ +# Vite + Vue 3 + TypeScript 脚手架 + +一个基于 Vite 构建的现代化 Vue 3 + TypeScript 前端脚手架,集成了 Pinia 状态管理、Vue Router 动态路由、持久化存储工具和环境变量配置。 + +## ✨ 特性 + +- ⚡ **Vite 4** - 极速的开发体验 +- 🎯 **Vue 3** - 组合式 API,性能更强 +- 🔷 **TypeScript** - 类型安全 +- 🍍 **Pinia** - 现代化状态管理 +- 🛣️ **Vue Router 4** - 路由管理与权限控制 +- 💾 **持久化存储** - localStorage/sessionStorage 封装 +- 🎨 **主题切换** - 明亮/暗黑主题支持 +- 📱 **响应式设计** - 移动端适配 +- 🔧 **环境变量配置** - 开发/生产环境分离 +- 📦 **自动代码分割** - 优化打包体积 + +## 🏗️ 项目结构 + +``` +src/ +├── assets/ # 静态资源 +├── components/ # 公共组件 +├── config/ # 配置文件 +│ └── env.ts # 环境变量配置 +├── router/ # 路由配置 +│ └── index.ts # 路由定义与权限控制 +├── stores/ # 状态管理 +│ ├── index.ts # Pinia 主文件 +│ └── modules/ # 状态模块 +│ ├── app.ts # 应用状态 +│ └── user.ts # 用户状态 +├── utils/ # 工具函数 +│ └── storage.ts # 存储工具 +├── views/ # 页面组件 +│ ├── Home.vue # 首页 +│ ├── About.vue # 关于页面 +│ ├── Login.vue # 登录页面 +│ ├── Dashboard.vue # 仪表板 +│ ├── Profile.vue # 个人中心 +│ ├── Admin.vue # 管理页面 +│ └── 404.vue # 404 页面 +├── App.vue # 根组件 +└── main.ts # 入口文件 +``` + +## 🚀 快速开始 + +### 安装依赖 + +```bash +npm install +``` + +### 开发环境 + +```bash +npm run dev +``` + +### 生产构建 + +```bash +npm run build +``` + +### 预览构建结果 + +```bash +npm run preview +``` + +## 🔧 主要功能 + +### 状态管理 (Pinia) + +- **用户状态管理**: 登录、用户信息、权限控制 +- **应用状态管理**: 主题、语言、应用配置 +- **持久化支持**: 自动同步到本地存储 + +### 路由管理 (Vue Router) + +- **路由守卫**: 登录验证、权限检查 +- **动态路由**: 根据用户权限动态加载 +- **页面缓存**: 支持 keep-alive + +### 持久化存储 + +```typescript +import { storage } from '@/utils/storage' + +// 本地存储 +storage.local.set('key', value, 3600) // 设置过期时间(秒) +storage.local.get('key') +storage.local.remove('key') + +// 会话存储 +storage.session.set('key', value) +storage.session.get('key') +``` + +### 环境变量配置 + +在 `src/config/env.ts` 中配置环境变量: + +```typescript +export const envConfig = { + VITE_APP_TITLE: 'Vite应用', + VITE_APP_PORT: 8080, + VITE_APP_BASE_API: '/api', + VITE_APP_ENV: 'development' +} +``` + +### 主题切换 + +```typescript +import { useAppStore } from '@/stores/modules/app' + +const appStore = useAppStore() +appStore.toggleTheme() // 切换主题 +appStore.setTheme('dark') // 设置暗色主题 +``` + +## 📝 开发指南 + +### 添加新页面 + +1. 在 `src/views/` 下创建页面组件 +2. 在 `src/router/index.ts` 中添加路由配置 +3. 如需权限控制,设置 `meta.requireAuth: true` + +### 添加新的状态模块 + +1. 在 `src/stores/modules/` 下创建新模块 +2. 在 `src/stores/index.ts` 中导出模块 + +### 自定义样式 + +- 全局样式在 `src/App.vue` 中定义 +- 支持 CSS 变量进行主题切换 +- 响应式断点已预设 + +## 🛠️ 技术栈 + +- **前端框架**: Vue 3 +- **构建工具**: Vite 4 +- **编程语言**: TypeScript +- **状态管理**: Pinia +- **路由管理**: Vue Router 4 +- **HTTP 客户端**: Axios +- **样式**: CSS3 + CSS Variables + +## 📄 许可证 + +MIT License diff --git a/index.html b/index.html new file mode 100644 index 0000000..dde16aa --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + +
+ + + +
+ Edit
+ components/HelloWorld.vue
to test HMR
+
+ Check out + create-vue, the official Vue + Vite starter +
++ Learn more about IDE Support for Vue in the + Vue Docs Scaling up Guide. +
+Click on the Vite and Vue logos to learn more
+ + + diff --git a/src/components/NavHeader.vue b/src/components/NavHeader.vue new file mode 100644 index 0000000..b3a5e25 --- /dev/null +++ b/src/components/NavHeader.vue @@ -0,0 +1,188 @@ + +抱歉,您访问的页面不存在。
+了解项目技术架构和功能特性
+{{ tech.description }}
+这是一个简单的管理页面示例
+ +欢迎回来,{{ userStore.userInfo?.nickname || '用户' }}!
+欢迎使用Vite + Vue 3 + Pinia + Vue Router框架
+{{ feature.description }}
+提示:输入任意用户名和密码即可登录
+