跳到主要內容

文件

Webpack

您可以使用 Webpack 在您的專案中包含和捆綁 UIkit 的 JavaScript。

檔案結構

對於基本的專案設定，我們將建立以下檔案

app/
    index.js
index.html
package.json

以下命令將建立並填寫 `package.json` 檔案。它包含 pnpm 的相依性。我們包含 UIkit 和 Webpack。

mkdir uikit-webpack && cd uikit-webpack
pnpm init
pnpm add uikit
pnpm add --dev webpack

作為專案 JavaScript 的入口檔案，建立一個 `app/index.js` 檔案，內容如下。

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

// loads the Icon plugin
UIkit.use(Icons);

// components can be called from the imported UIkit reference
UIkit.notification('Hello world.');

這樣您就可以使用 UIkit 的參考，而無需將其 JavaScript 檔案包含在您的 HTML 中。相反，我們可以包含 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>

注意 為了簡化起見，我們包含了預先建置的 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 樣式已應用於您的頁面。如果捆綁成功，通知應會顯示在您的頁面頂部，並且按鈕在懸停時應會顯示訊息。