wake-up-neo.com

Vue.js mit semantischer Benutzeroberfläche verwenden

Ich versuche, Webpack + Semantic UI mit Vue.js zu verwenden, und ich habe diese Bibliothek gefunden https://vueui.github.io/

Es gab jedoch ein Problem bei der Ergänzung:

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.

Also habe ich Jade (Mops) installiert, aber immer noch kein Glück.

Und in github gibt es einen Kommentar für diese Bibliothek:

WIP, nicht verwenden ( https://github.com/vueui/vue-ui )

Ich habe es geschafft, semantic css wie folgt in meine Vorlagen zu importieren:

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

Das Problem hierbei ist jedoch, dass ich semantic.js-Funktionen wie Dimmer und anderes nicht verwenden kann. 

Die Sache ist, dass ich bereits eine alte Codebase mit Semantik geschrieben habe, und es wäre gut, kein anderes CSS-Framework (Bootstrap oder Materialise) zu verwenden.

Gibt es eine elegante Möglichkeit, eine semantische Benutzeroberfläche in mein vue.js-Projekt aufzunehmen?

25
T0plomj3r

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

34
Yome Katsuma

Ein bisschen spät, aber jetzt können Sie Folgendes verwenden: https://github.com/Semantic-UI-Vue/Semantic-UI-Vue . Immer noch WIP, aber es verfügt über alle grundlegenden Funktionen.

Ziemlich einfach zu bedienen:

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

Die APIs sind der React-Version sehr ähnlich: Wenn Sie sie verwenden, ist dies sehr vertraut.

Hier ist ein JSFiddle, wenn Sie herumspielen wollen: https://jsfiddle.net/pvjvekce/

Disclaimer: Ich bin der Schöpfer

4
Mario Lamacchia

So mache ich es: (Hinweis: Ich verwende vue-cli, um meine Projekte zu erstellen)

  • cd in Ihr vue-Projektverzeichnis und führen Sie folgende Schritte aus:

1- Schluck installieren:

npm install -g gulp

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

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

3- Nachdem Sie die vorherigen Befehle ausgeführt haben, sollten Sie einen Ordner "dist" in Ihrem Ordner "semantic" haben. Verschieben Sie diesen Ordner in den Ordner "/ static", der sich im Stammverzeichnis des Projekts befindet.

4- Fügen Sie die folgenden Zeilen in Ihre HTML-Vorlagendatei ein:

<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>
1
  1. Jquery installieren npm install jquery
  2. Installieren Sie semantic-ui-css npm install semantic-ui-css
  3. Fügen Sie dies in main.js hinzu

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

0
Sanyam Jain

Wenn es passiert, funktioniert alles andere, aber Ihre Schaltflächen stellen sicher, dass Sie diese hinzufügen .ui form zu Ihrem Formular.

0
Thomas Chirwa