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
|
||
|