mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-14 09:20:51 +08:00

fix(components): exposing style folder for select dropdpwn (#3077 )

- Fix the error importing in style file
- Update plugin usage for `babel-plugin-import`

2021-08-26 15:11:47 +08:00

6.5 KiB

Raw Blame History

Inicio rápido

Esta sección describe cómo utilizar ElementPlus en su proyecto.

Uso de componentes

Introducción completa de todos los componentes

main.ts

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

Introducción de componentes a la carta

El código JS en ElementPlus soporta tree shaking basado en módulos ES por defecto.

App.vue

<template>
  <el-button>
    Soy ElButton
  </el-button>
</template>
<script>
import { defineComponent } from 'vue'
import { ElButton } from 'element-plus'

export default defineComponent({
  name: 'app'
  components: {
    ElButton,
  },
})
</script>

Introducción de estilos

Recomendamos encarecidamente traer los archivos de estilo completos directamente, aunque pueda parecer que esto aumenta el tamaño de toda la aplicación, al hacerlo se evita la introducción de plugins de herramientas de empaquetado adicionales (una carga menor) y también se puede utilizar el CDN para cargar los archivos de estilo, haciendo así que su aplicación cargue más rápido.

Introducido por medio de JS

import 'element-plus/dist/index.css'

Introducido a través de las cabeceras HTML

<!-- index.html -->
<head>
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
</head>

Si quiere que los estilos se introduzcan también a la carta, puede utilizar el complemento que proporciona la herramienta correspondiente para referenciarlos. Ver FAQ

Plantilla de proyecto de construcción rápida

Use vue-cli@4.5

Hemos preparado los correspondientes plugins vue-cli para la nueva versión de Element Plus plugins que puede utilizar para construir rápidamente un proyecto basado en Proyecto Element Plus.

Use Starter Kit

Proporcionamos plantillas de proyecto genéricas que puede utilizar directamente, además de proporcionar Vite plantilla. Para Los usuarios de Laravel, también tenemos una plantilla correspondiente que también puede descargar y utilizar directamente.

Configuración global

Al introducir Element Plus, se puede pasar un objeto de configuración global. Este objeto soporta actualmente los campos size y zIndex. "tamaño se utiliza para cambiar el tamaño por defecto del componente y zIndex establece el índice z inicial de la caja emergente (valor por defecto: 2000). El Elemento Plus se presenta a la demanda de la siguiente manera.

Presentación completa de ElementPlus.

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 });

Presentación de Element on demand.

import { createApp } from 'vue'
import { ElButton } from 'element-plus';
import App from './App.vue';
// import 'element-plus/packages/theme-chalk/src/base.scss'

const app = createApp(App)
app.config.globalProperties.$ELEMENT = option
app.use(ElButton);

Con la configuración anterior, todos los componentes del proyecto con la propiedad size tendrán un tamaño por defecto de pequeño y el índice z inicial de la caja emergente será de 3000.

Cómo empezar

Ahora que se ha configurado un entorno de desarrollo basado en Vue y Element Plus, es el momento de escribir el código. Consulte la documentación de cada componente para saber cómo utilizarlos。

Use Nuxt.js

También podemos utilizar Nuxt.js：

FAQs

Quiero introducir tanto componentes como estilos a la carta, ¿qué debo hacer?

Puede conseguirlo en función del bundler que esté utilizando actualmente, con Plugins compatibles con ElementPlus.

Carga de estilos a la carta con vite

Si utiliza vite como herramienta de compilación, deberá instalar primero vite-plugin-element-plus para cargar los estilos bajo demanda.

yarn add vite-plugin-element-plus -D
# o
npm install vite-plugin-element-plus -D

A continuación, añada el siguiente código al archivo vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VitePluginElementPlus from 'vite-plugin-element-plus'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    VitePluginElementPlus({
      // Si necesita utilizar el archivo fuente [nombre del componente].scss,
      // deberá descomentar el mismo a continuación.
      // Para todas las APIs puede consultar la documentación en https://github.com/element-plus/vite-plugin-element-plus
      // para los comentarios de la documentación
      // useSource: true
    }),
  ],
})

Carga de estilos bajo demanda con webpack

Si estás usando webpack como herramienta de empaquetado, entonces necesitas instalar primero babel-plugin-import para cargar los estilos bajo demanda

yarn add babel-plugin-import -D
# o
npm install babel-plugin-import -D

A continuación, debe añadir el siguiente código a su archivo babel.config.js.

babel.config.js

module.exports = {
  plugins: [
    [
      "import",
      {
        libraryName: 'element-plus',
        // import component
        customName: (name) => {
          name = name.slice(3)
          return `element-plus/lib/components/${name}`
        },
        // import style
        customStyleName: (name) => {
          name = name.slice(3)
          // Si necesitas el archivo [nombre].scss, entonces necesitas comentar
          // la línea de código anterior y descomentar la siguiente línea de código
          // return `element-plus/lib/components/${name}/style`
          // Si necesita el archivo [nombre].css, debe devolver la siguiente línea
          return `element-plus/lib/components/${name}/style/css`
        },
      },
    ],
  ]
}

6.5 KiB Raw Blame History Unescape Escape