# taro-template

**Repository Path**: feituer/taro-template

## Basic Information

- **Project Name**: taro-template
- **Description**: “小程序”模板：基于taro4.x
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-01-09
- **Last Updated**: 2025-06-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# taro template

#### 介绍

1. 技术栈：Taro 4.x、NutUI-React 2.x、Redux 5.x、Tailwindcss 3.x、Typescript 5.x
2. 兼容：小程序，H5
3. [文档](https://blog.csdn.net/2301_76228184/article/details/145093734)

#### 目录

```
pnpm install -g mddir
directoryList.md
```

#### 启动

```
pnpm install
pnpm run dev:weapp
```

#### 初始化搭建

- [x] 配置 NutUI-React
  1. [安装](https://nutui.jd.com/taro/react/2x/#/zh-CN/guide/start-react)
  2. [主题](https://nutui.jd.com/taro/react/2x/#/zh-CN/guide/theme-react)
     - 方式 1：采用 CSS Variables，app.scss 内：root,page{}、body{}，页面 var()使用
     - 方式 2：ConfigProvider 组件覆盖全局
     - 方式 3：assets/styles/variable.scss，config/index.ts 配置 sass，页面使用 color:$color1
     - eg 小程序资源域名$domain 在.scss 文件使用时、主题色$primary
  3. [图标](https://nutui.jd.com/h5/react/2x/#/zh-CN/component/icon)
- [x] 国际化：/pages/my/index.tsx
- [x] 样式
  1.  全局样式：app.scss，app.tsx 引入
  2.  [css modules](https://docs.taro.zone/docs/css-modules)
      - eg：index.scss 变更 index.module.scss，引入 import styles from './index.module.scss'
- [x] 配置 tailwindcss：[安装](https://docs.taro.zone/docs/tailwindcss)，vscode Tailwind 插件
- [x] 配置 typescript：[别名](https://docs.taro.zone/docs/config-detail#alias)，config/index.js 里 alias、tsconfig.json 里 paths
- [x] 配置 redux
  1. [安装](https://cn.redux.js.org/introduction/installation)：@reduxjs/toolkit、redux、react-redux
  2. stores/index.ts+xxSlice.ts，app.tsx 引入 Provider
  3. 定义 ts 类型：状态的、hooks 的
  4. app.ts 改 app.tsx
  5. 存 storage 里，可手动，或 redux-persist
- [x] 配置 eslint：module.exports 去掉，新增 import/order，import 导入分组。
- [x] 配置 prettier：新增.prettierrc
- [ ] 配置 stylelint
- [ ] 配置 husky、lint-staged、commitlint

#### 业务搭建

- [x] 常量：全局变量、常量、接口地址等
- [x] 布局：tabBar 默认、自定义，eg 滤镜；滚动布局，eg 兼容 H5，或全屏背景渐变
- [x] 页面：分包与 pages 同级
- [x] 组件：加载更多 [在线免费接口](https://api.apiopen.top/swagger/index.html#/)、头部、悬浮框等，头部组件注意 padding-top 设置，置顶分页面或滚动区域内
- [x] 请求：拦截器、错误处理、重复请求、超时请求、缓存。建议研究 Taro-hooks 的 useRequest
- [x] 错误处理：useError、错误边界
- [x] hooks：usePage.ts、useUser.ts
- [x] NPM 包：lodash-es、dayjs
- [x] 兼容 H5：从 ui、编译考虑
- [x] 换肤，eg 主题色、新春换肤
- [ ] 监控
- [ ] 单测
- [ ] 优化