Verwenden von vue.js mit semantischer Benutzeroberfläche

1) Installieren Sie jQuery-wenn Sie nicht bereits installiert (richtig!):

• npm install --save jquery

• dann in Ihre webpack.config - Datei (habe ich soeben im webpack.dev.config.jsaber vielleicht fügen Sie in der prod config-Datei):

  in den plugins hinzufügen new webpack.ProvidePlugin

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

  Nun jQuery ist erhältlich für ALLE Anwendungs-und Komponenten.

Die gute Sache ist, ist das nun der gleiche Prozess für ALLE externen Bibliotheken, die Sie verwenden möchten (Ziffer, Moment, etc..), und natürlich semantic-ui!

Let ' s go :

• npm install --save semantic-ui-css

nb : Sie können die Haupt-repo (z.B. semantic-ui), aber semantic-ui-css ist die basis-theme für semantic-ui.

So, jetzt, Sie müssen, Erstens, definieren Sie Aliase in den webpack.base.config.js Datei :

unter resolve.alias fügen Sie den alias für die semantische:

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 Ihren anderen externen libs-Aliase :

//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 : verwenden Sie Ihren eigenen Pfad gibt es (normal sollte Sie so Aussehen wie diese !)

...wir sind zum Schluss...

Nächste Schritt ist das hinzufügen von alias-Referenz auf das plugin-Anbieter, wie, die wir gerade tun, für 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 : hier verwende ich mehrere Namen, vielleicht semantische ist nur ausreichend 😉

Wieder, können Sie Ihre lib/alias es :

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 libs ich verwende in meinem eigenen Projekt (Sie können sehen, gridster, das ist ein jQuery-plugin, wie semantic-ui !)

So, jetzt, nur noch eine Letzte Sache zu tun :

• hinzufügen semantische css :

  Ich dies tun, durch hinzufügen dieser Zeile an den Anfang der main.js Datei :

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

Dann, nach dieser Zeile hinzufügen :

import semantic from 'semantic'

Nun können Sie es verwenden.

Beispiel in meinem 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>

Diesem snippet erstellen Sie eine einfache Zelle für eine Liste mit einer checkbox.

Und im Skript :

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

Hier das Ergebnis :

sample1

sample2

Normalerweise, sollte alles funktioniert einwandfrei.

Ich habe gerade angefangen zu entwickeln, mit Vuejs Letzte Woche so, vielleicht ist es
ist ein besserer Weg, um zu,; -)

InformationsquelleAutor der Antwort Yome Katsuma

Dies ist der Weg, dass ich es tun:
(Hinweis: ich benutze vue-cli, um meine Projekte)

• cd auf Ihre vue-Projekt-Verzeichnis und führen Sie Folgendes aus:

1 - Installation von gulp:

npm install -g gulp

2 - Führen Sie die folgenden Befehle und befolgen Sie die Anweisungen der installation.

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

3 - Nach Ausführung der vorhergehenden Befehle, die Sie haben sollte eine "dist" - Ordner in Ihrem "semantischen" - Ordner. Verschieben Sie diesen Ordner in den "/static" - Ordner befindet sich im Stammverzeichnis des Projekts.

4 - Fügen Sie die folgenden Zeilen in Ihre html-template-Datei:

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

InformationsquelleAutor der Antwort Benjamin Rodriguez