Использование vue.js с семантическим интерфейсом

Я пытаюсь использовать webpack + Semantic UI с Vue.js, и я нашел эту библиотеку https://vueui.github.io/

Но возникла проблема с компиляцией:

ERROR in ./~/vue-ui/components/sidebar/sidebar.jade
Module parse failed: /Project/node_modules/vue-    
ui/components/sidebar/sidebar.jade Unexpected token (1:24)
You may need an appropriate loader to handle this file type.

Итак, я установил нефрит (мопс), но все равно не повезло.

И вот в github комментарий для этой библиотеки:

WIP, не используйте (https://github.com/vueui/vue-ui)

Мне удалось импортировать семантический css в мои шаблоны следующим образом:

@import './assets/libs/semantic/dist/semantic.min.css';

Но проблема здесь в том, что я не могу использовать функции semantic.js, такие как dimmer и другие вещи.

Дело в том, что у меня уже есть старая кодовая база, написанная с семантикой, и было бы неплохо использовать какую-либо другую фреймворк css (bootstrap или материализовать).

Есть ли элегантный способ включить семантический интерфейс в мой проект vue.js?

ОТВЕТЫ

Ответ 1

1) Установите jQuery, если он не установлен (правильно!):

  • npm install --save jquery

  • затем в вашем файле webpack.config (я просто добавил его в файл webpack.dev.config.js, но, возможно, добавлю его в файл конфигурации prod):

    в плагинах добавить a new webpack.ProvidePlugin

    new webpack.ProvidePlugin({
    // jquery
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery'
})

    Теперь jQuery доступен для ВСЕХ приложений и компонентов.

Хорошо, что теперь это тот же самый процесс для ВСЕХ ваших внешних библиотек, которые вы хотите использовать (Numeral, Moment и т.д.), и, конечно, semantic-ui!

Отпустите:

  • npm install --save semantic-ui-css

nb: вы можете использовать основное репо (т.е. semantic-ui), но semantic-ui-css - основная тема для семантического-ui.

Итак, теперь вы должны, во-первых, определить псевдонимы в файле webpack.base.config.js:

под resolve.alias добавить псевдоним для семантики:

resolve: {
    extensions: ['', '.js', '.vue'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components'),
      // adding our externals libs
      'semantic': path.resolve(__dirname, '../node_modules/semantic-ui-css/semantic.min.js')
    }
  }

nb: вы можете поместить туда свои другие внешние псевдонимы libs:

// adding our externals libs
      'moment': path.resolve(__dirname, '../node_modules/moment/min/moment-with-locales.js'),
      'numeral': path.resolve(__dirname, '../node_modules/numeral/min/numeral.min.js'),
      'gridster': path.resolve(__dirname, '../node_modules/gridster/dist/jquery.gridster.min.js'),
      'semantic': path.resolve(__dirname, '../node_modules/semantic-ui-css/semantic.min.js'),
      'stapes': path.resolve(__dirname, '../node_modules/stapes/stapes.min.js')

nb: используйте свой собственный путь там (как правило, они должны выглядеть как те!)

... мы скоро закончим...

Следующий шаг - добавить ссылку на псевдоним для поставщика плагинов, например, мы просто делаем для jQuery =)

new webpack.ProvidePlugin({
      // jquery
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      // semantic-ui | TODO : is usefull since we import it
      semantic: 'semantic-ui-css',
      Semantic: 'semantic-ui-css',
      'semantic-ui': 'semantic-ui-css'
})

nb: здесь я использую несколько имен, возможно, семантику достаточно, -)

Снова вы можете добавить свой lib/alias:

new webpack.ProvidePlugin({
      // jquery
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      // gridster
      gridster: 'gridster',
      Gridster: 'gridster',
      // highcharts
      highcharts: 'highcharts',
      Highcharts: 'highcharts',
      // semantic-ui | TODO : is usefull since we import it
      semantic: 'semantic-ui-css',
      Semantic: 'semantic-ui-css',
      'semantic-ui': 'semantic-ui-css',
      // Moment
      moment: 'moment',
      Moment: 'moment',
      // Numeral
      numeral: 'numeral',
      Numeral: 'numeral',
      // lodash
      '_': 'lodash',
      'lodash': 'lodash',
      'Lodash': 'lodash',
      // stapes
      stapes: 'stapes',
      Stapes: 'stapes'
    })

Вот все внешние библиотеки, которые я использую в своем собственном проекте (вы можете видеть, что gridster, который является плагином jQuery, похожим на семантику!)

Итак, теперь самое последнее, что нужно сделать:

  • добавить семантический css:

    Я делаю это, добавляя эту строку в начало файла main.js:

    import '../node_modules/semantic-ui-css/semantic.min.css'

Затем после этой строки добавьте:

import semantic from 'semantic'

Теперь вы можете использовать его.

Пример в моем файле Vuejs:

<div class="dimension-list-item">
  <div class="ui toggle checkbox"
    :class="{ disabled : item.disabled }">
      <input type="checkbox"
        v-model="item.selected"
        :id="item.id"
        :disabled="item.disabled">
      <label :class="{disabled : item.disabled}" :for="item.id">{{item.label}} / {{item.selected}}</label>
  </div>
</div>

Этот фрагмент создает простую ячейку для списка с помощью флажка.

И в script:

export default {
  props: ['item'],
  ready() {    
    $(this.$el.childNodes[1]).checkbox()
  }
}

Здесь результат:

sample1

sample2

Обычно все должно работать нормально.

Я только начал развиваться с Vuejs на прошлой неделе, так что, может быть, там это лучший способ: -)

Ответ 2

Немного поздно, но теперь вы можете использовать это: https://github.com/Semantic-UI-Vue/Semantic-UI-Vue. Все еще WIP, но у него есть все основные функции.

Довольно прост в использовании:

import Vue form 'vue';
import SuiVue from 'semantic-ui-vue';

/* ... */

Vue.use(SuiVue);

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  template: '<sui-button primary>{{message}}</sui-button>'
});

API очень похожи на версию React: если вы ее использовали, это будет очень знакомо.

Вот JSFiddle, если вы хотите поиграть: https://jsfiddle.net/pvjvekce/

Отказ от ответственности: я создатель

Ответ 3

Это способ, которым я делаю это: (примечание: я использую vue-cli для создания своих проектов)

  • Перейдите в каталог vue project и выполните следующие действия:

1- установить gulp:

npm install -g gulp

2- Запустите следующие команды и следуйте инструкциям по установке.

npm install semantic-ui --save
cd semantic/
gulp build

3- После выполнения предыдущих команд у вас должна быть папка "dist" внутри вашей "семантической" папки. Переместите эту папку в папку "/static", расположенную в корне проекта.

4- Включите следующие строки в ваш HTML файл шаблона:

<link rel="stylesheet" type="text/css" href="/static/dist/semantic.min.css">
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script src="/static/dist/semantic.js"></script>

Ответ 4

  • Установить jquery npm install jquery
  • Установить семантический-ui-css npm install semantic-ui-css
  • Добавьте это в main.js

window.$ = window.jQuery = require('jquery') require('semantic-ui-css/semantic.css') require('semantic-ui-css/semantic.js')

Ответ 5

Если это происходит, все остальное работает, но ваши кнопки обязательно добавьте эту .ui form в вашу форму.