Teal TealUI

开始使用

你无需学习任何其它框架就可以快速上手 TealUI。

Hello World
使用构建工具
使用 Webpack
脚手架
组件路径

Hello World

最快使用一个组件的方法是通过加载器。 比如要使用消息框组件：

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个页面</title>
    <script src="http://tealui.com/components/require.js"></script>
</head>
<body>
    <script>
        require(["ui/messageBox"], function (messageBox) {
            messageBox.default.alert("Hello world!");
        });
    </script>
</body>
</html>

将以上代码保存为 hello.html 并在浏览器打开，就可以看到弹出了一个“Hello world!”的消息框。

其中，第一段引入了一个名为 require.js 的加载器。 这个文件定义了全局的 require 函数用来加载组件。

第二段首先导入了 ui/messageBox 组件，然后通过这个组件导出的 default.alert 函数接口实现了弹窗效果。

使用构建工具

现在你已经掌握了如何使用组件的基本方法。

实际项目中建议使用如 webpack 之类的构建工具加载组件：

  1. 可以使用更简短的 import 语法导入组件。
  2. 合并导入的组件，减少请求数以提升页面性能。
  3. 支持在导入时压缩优化代码。
  4. 同时支持导入其它 NPM 生态圈的组件。

使用 Webpack

1. 准备工作

npm install webpack -g
npm install webpack webpack-dev-server

2. 下载 TealUI 源码

npm install tealui

3. 配置 Webpack

提示

使用 TealUI 不需要对 Webpack 作额外配置，如果你已熟悉 Webpack，以下配置仅供参考。

新建 webpack.config.js：

module.exports = {
    module: {
        rules: [
            {
                test: /\.css/i,
                loader: "css-loader"
            }
        ]
    },
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: __dirname + '/dist'
    }
};

4. 新建测试代码

<!DOCTYPE html>
<html>
<head>
    <title>我的第二个页面</title>
    <script src="bundle.js"></script>
</head>
<body>

</body>
</html>
import MessageBox from "tealui/ui/messageBox";

MessageBox.alert("Hello World!");

5. 启动

webpack

执行后 Webpack 会编译 src/index.js 文件并生成 dist/bundle.js。

在浏览器打开 dist/index.html 可以看到消息框组件已成功加载并显示了消息框。

脚手架

你可以使用现成的脚手架快速创建一个新项目。

npm install digo -g
digo --init tealui-webpack

启动调试

npm start

在浏览器访问 http://127.0.0.1:8080/ 查看效果。

发布构建

npm run build

入口文件会生成到 dist 目录，你可以直接引用。

组件路径

组件路径是相对于 require.js 的相对路径，比如 ui/messageBox。 每个组件文档顶部都会显示该组件的路径。

路径前缀的意义如下：