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图标。
通过以上配置文件和启动文件,可以方便地进行项目的开发、测试和部署。
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考