vue props example data component change javascript webpack single-page-application vue.js semantic-ui

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



vue router change title (4)

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

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?

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

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>

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