Taro UI 项目教程

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

Taro UI 是一个基于 Taro 框架开发的多端 UI 组件库。以下是项目的目录结构及其介绍：

taro-ui/
├── dist/                  # 编译后的文件目录
├── docs/                  # 文档目录
├── src/                   # 源代码目录
│   ├── components/        # UI 组件目录
│   ├── styles/            # 样式文件目录
│   ├── index.tsx          # 入口文件
├── config/                # 配置文件目录
│   ├── index.js           # 主配置文件
├── package.json           # 项目依赖和脚本配置
├── README.md              # 项目说明文档

目录结构说明

• dist/: 编译后的文件存放目录。
• docs/: 项目文档存放目录。
• src/: 源代码目录，包含所有组件和样式文件。
  • components/: 存放各个 UI 组件的目录。
  • styles/: 存放全局样式和主题样式文件的目录。
  • index.tsx: 项目的入口文件。
• config/: 配置文件目录，包含项目的各种配置。
  • index.js: 主配置文件，用于配置项目的编译和运行参数。
• package.json: 项目依赖和脚本配置文件。
• README.md: 项目的说明文档。

2. 项目的启动文件介绍

Taro UI 的启动文件是 src/index.tsx，它是整个项目的入口文件。以下是该文件的主要内容和作用：

import './styles/index.scss';

export { default as AtButton } from './components/button';
export { default as AtInput } from './components/input';
// 其他组件的导出

启动文件说明

• 导入了全局样式文件 ./styles/index.scss。
• 导出了各个 UI 组件，如 AtButton、AtInput 等。

3. 项目的配置文件介绍

Taro UI 的配置文件主要存放在 config/ 目录下，其中最重要的是 config/index.js。以下是该文件的主要内容和作用：

const config = {
  projectName: 'taro-ui',
  date: '2024-1-24',
  designWidth: 750,
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2
  },
  sourceRoot: 'src',
  outputRoot: 'dist',
  plugins: [],
  defineConstants: {},
  copy: {
    patterns: [],
    options: {}
  },
  framework: 'react',
  mini: {
    postcss: {
      pxtransform: {
        enable: true,
        config: {}
      },
      url: {
        enable: true,
        config: {
          limit: 10240 // 设定转换尺寸上限
        }
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  },
  h5: {
    publicPath: '/',
    staticDirectory: 'static',
    postcss: {
      autoprefixer: {
        enable: true,
        config: {}
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  }
};

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'));
  }
  return merge