L'aide de vue.js avec interface utilisateur sémantique

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

• npm install --save jquery

• Puis dans votre webpack.config fichier (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.

La bonne chose est que c'est maintenant le même processus pour toutes vos bibliothèques externes que vous voulez utiliser (Chiffre Moment, etc..), et bien sûr sémantique-ui!

Allons-y:

• npm install --save semantic-ui-css

nb: vous pouvez utiliser le repo principal (c'est-à-dire semantic-ui) mais semantic-ui-CSS est le thème de base pour semantic-ui.

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

Sous resolve.alias ajoutez 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 libs externes alias :

// 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 là-bas (normalement ils devraient ressembler à ceux-là !)

...nous sommes sur le point de terminer...

L'étape suivante consiste à ajouter une référence d'alias au fournisseur du plugin, comme nous le faisons juste 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 {[23] } est seulement suffisant ; -)

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

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 la mienne projet (vous pouvez voir gridster, qui est un plugin jQuery - comme semantic-ui est !)

, Donc maintenant, juste une dernière chose à faire :

• Ajouter CSS sémantique:

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

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

Ensuite, après cette ligne Ajouter:

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 liste avec une case à cocher.

Et dans le script :

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

Voici le résultat :

Sample1

Sample2

Normalement, tout devrait fonctionner.

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