Question

我正在使用Vue.JS作为数据框架和Semantic UI作为CSS框架来构建我的第一个网站。我正在使用NodeJS包来创建我的Javascript文件。在NodeJS软件包中，我使用

安装了语义UI CSS。

npm install semantic-ui-css

命令，正在运行。我在node_modules目录中看到该目录，因此我假设它已正确安装。我还将package.json中的语义ui-css视为依赖项。

现在，当我在其中一个组件.vue文件中工作时，我想导入语义，以便创建下拉列表；

<template>
  <div id='user-button'>

      <div class="ui pointing dropdown top right" id='user'>
        <div class='text'>User</div>
        <div class="menu">
          <div class="item">Choice 1</div>
          <div class="item">Choice 2</div>
          <div class="item">Choice 3</div>
        </div>
      </div>

  </div>
</template>

<script>
import jquery from 'jquery'
import 'fomantic-ui-css/semantic'
import 'fomantic-ui-css/components/dropdown'

export default {
  name: 'me-dashboard-button-user',
  mounted: function() {
    jquery('.ui.dropdown').dropdown();
  }
}
</script>

在浏览器中运行此代码时，我的控制台出现错误；

[Vue warn]: Error in mounted hook: "TypeError: __WEBPACK_IMPORTED_MODULE_0_jquery___default(...)(...).dropdown is not a function"

当我在控制台中运行命令$('.ui.dropdown').dropdown()时，下拉菜单会立即生效。

我真的是NodeJS的新手，仍然习惯于这种方式。我通常只将CDN文件用于jQuery和Vue之类的框架，但是由于在不同文件中创建Vue组件非常容易，所以我喜欢这种方式。

有人可以帮我解决这个问题吗？

谢谢！

语义UI未在Vue项目中加载

0 个答案: