Usando vue.js con interfaz de usuario semántica

1) Instale jQuery si no está instalado (correctamente!):

• npm install --save jquery

• Luego en su webpack.config archivo (acabo de agregarlo en webpack.dev.config.js, pero quizás agregarlo en el archivo de configuración prod):

  En los plugins añadir un new webpack.ProvidePlugin

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

  Ahora jQuery está disponible para TODAS las aplicaciones y componentes.

Lo bueno es que ahora es el mismo proceso para TODAS tus bibliotecas externas que quieras usar (Numeral, Momento, etc..), y por supuesto semantic-ui!

Vamos: {[14]]}

• npm install --save semantic-ui-css

nb: puedes usar el repositorio principal (es decir, semantic-ui) pero semantic-ui-css es el tema base para semantic-ui.

Así que, ahora, tienes que, en primer lugar, definir alias en el webpack.basar.config.js archivo:

En resolve.alias agregue el alias para semántica:

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: usted puede poner allí sus otros alias libs externos :

// 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: use su propio camino allí (normalmente deberían parecerse a esos !)

...estamos a punto de terminar...

El siguiente paso es agregar una referencia de alias al proveedor del plugin, como hacemos con 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 : aquí uso varios nombres, tal vez semántica es solo suficiente; -)

De nuevo, puede agregar su lib / alias allí:

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

Aquí están todas las libs externas que estoy usando en mi propio proyecto (se puede ver gridster, que es un plugin de jQuery - como semantic-ui es !)

Así que ahora, solo una última cosa que hacer: {[14]]}

• Añadir css semántico:

  Hago esto agregando esta línea al principio de la principal.js archivo:

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

Luego, después de esta línea añadir:

import semantic from 'semantic'

Ahora puedes usarlo.

Ejemplo en mi archivo 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>

Este fragmento crea una celda simple para un lista con una casilla de verificación.

Y en la escritura:

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

Aquí el resultado:

Sample1

Sample2

Normalmente, todo debería funcionar bien.

Acabo de empezar a desarrollar con Vuejs la semana pasada, así que, tal vez hay es una mejor manera de que; -)