# base-front **Repository Path**: rediaz/base-front ## Basic Information - **Project Name**: base-front - **Description**: 前端快速开发框架 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-01-23 - **Last Updated**: 2026-01-23 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Saline Alkali Land Smart UI 基于 Vue 3 + Vite + TypeScript 的前端管理系统 ## 📋 目录 - [技术栈](#技术栈) - [环境要求](#环境要求) - [快速开始](#快速开始) - [项目结构](#项目结构) - [开发指南](#开发指南) - [配置说明](#配置说明) - [常见问题](#常见问题) - [部署](#部署) ## 🛠 技术栈 - **Vue 3** - 渐进式 JavaScript 框架 - **Vite** - 下一代前端构建工具 - **TypeScript** - JavaScript 的超集 - **Pinia** - Vue 状态管理 - **Vue Router** - Vue 路由管理 - **Tailwind CSS** - 实用优先的 CSS 框架 - **Ant Design Vue** - 企业级 UI 组件库 ## 📦 环境要求 在开始之前，请确保您的开发环境满足以下要求： - **Node.js** >= 20.10.0 - **pnpm** >= 9.12.0 ### 安装 Node.js 访问 [Node.js 官网](https://nodejs.org/) 下载并安装 LTS 版本。 验证安装： ```bash node -v # 应显示 v20.10.0 或更高版本 ``` ### 安装 pnpm ```bash # 使用 npm 安装 pnpm npm install -g pnpm # 验证安装 pnpm -v # 应显示 9.12.0 或更高版本 ``` ## 🚀 快速开始 ### 1. 克隆项目（如果还没有） ```bash git clone cd salineAlkaliLandSmart-ui ``` ### 2. 安装依赖 ```bash pnpm install ``` > 💡 **提示**：首次安装可能需要几分钟时间，请耐心等待。 ### 3. 启动开发服务器 ```bash pnpm dev ``` 启动成功后，在浏览器中访问： ``` http://localhost:5666 ``` > 📌 **注意**：开发服务器默认端口为 5666，可在 `apps/web-big-data/.env.development` 中修改。 ### 4. 开始开发 现在您可以开始开发了！修改代码后，浏览器会自动热更新。 ## 📁 项目结构 ``` salineAlkaliLandSmart-ui/ ├── apps/ │ └── web-big-data/ # 主应用 │ ├── src/ │ │ ├── api/ # API 接口定义 │ │ │ └── core/ # 核心 API │ │ ├── assets/ # 静态资源（图片、字体等） │ │ ├── components/ # 公共组件 │ │ ├── layouts/ # 布局组件 │ │ ├── locales/ # 国际化文件 │ │ ├── router/ # 路由配置 │ │ │ ├── routes/ # 路由定义 │ │ │ │ ├── core.ts # 核心路由（登录、404等） │ │ │ │ └── modules/ # 业务路由模块 │ │ │ └── guard.ts # 路由守卫 │ │ ├── store/ # Pinia 状态管理 │ │ ├── utils/ # 工具函数 │ │ ├── views/ # 页面视图 │ │ │ ├── _core/ # 核心页面（登录、错误页等） │ │ │ ├── dashboard/ # 仪表板 │ │ │ └── system/ # 系统管理 │ │ ├── app.vue # 根组件 │ │ ├── main.ts # 应用入口 │ │ └── preferences.ts # 应用偏好设置 │ ├── .env # 环境变量（所有环境） │ ├── .env.development # 开发环境变量 │ ├── .env.production # 生产环境变量 │ ├── .env.test # 测试环境变量 │ ├── index.html # HTML 模板 │ ├── package.json # 应用依赖 │ └── vite.config.mts # Vite 配置 ├── packages/ # 共享包（monorepo） │ ├── @core/ # 核心功能包 │ ├── effects/ # 副作用处理 │ ├── icons/ # 图标库 │ ├── locales/ # 国际化 │ ├── stores/ # 共享状态 │ ├── styles/ # 全局样式 │ ├── types/ # TypeScript 类型定义 │ └── utils/ # 工具函数库 ├── internal/ # 内部工具包 │ ├── lint-configs/ # 代码规范配置 │ ├── tailwind-config/ # Tailwind 配置 │ ├── tsconfig/ # TypeScript 配置 │ └── vite-config/ # Vite 配置 ├── scripts/ # 构建脚本 ├── package.json # 根 package.json ├── pnpm-workspace.yaml # pnpm 工作区配置 └── README.md # 项目文档 ``` ## 💻 开发指南 ### 添加新页面 1. **创建页面组件** 在 `apps/web-big-data/src/views/` 下创建新的页面目录： ```bash # 例如创建一个用户管理页面 apps/web-big-data/src/views/user/ ├── index.vue # 用户列表页 └── detail.vue # 用户详情页 ``` 2. **添加路由配置** 在 `apps/web-big-data/src/router/routes/modules/` 下创建路由文件： ```typescript // apps/web-big-data/src/router/routes/modules/user.ts import type { RouteRecordRaw } from 'vue-router'; const routes: RouteRecordRaw[] = [ { path: '/user', name: 'User', component: () => import('@/views/user/index.vue'), meta: { title: '用户管理', icon: 'mdi:account', }, }, ]; export default routes; ``` 3. **访问页面** 启动开发服务器后，访问 `http://localhost:5666/user` ### 添加 API 接口 在 `apps/web-big-data/src/api/` 下创建 API 文件： ```typescript // apps/web-big-data/src/api/user.ts import { requestClient } from '@/api/request'; export interface User { id: string; name: string; email: string; } // 获取用户列表 export async function getUserList() { return requestClient.get('/user/list'); } // 获取用户详情 export async function getUserDetail(id: string) { return requestClient.get(`/user/${id}`); } ``` ### 使用状态管理 在 `apps/web-big-data/src/store/` 下创建 store： ```typescript // apps/web-big-data/src/store/user.ts import { defineStore } from 'pinia'; import { ref } from 'vue'; import type { User } from '@/api/user'; export const useUserStore = defineStore('user', () => { const currentUser = ref(null); function setUser(user: User) { currentUser.value = user; } return { currentUser, setUser, }; }); ``` ### 代码规范 项目已配置 ESLint、Prettier 和 Stylelint，请遵循以下规范： ```bash # 检查代码规范 pnpm lint # 自动修复代码格式 pnpm format ``` ## ⚙️ 配置说明 ### 环境变量 项目使用不同的环境变量文件： - `.env` - 所有环境共享的变量 - `.env.development` - 开发环境变量 - `.env.production` - 生产环境变量 - `.env.test` - 测试环境变量 **主要配置项：** ```bash # 开发服务器端口 VITE_PORT=5666 # 应用基础路径 VITE_BASE=/ # API 接口地址 VITE_GLOB_API_URL=/api # 是否开启 Vue DevTools VITE_DEVTOOLS=false # 登录地址 VITE_LOGIN_URL=http://lbcloudtest.dcfit.com.cn ``` ### 修改端口 编辑 `apps/web-big-data/.env.development`： ```bash VITE_PORT=8080 # 修改为您想要的端口 ``` ### 配置代理 编辑 `apps/web-big-data/vite.config.mts`，添加代理配置： ```typescript export default defineConfig({ server: { proxy: { '/api': { target: 'http://your-backend-api.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), }, }, }, }); ``` ## 🔧 可用命令 ```bash # 开发 pnpm dev # 启动开发服务器 # 构建 pnpm build # 构建生产版本 pnpm build:test # 构建测试环境版本 # 预览 pnpm preview # 预览生产构建 # 代码质量 pnpm lint # 检查代码规范 pnpm format # 格式化代码 # 依赖管理 pnpm install # 安装依赖 pnpm reinstall # 清理并重新安装依赖 ``` ## ❓ 常见问题 ### 1. 安装依赖失败 **问题**：运行 `pnpm install` 时出错 **解决方案**： ```bash # 清理缓存 pnpm store prune # 删除 node_modules 和 lock 文件 pnpm reinstall ``` ### 2. 端口被占用 **问题**：启动时提示端口 5666 已被占用 **解决方案**： - 方案 1：修改 `.env.development` 中的 `VITE_PORT` - 方案 2：关闭占用端口的程序 ### 3. 热更新不生效 **问题**：修改代码后浏览器不自动刷新 **解决方案**： ```bash # 重启开发服务器 # 按 Ctrl+C 停止，然后重新运行 pnpm dev ``` ### 4. TypeScript 类型错误 **问题**：IDE 提示类型错误 **解决方案**： ```bash # 重新生成类型定义 pnpm install ``` ### 5. 构建失败 **问题**：运行 `pnpm build` 失败 **解决方案**： ```bash # 检查 Node.js 版本 node -v # 确保 >= 20.10.0 # 清理并重新安装 pnpm reinstall # 重新构建 pnpm build ``` ## 🚢 部署 ### 构建生产版本 ```bash # 构建生产环境 pnpm build # 构建测试环境 pnpm build:test ``` 构建完成后，产物位于 `apps/web-big-data/dist/` 目录。 ### 部署到服务器 1. **使用 Nginx** ```nginx server { listen 80; server_name your-domain.com; root /path/to/dist; index index.html; location / { try_files $uri $uri/ /index.html; } # API 代理 location /api { proxy_pass http://your-backend-api; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } } ``` 2. **上传文件** ```bash # 使用 scp 上传 scp -r dist/* user@server:/path/to/web/root/ # 或使用 rsync rsync -avz dist/ user@server:/path/to/web/root/ ``` ### 预览构建结果 ```bash pnpm preview ``` 访问 `http://localhost:4173` 查看构建结果。 ## 📝 License MIT --- ## 🤝 贡献 欢迎提交 Issue 和 Pull Request！ ## 📧 联系方式 如有问题，请联系项目维护者。