137 lines
2.9 KiB
Markdown
137 lines
2.9 KiB
Markdown
|
# nl-uniapp
|
|||
|
|
|
|||
|
|
基于 Vue3 + Vite + Ant Design Vue 的 uni-app 项目模板
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
- **框架**: Vue 3
|
|||
|
|
- **构建工具**: Vite
|
|||
|
|
- **UI组件库**: Ant Design Vue 4.x
|
|||
|
|
- **状态管理**: Pinia
|
|||
|
|
- **HTTP请求**: Axios (已封装)
|
|||
|
|
- **样式预处理**: Sass/SCSS
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
nl-uniapp/
|
|||
|
|
├── pages/ # 页面目录
|
|||
|
|
│ └── index/ # 首页
|
|||
|
|
├── src/
|
|||
|
|
│ ├── api/ # API接口
|
|||
|
|
│ │ └── index.js # 接口定义
|
|||
|
|
│ ├── stores/ # Pinia状态管理
|
|||
|
|
│ │ └── user.js # 用户状态
|
|||
|
|
│ ├── utils/ # 工具函数
|
|||
|
|
│ │ └── request.js # axios封装
|
|||
|
|
│ └── styles/ # 样式文件
|
|||
|
|
│ ├── common.scss # 公共样式
|
|||
|
|
│ └── variables.scss # 样式变量
|
|||
|
|
├── static/ # 静态资源
|
|||
|
|
├── App.vue # 应用入口
|
|||
|
|
├── main.js # 主入口文件
|
|||
|
|
├── pages.json # 页面配置
|
|||
|
|
├── manifest.json # 应用配置
|
|||
|
|
├── vite.config.js # Vite配置
|
|||
|
|
└── package.json # 项目配置
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 快速开始
|
|||
|
|
|
|||
|
|
### 安装依赖
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm install
|
|||
|
|
# 或
|
|||
|
|
yarn install
|
|||
|
|
# 或
|
|||
|
|
pnpm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 开发运行
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# H5
|
|||
|
|
npm run dev:h5
|
|||
|
|
|
|||
|
|
# 微信小程序
|
|||
|
|
npm run dev:mp-weixin
|
|||
|
|
|
|||
|
|
# 支付宝小程序
|
|||
|
|
npm run dev:mp-alipay
|
|||
|
|
|
|||
|
|
# 其他平台...
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 构建打包
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# H5
|
|||
|
|
npm run build:h5
|
|||
|
|
|
|||
|
|
# 微信小程序
|
|||
|
|
npm run build:mp-weixin
|
|||
|
|
|
|||
|
|
# 其他平台...
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 功能特性
|
|||
|
|
|
|||
|
|
### 1. Axios封装
|
|||
|
|
|
|||
|
|
已封装好的axios请求工具，位于 `src/utils/request.js`，包含：
|
|||
|
|
|
|||
|
|
- 请求/响应拦截器
|
|||
|
|
- 自动添加token
|
|||
|
|
- 统一错误处理
|
|||
|
|
- Loading状态管理
|
|||
|
|
- 支持GET、POST、PUT、DELETE、文件上传等方法
|
|||
|
|
|
|||
|
|
使用示例：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import { api } from '@/api'
|
|||
|
|
|
|||
|
|
// GET请求
|
|||
|
|
const res = await api.getList({ page: 1 })
|
|||
|
|
|
|||
|
|
// POST请求
|
|||
|
|
const res = await api.create({ name: '测试' })
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 状态管理
|
|||
|
|
|
|||
|
|
使用Pinia进行状态管理，示例store位于 `src/stores/user.js`
|
|||
|
|
|
|||
|
|
### 3. API接口管理
|
|||
|
|
|
|||
|
|
所有API接口统一管理在 `src/api/index.js`，方便维护和调用
|
|||
|
|
|
|||
|
|
### 4. 样式系统
|
|||
|
|
|
|||
|
|
- 支持SCSS预处理器
|
|||
|
|
- 统一的样式变量定义
|
|||
|
|
- 公共样式类
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. **Ant Design Vue兼容性**: Ant Design Vue主要针对H5端，在小程序端可能不完全兼容，建议：
|
|||
|
|
- H5端使用Ant Design Vue组件
|
|||
|
|
- 小程序端使用uni-app原生组件或uni-ui组件库
|
|||
|
|
|
|||
|
|
2. **API配置**: 请在 `src/utils/request.js` 中修改 `baseURL` 为你的实际API地址
|
|||
|
|
|
|||
|
|
3. **Token管理**: Token会自动从store中获取并添加到请求头，请确保正确设置token
|
|||
|
|
|
|||
|
|
## 开发建议
|
|||
|
|
|
|||
|
|
1. 页面开发时，优先使用uni-app原生组件以保证跨平台兼容性
|
|||
|
|
2. 样式使用rpx单位以适配不同屏幕尺寸
|
|||
|
|
3. API请求统一使用封装好的request工具
|
|||
|
|
4. 状态管理使用Pinia，避免直接使用localStorage
|
|||
|
|
|
|||
|
|
## License
|
|||
|
|
|
|||
|
|
MIT
|
|||
|
|
|