Instalación y Ejemplo Inicial con Element UI en Vue.js

Configuración del Entorno de Ejecución

Para usar Element UI, se requiere un entorno basado en Vue.js. Se pueden seguir dos enfoques principales: integración con aplicaciones Vue o uso directo en HTML estático.

Instalación mediante npm

La instalación vía npm es la recomendada para proyectos que utiilzan bundlers como webpack. Ejecute el siguiente comando en su terminal:

npm install element-ui --save

Integración a través de CDN

Para prototipos rápidos o proyectos sin sistema de módulos, se puede usar la versión CDN de Element UI. Añada los recursos en el HTML:

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

Se aconseja fijar la versión en la URL para evitar problemas de compatibilidad en futuras actualizaciones.

Incorporación de Element UI en Vue

Importación Completa

Para cargar todos los componentes, edite el archivo principal de su aplicación Vue, como main.js:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

const application = new Vue({
  el: '#app',
  render: h => h(App)
});

Los estilos deben importarse por separado.

Importaicón Selectiva

Para optimizar el tamaño del bundle, se pueden importar solo los componentes necesarois usando babel-plugin-component. Primero, instale el plugin:

npm install babel-plugin-component --save-dev

Luego, configure el archivo de Babel (.babelrc) así:

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    ["component", {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }]
  ]
}

Posteriormente, importe únicamente los componentes deseados en main.js:

import Vue from 'vue';
import { Button as ElButton, Select as ElSelect } from 'element-ui';
import App from './App.vue';

Vue.component(ElButton.name, ElButton);
Vue.component(ElSelect.name, ElSelect);

const appInstance = new Vue({
  el: '#app',
  render: h => h(App)
});

La lista completa de componentes puede consultarse en el archivo components.json del paquete.

Ajustes Globales

Al cargar Element UI, se puede pasar un objeto de configuración para establecer propiedades como el tamaño por defecto y el índice z de las capas emergentes.

Con importación completa:

import Vue from 'vue';
import Element from 'element-ui';

Vue.use(Element, { size: 'medium', zIndex: 2500 });

Con importación selectiva:

import Vue from 'vue';
import { Button } from 'element-ui';

Vue.prototype.$ELEMENT = { size: 'medium', zIndex: 2500 };
Vue.use(Button);

Estas configuraciones afectarán a todos los componentes que admitan la propiedad size y a las capas emergentes.

Ejemplo Práctico: Aplicación HTML Simple

A continuación, un ejemplo básico de HTML que muestra botones estilizados y un cuadro de diálogo.


<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo Element UI</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
  <div id="root-app">
    <el-button @click="toggleModal = true">Abrir Diálogo</el-button>
    <div style="margin-top: 20px;">
      <el-button type="default">Estándar</el-button>
      <el-button type="primary">Primario</el-button>
      <el-button type="success">Éxito</el-button>
    </div>
    <el-dialog :visible.sync="toggleModal" title="Ejemplo Modal">
      <p>Este es un componente de Element UI.</p>
    </el-dialog>
  </div>
  <script>
    new Vue({
      el: '#root-app',
      data: {
        toggleModal: false
      }
    });
  </script>
</body>
</html>

Ejemplo de Aplicación Vue con Webpack

En un proyecto Vue.js estructurado, los componentes se pueden organizar de la siguiente manera.

Archivo App.vue:

<template>
  <div id="main-container">
    <el-row :gutter="10">
      <el-col :span="8">
        <el-button>Default</el-button>
      </el-col>
      <el-col :span="8">
        <el-button type="primary">Primary</el-button>
      </el-col>
      <el-col :span="8">
        <el-button type="success">Success</el-button>
      </el-col>
    </el-row>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'RootComponent'
};
</script>

<style scoped>
#main-container {
  padding: 1rem;
}
</style>

Archivo main.js con importación selectiva:

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import { Button, Row, Col, Dialog, Message } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

const components = [Button, Row, Col, Dialog];

components.forEach(component => {
  Vue.use(component);
});

Vue.prototype.$message = Message;

Vue.config.productionTip = false;

const root = new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

Etiquetas: element-ui vue-cli npm cdn babel-plugin-component

Publicado el 6-2 09:07

Friki Work