nl-uniapp/README.md

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        # 项目配置

快速开始

安装依赖

npm install
# 或
yarn install
# 或
pnpm install

开发运行

# H5
npm run dev:h5

# 微信小程序
npm run dev:mp-weixin

# 支付宝小程序
npm run dev:mp-alipay

# 其他平台...

构建打包

# H5
npm run build:h5

# 微信小程序
npm run build:mp-weixin

# 其他平台...

功能特性

1. Axios封装

已封装好的axios请求工具，位于 src/utils/request.js，包含：

• 请求/响应拦截器
• 自动添加token
• 统一错误处理
• Loading状态管理
• 支持GET、POST、PUT、DELETE、文件上传等方法

使用示例：

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