javascript - props - Usando vue.js con UI semántica

vue router change title

Question

Intento usar webpack + Semantic UI con Vue.js y encontré esta biblioteca https://vueui.github.io/

Pero hubo compilación de problemas:

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.

Entonces instalé jade (pug) pero todavía no tuve suerte.

Y hay comentarios en github para esa lib:

WIP, no use ( https://github.com/vueui/vue-ui )

He logrado importar css semánticos en mis plantillas de esta manera:

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

Pero el problema aquí es que no puedo usar las funciones semánticas.js como dimmer y otras cosas.

Lo que pasa es que ya tengo una antigua base de código escrita con semántica y sería bueno no usar ningún otro marco css (bootstrap o materializar).

¿Hay alguna forma elegante de incluir la interfaz de usuario semántica en mi proyecto vue.js?

Answer 1

1. Instalar jquery npm install jquery
2. Instalar semantic-ui-css npm install semantic-ui-css
3. Añadir esto en main.js

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

Answer 2

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

• npm install --save jquery

• luego en su archivo webpack.config (lo acabo de agregar en webpack.dev.config.js , pero tal vez lo agregue al archivo de configuración de prod):

  en los complementos agrega 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 las bibliotecas externas que quiere usar (Numeral, Moment, etc.) y, por supuesto, semántica-ui!

Vamonos :

• npm install --save semantic-ui-css

nb: puede usar el repositorio principal (es decir, semántico-ui), pero semántico-ui-css es el tema de base para semántica-ui.

Entonces, ahora, primero debe definir Alias en el archivo webpack.base.config.js :

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: puedes poner tus otros alias de 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: usa tu propio camino allí (¡normalmente deberían verse como esos!)

... estamos a punto de terminar ...

El siguiente paso es agregar una referencia de alias al proveedor de complementos, como lo hacemos para 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 la semántica es 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 (puedes ver gridster, que es un plugin de jQuery, como semántico-ui es!)

Entonces, solo una última cosa que hacer:

• agregar semánticas css:

  Hago esto agregando esta línea al principio del archivo main.js :

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

Luego, después de esta línea, agregue:

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 una lista con una casilla de verificación.

Y en script:

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

Aquí el resultado:

sample1

sample2

Normalmente, todo debería funcionar bien.

Empecé a desarrollar con Vuejs la semana pasada, así que quizás haya una mejor manera de hacerlo ;-)

Answer 3

Esta es la forma en que lo hago: (nota: uso vue-cli para crear mis proyectos)

• cd al directorio de su proyecto vue y haga lo siguiente:

1- instalar trago:

npm install -g gulp

2- Ejecute los siguientes comandos y siga las instrucciones de la instalación.

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

3- Después de ejecutar los comandos anteriores, debe tener una carpeta "dist" dentro de su carpeta "semántica". Mueva esta carpeta a la carpeta "/ static" ubicada en la raíz del proyecto.

4- Incluye las siguientes líneas en tu archivo de plantilla 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>

Answer 4

Un poco tarde, pero ahora puedes usar esto: https://github.com/Semantic-UI-Vue/Semantic-UI-Vue . Todavía WIP pero tiene todas las funcionalidades básicas.

Bastante fácil de usar:

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

Las API son muy similares a la versión React: si la usaste, te resultará muy familiar.

Aquí hay un JSFiddle si quieres jugar: https://jsfiddle.net/pvjvekce/

Descargo de responsabilidad: yo soy el creador