title: 目录结构

项目目录结构

  1. ├── dist                        编译结果目录
  2. |
  3. ├── config                      项目编译配置目录
  4. |   ├── index.js                默认配置
  5. |   ├── dev.js                  开发环境配置
  6. |   └── prod.js                 生产环境配置
  7. |
  8. ├── src                         源码目录
  9. |   ├── pages                   页面文件目录
  10. |   |   └── index               index 页面目录
  11. |   |       ├── index.js        index 页面逻辑
  12. |   |       ├── index.css       index 页面样式
  13. |   |       └── index.config.js index 页面配置
  14. |   |
  15. |   ├── app.js                  项目入口文件
  16. |   ├── app.css                 项目总通用样式
  17. |   └── app.config.js           项目入口配置
  18. |
  19. ├── project.config.json         微信小程序项目配置 project.config.json
  20. ├── project.tt.json             字节跳动小程序项目配置 project.tt.json
  21. ├── project.swan.json           百度小程序项目配置 project.swan.json
  22. ├── project.qq.json             QQ 小程序项目配置 project.qq.json
  23. |
  24. ├── babel.config.js             Babel 配置
  25. ├── tsconfig.json               TypeScript 配置
  26. ├── .eslintrc                   ESLint 配置
  27. |
  28. └── package.json

编译配置

  1. └── config                      项目编译配置目录
  2.     ├── index.js                默认配置
  3.     ├── dev.js                  开发环境配置
  4.     └── prod.js                 生产环境配置

用于配置 Taro 项目的编译行为、修改 Webpack 配置等，详情请参考编译配置和编译配置详情。

源码组织

和小程序规范一样，Taro 包含一个描述整体程序的 app 和多个描述各自页面的 page。

app

  1. └── src                         源码目录
  2.     ├── app.js                  项目入口文件
  3.     ├── app.css                 项目总通用样式
  4.     └── app.config.js           项目入口配置

小程序的主体由下面三个文件组成：

文件 必须 作用
app.js 是 小程序入口逻辑
app.css 否 小程序全局样式
app.config.js 是 小程序全局配置

代码示例请根据你选择的框架进行查看：React, PReact, Vue, Vue3。

1. 小程序全局配置

app.config.js 对应小程序规范的全局配置文件 app.json，优势在于它是 JS 文件可以编写逻辑。配置以微信小程序的全局配置为规范。详情请参考全局配置。

2. 小程序全局样式

小程序全局样式文件可以通过 ES6 规范的 import 进行引入。

```js title=”app.js” import ‘./app.css’;

  2. ### page
  4.     └── src                         源码目录
  5.         └── pages                   页面文件目录
  6.             └── index               index 页面目录
  7.                 ├── index.js        index 页面逻辑
  8.                 ├── index.css       index 页面样式
  9.                 └── index.config.js index 页面配置
  11. 一个小程序页面由三个文件组成，如下：
  13. | 文件 | 必须 | 作用 |
  14. | :-- | :-- | :-- |
  15. | page.js | 是 | 页面入口逻辑 |
  16. | page.css | 否 | 页面样式 |
  17. | page.config.js | 否 | 页面配置 |
  19. #### 1. 页面配置
  21. `page.config.js` 对应小程序规范的页面配置文件 `page.json`，优势在于它是 JS 文件可以编写逻辑。配置以**微信小程序的页面配置**为规范。详情请参考[页面配置](./page-config)。
  23. #### 2. 页面样式
  25. 页面的样式文件可以通过 ES6 规范的 `import` 进行引入。
  27. ```js title="pages/index/index.js"
  28. import './index.css';

3. 页面路由

页面路由与小程序规范一致，需要在小程序全局配置 app.config.js 中进行配置。

项目配置

  1. └──project.config.json         微信小程序项目配置 project.config.json

各类小程序平台均有自己的项目配置文件，Taro 支持对它们进行适配，详情请参考项目配置。

Babel 配置

  1. └── babel.config.js             Babel 配置

请参考 Babel 配置

ESLint 配置

  1. └── .eslintrc                   ESLint 配置

ESLint 配置请参考 Github