web-dev-qa-db-fra.com

Utilisation de vue.js avec une interface utilisateur sémantique

J'essaie d'utiliser webpack + l'interface utilisateur sémantique avec Vue.js et j'ai trouvé cette bibliothèque https://vueui.github.io/

Mais il y avait un problème compling:

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.

J'ai donc installé du jade (pug) mais toujours pas de chance.

Et il y a un commentaire dans github pour cette librairie:

WIP, n'utilisez pas ( https://github.com/vueui/vue-ui )

J'ai réussi à importer du css sémantique dans mes modèles comme ceci:

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

Mais le problème ici est que je ne peux pas utiliser les fonctions sémantiques.js comme dimmer et d’autres choses. 

Le fait est que je possède déjà une ancienne base de code écrite avec la sémantique et il serait bon de ne pas utiliser un autre framework CSS (bootstrap ou matérialiser).

Existe-t-il un moyen élégant d’inclure une interface utilisateur sémantique dans mon projet vue.js?

javascriptwebpacksingle-page-applicationvue.jssemantic-ui
25
T0plomj3r

1) Installez jQuery s'il n'est pas installé (correctement!):

  • npm install --save jquery

  • puis dans votre fichier webpack.config (je viens de l'ajouter dans webpack.dev.config.js, mais peut-être l'ajouter dans le fichier de configuration prod):

    dans les plugins ajouter un new webpack.ProvidePlugin

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

    Maintenant, jQuery est disponible pour TOUTES les applications et tous les composants.

Le point positif est qu’il s’agit maintenant du même processus pour TOUTES vos bibliothèques externes que vous souhaitez utiliser (Numeral, Moment, etc.), et bien sûr sémantique-ui!

Allons-y :

  • npm install --save semantic-ui-css

nb: vous pouvez utiliser le référentiel principal (c'est-à-dire, sémantique-ui) mais sémantique-ui-css est le thème de base de sémantique-ui.

Donc, maintenant, vous devez d’abord définir les alias dans le fichier webpack.base.config.js:

sous resolve.alias ajouter l'alias pour sémantique:

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: vous pouvez y mettre vos autres alias de libs externes:

// 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: utilisez votre propre chemin d'accès (normalement, ils devraient ressembler à ceux-là!)

... nous sommes sur le point de finir ...

La prochaine étape consiste à ajouter une référence alias au fournisseur de plug-in, comme nous venons de le faire pour 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: ici, j'utilise plusieurs noms, peut-être que sémantique suffit seulement ;-)

Encore une fois, vous pouvez ajouter votre lib/alias ici: 

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

Voici toutes les bibliothèques externes que j'utilise dans mon propre projet (vous pouvez voir gridster, qui est un plugin jQuery - comme sémantique-ui!)

Alors maintenant, une dernière chose à faire:

  • ajouter des css sémantiques:

    Je le fais en ajoutant cette ligne au début du fichier main.js:

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

Ensuite, après cette ligne, ajoutez:

import semantic from 'semantic'

Maintenant, vous pouvez l'utiliser.

Exemple dans mon fichier 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>

Cet extrait crée une cellule simple pour une liste avec une case à cocher.

Et dans le script:

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

Voici le résultat:

échantillon1

échantillon2

Normalement, tout devrait bien fonctionner.

Je viens de commencer à développer avec Vuejs la semaine dernière, alors, peut-être là-bas est un meilleur moyen d'y arriver ;-)

34
Yome Katsuma

Un peu tard, mais vous pouvez maintenant utiliser ceci: https://github.com/Semantic-UI-Vue/Semantic-UI-Vue . Toujours WIP, mais il a toutes les fonctionnalités de base.

Assez facile à utiliser:

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

Les API sont très similaires à la version de React: si vous l’utilisez, cela vous sera très familier.

Voici un JSFiddle si vous voulez vous amuser: https://jsfiddle.net/pvjvekce/

Disclaimer: je suis le créateur

4
Mario Lamacchia

Voici comment je le fais: (note: j'utilise vue-cli pour créer mes projets)

  • accédez au répertoire de votre projet vue et procédez comme suit:

1- installer gulp:

npm install -g gulp

2- Exécutez les commandes suivantes et suivez les instructions d'installation.

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

3- Après avoir exécuté les commandes précédentes, vous devriez avoir un dossier "dist" dans votre dossier "sémantique". Déplacez ce dossier dans le dossier "/ static" situé à la racine du projet.

4- Incluez les lignes suivantes dans votre fichier de modèle 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>
1
Benjamin Rodriguez
  1. Installez jquery npm install jquery
  2. Installez sémantic-ui-css npm install semantic-ui-css
  3. Ajoutez ceci dans main.js

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

0
Sanyam Jain