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

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

• npm install --save jquery

• затем в webpack.config файл (я только что добавил его в webpack.разработка.конфиг.js, но, возможно, добавьте его в конфигурационный файл prod):

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

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

  теперь jQuery доступен для всех приложений и компонентов.

хорошо, что теперь это же процесс для всех ваших внешних библиотек, которые вы хотите использовать (цифра, момент и т. д..), и конечно же, семантико-уй!

поехали :

• npm install --save semantic-ui-css

nb: вы можете использовать основное РЕПО (т. е. семантический-ui), но семантический-ui-css является базовой темой для семантического-ui.

Итак, вы должны, во-первых, определить псевдонимы в webpack.основа.конфиг.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/псевдоним там:

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 - like semantic-ui !)

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

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

  я делаю это, добавляя эту строку в начале главная.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>

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

и в скрипт :

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

вот результат :

пример sample 1

sample2

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

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