Taro Dva TypeScript 脚手架使用教程

1. 项目的目录结构及介绍

├── 	temp // H5编译结果目录
├── 	rn_temp // RN编译结果目录
├── dist // 小程序编译结果目录
├── config // Taro配置目录
│ ├── dev.ts // 开发时配置
│ ├── index.ts // 默认配置
│ └── prod.ts // 打包时配置
├── src // 源码目录
│ ├── components // 组件
│ ├── config // 项目开发配置
│ ├── models // redux models
│ ├── pages // 页面文件目录
│ │ └── account
│ │ ├── index.ts // 页面逻辑
│ │ ├── index.scss // 页面样式
│ │ ├── index.config.ts // 页面配置
│ ├── service // 页面api等服务
│ ├── static // 字体、图片
│ ├── utils // 常用工具类
│ ├── app.ts // 入口文件
│ ├── app.config.ts // 入口配置文件
│ └── index.html
├── package.json
├── template.js // pages模版快速生成脚本，执行命令 npm run tpl `文件名`
└── get-iconfont.js // iconfont快速更新，执行命令 npm run iconfont

目录结构介绍

• temp: H5编译结果目录。
• rn_temp: React Native编译结果目录。
• dist: 小程序编译结果目录。
• config: Taro配置目录，包含开发、默认和打包时的配置文件。
• src: 源码目录，包含组件、配置、models、页面、服务、静态资源、工具类、入口文件和入口配置文件。
• package.json: 项目依赖配置文件。
• template.js: 用于快速生成页面模板的脚本。
• get-iconfont.js: 用于快速更新iconfont的脚本。

2. 项目的启动文件介绍

入口文件

• src/app.ts: 项目的入口文件，负责初始化应用和配置全局状态。

启动命令

• 微信小程序: npm run dev:weapp
• 支付宝小程序: npm run dev:alipay
• 百度小程序: npm run dev:swan
• 字节跳动小程序: npm run dev:tt
• QQ小程序: npm run dev:qq
• H5: npm run dev:h5
• React Native: npm run dev:rn

3. 项目的配置文件介绍

Taro配置文件

• config/dev.ts: 开发时的配置文件，包含开发环境的配置选项。
• config/index.ts: 默认配置文件，包含项目的默认配置选项。
• config/prod.ts: 打包时的配置文件，包含生产环境的配置选项。

其他配置文件

• src/app.config.ts: 入口配置文件，包含应用的全局配置。
• package.json: 项目依赖配置文件，包含项目的依赖包、脚本命令等。
• template.js: 页面模板生成脚本，用于快速生成页面模板。
• get-iconfont.js: iconfont更新脚本，用于快速更新iconfont图标。

通过以上配置文件和启动文件，可以方便地进行项目的开发、测试和部署。