Question

只需使用webpack设置项目即可。只需安装uikit即可 npm install uikit --save

在我的主要js文件中我使用

import 'jquery';
import 'uikit/dist/js/uikit.js';

在我的主html文件中，我写下代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.12/css/uikit.min.css" />
</head>
<body>

<ul uk-accordion>
    <li class="uk-open">
        <h3 class="uk-accordion-title">Item 1</h3>
        <div class="uk-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li>
        <h3 class="uk-accordion-title">Item 2</h3>
        <div class="uk-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <h3 class="uk-accordion-title">Item 3</h3>
        <div class="uk-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

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

白色运行npm开始一切运行良好.. 但是它表示Uncaught ReferenceError：未定义UIkit。

Error picture is here. click on me

我错过了...感谢您的帮助。

Answer 1

UIKit需要window对象中的内容。所以这可能是在main.js中实现它的天真方式：

import Vue from 'vue';
import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';
import jQuery from 'jquery';
import App from './App';

UIkit.use(Icons);

window.jQuery = jQuery;
window.UIkit = UIkit;

module.exports = new Vue({
  router,
  el: '#app',
  template: '<App/>',
  components: { App },
  store,
});

相反，根据this SO answer，更好的解决方案似乎是编辑Webpack配置。所以，这对我有用：

{
    test: require.resolve('jquery'),
    loader: 'expose-loader?jQuery!expose-loader?$'
  },
  {
    test: require.resolve('uikit'),
    loader: 'expose-loader?UIkit'
  }

Answer 2

是的。

npm install uikit --save

并将其添加到您的启动脚本中

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

的官方文档

这里有一个入门项目gabihodoroaga/webpack-uikit-translate

还有一个教程hodo.dev

无法在Webpack中使用UIkit

2 个答案: