UIkit3.x文档

Webpack

您可以使用Webpack在项目中包含和捆绑UIkit的JavaScript。

文件结构

对于基本项目设置，我们将创建以下文件：

app/
    index.js
index.html
package.json

以下命令将创建并填充 package.json文件。它包含Yarn的依赖项。我们包括UIkit和Webpack。

mkdir uikit-webpack && cd uikit-webpack
yarn init -y
yarn add uikit
yarn add --dev webpack

作为项目JavaScript的入口文件，创建一个包含以下内容的文件 app/index.js 。

import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';

// 加载图标插件
UIkit.use(Icons);

// 可以从导入的UIkit引用调用组件
UIkit.notification('Hello world.');

这样就可以获得对UIkit的引用，而不必在HTML中包含其JavaScript文件。相反，我们可以包含将由Webpack创建的完整捆绑包。 创建具有以下内容的主HTML文件 index.html 。 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo</title>
        <link rel="stylesheet" href="node_modules/uikit/dist/css/uikit.min.css">
    </head>
    <body>

        <div class="uk-container">
            <div class="uk-card uk-card-body uk-card-primary">
                <h3 class="uk-card-title">Example headline</h3>

                <button class="uk-button uk-button-default" uk-tooltip="title: Hello World">Hover</button>
            </div>
        </div>

        <script src="dist/bundle.js"></script>
    </body>
</html>

Note 为了简单起见，我们已经包含了预先构建的CSS。在实际的项目中，您可能需要构建 Less 文件并包含编译后的CSS。

Webpack 配置

要配置Webpack将 app/index.js 编译为 dist/bundle.js, 请创建包含以下内容的文件 webpack.config.js 。 

var path = require('path');

module.exports = {
    entry: './app/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

现在，在项目的主目录中运行Webpack。

./node_modules/.bin/webpack # Run webpack from local project installation
.\node_modules\.bin\webpack # Run webpack on Windows
webpack # If you installed webpack globally

这样就完成了项目的基本设置。 在浏览器中导航至 index.html ，并确认基本的UIkit样式已应用于您的页面。 如果捆绑成功，则应该在页面顶部弹出一个通知，并且该按钮应在悬停时显示一条消息。