Vue.js mit semantischer Benutzeroberfläche verwenden

1) Installieren Sie jQuery, wenn es nicht installiert ist (richtig!):

• npm install --save jquery

• dann in Ihrer webpack.config -Datei (ich habe es gerade in webpack.dev.config.js hinzugefügt, aber vielleicht in der Prod-Konfigurationsdatei hinzugefügt):

  fügen Sie in den Plugins einen new webpack.ProvidePlugin hinzu.

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

  Jetzt ist jQuery für ALLE Anwendungen und Komponenten verfügbar.

Das Gute ist, dass dies jetzt derselbe Vorgang für ALLE Ihre externen Bibliotheken ist, die Sie verwenden möchten (Zahl, Moment usw.) und natürlich Semantic-Ui!

Lass uns gehen :

• npm install --save semantic-ui-css

nb: Sie können das Haupt-Repo verwenden (d. h. semantic-ui), aber semantic-ui-css ist das Basisthema für semantic-ui.

Nun müssen Sie zunächst in der Datei webpack.base.config.js Aliase definieren:

unter resolve.alias fügen Sie den Alias ​​für semantisch hinzu:

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: Sie können dort Ihre anderen externen lib-Aliase angeben:

// 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: benutze dort deinen eigenen Pfad (normalerweise sollten sie so aussehen!)

... wir sind kurz davor ...

Der nächste Schritt ist das Hinzufügen eines Alias-Verweises zum Plugin-Provider, wie wir es gerade für jQuery = tun.

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: hier verwende ich mehrere Namen, vielleicht ist semantisch nur ausreichend ;-)

Wieder können Sie Ihre lib/Alias ​​dort hinzufügen: 

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'
    })

Hier sind alle externen Bibliotheken, die ich in meinem eigenen Projekt verwende (Sie können gridster sehen, ein jQuery-Plugin - wie Semantic-ui!)

Also jetzt nur noch eine letzte Sache zu tun:

• semantic css hinzufügen:

  Dazu füge ich diese Zeile am Anfang der Datei main.js hinzu:

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

Dann nach dieser Zeile hinzufügen:

import semantic from 'semantic'

Jetzt kannst du es benutzen.

Beispiel in meiner Vuejs-Datei:

<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>

Dieses Snippet erstellt eine einfache Zelle für eine Liste mit einem Kontrollkästchen.

Und im Skript:

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

Hier das Ergebnis:

sample1

sample2

Normalerweise sollte alles gut funktionieren.

Ich habe letzte Woche angefangen, mich mit Vuejs zu entwickeln, also vielleicht dort ist der bessere Weg dazu ;-)