Semanti c UI не загружается в Vue проекте - PullRequest
Новая
       9

Semanti c UI не загружается в Vue проекте

0 голосов
/ 13 апреля 2020

Я создаю свой первый веб-сайт с Vue. JS в качестве фреймворка данных и Semanti c UI в качестве CSS фреймворка. Я использую NodeJS пакет для создания моих Javascript файлов. В моем пакете NodeJS я установил Semanti c UI CSS с командой 

npm install semantic-ui-css

, которая работает. Я вижу каталог в моем каталоге node_modules, поэтому я предполагаю, что он установлен правильно. Я также вижу semanti c -ui- css как зависимость в моем пакете. json.

Теперь, когда я работаю с одним из моих компонентов. vue файлов, я хочу импортировать Semanti c, чтобы я мог создать раскрывающийся список; 

<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 -компоненты так легко создавать в разных файлах, я люблю работать таким образом.

Может кто-нибудь помогите разобраться?

Спасибо!

...