WDUI 项目使用教程

1. 项目目录结构及介绍

wdfe/wdui/
├── lib/
│   ├── components/  # 存放各个UI组件的源码
│   ├── styles/      # 存放样式文件
│   │   └── theme-default/  # 默认主题样式
│   └── index.js     # 项目入口文件
├── examples/        # 示例代码
├── docs/            # 项目文档
├── tests/           # 测试代码
├── package.json     # 项目依赖配置文件
├── README.md        # 项目介绍文档
└── .babelrc         # Babel配置文件

目录结构说明

• lib/: 存放项目的核心代码，包括UI组件和样式文件。

  • components/: 存放各个UI组件的源码。
  • styles/: 存放样式文件，其中theme-default/目录下是默认主题样式。
  • index.js: 项目的入口文件，负责初始化和导出组件。

• examples/: 存放示例代码，帮助用户快速上手。

• docs/: 存放项目的详细文档，包括API文档、使用指南等。

• tests/: 存放测试代码，确保项目的稳定性和可靠性。

• package.json: 项目的依赖配置文件，定义了项目所需的npm包和脚本命令。

• README.md: 项目的介绍文档，包含项目的基本信息、安装方法和使用说明。

• .babelrc: Babel配置文件，用于配置ES6+语法的转换。

2. 项目启动文件介绍

lib/index.js

lib/index.js 是WDUI项目的入口文件，负责初始化和导出各个UI组件。以下是该文件的主要内容：

// 引入各个UI组件
import Header from './components/Header';
import Button from './components/Button';
// 其他组件...

// 导出组件
export {
  Header,
  Button,
  // 其他组件...
};

启动流程

1. 引入组件: 在lib/index.js中，通过import语句引入各个UI组件。
2. 导出组件: 使用export语句将组件导出，供外部使用。

3. 项目的配置文件介绍

package.json

package.json 是项目的依赖配置文件，定义了项目所需的npm包和脚本命令。以下是该文件的主要内容：

{
  "name": "wdui",
  "version": "1.0.0",
  "description": "Mobile UI Components Library based on Vue 2",
  "main": "lib/index.js",
  "scripts": {
    "start": "npm run dev",
    "dev": "webpack-dev-server --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },
  "dependencies": {
    "vue": "^2.0.0"
  },
  "devDependencies": {
    "babel-plugin-component": "^1.1.1",
    "webpack": "^4.0.0"
  }
}

配置说明

• name: 项目名称，这里是wdui。
• version: 项目版本号，当前版本为1.0.0。
• description: 项目描述，说明这是一个基于Vue 2的移动端UI组件库。
• main: 项目的主入口文件，指向lib/index.js。
• scripts: 定义了项目的脚本命令，包括启动开发服务器、构建项目等。
• dependencies: 项目运行时所需的依赖包，如vue。
• devDependencies: 开发环境所需的依赖包，如babel-plugin-component和webpack。

.babelrc

.babelrc 是Babel的配置文件，用于配置ES6+语法的转换。以下是该文件的主要内容：

{
  "plugins": [
    "transform-vue-jsx",
    ["babel-plugin-component", {
      "libraryName": "wdui",
      "style": false
    }]
  ]
}

配置说明

• plugins: 配置Babel插件，包括transform-vue-jsx和babel-plugin-component。
  • transform-vue-jsx: 支持Vue的JSX语法。
  • babel-plugin-component: 按需引入组件，配置了libraryName为wdui，且不引入样式文件。

通过以上配置，可以确保项目在开发和构建过程中能够正确处理ES6+语法和按需引入组件。