2021-08-24 13:36:48 +08:00
|
|
|
|
# Inicio rápido
|
2020-08-13 15:18:26 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
Esta sección describe cómo utilizar ElementPlus en su proyecto.
|
2020-08-13 15:18:26 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
## Uso de componentes
|
2020-08-13 15:18:26 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
### Introducción completa de todos los componentes
|
2020-08-13 15:18:26 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
> main.ts
|
2020-08-13 15:18:26 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
```typescript
|
2020-11-23 16:28:06 +08:00
|
|
|
|
import { createApp } from 'vue'
|
2021-08-24 13:36:48 +08:00
|
|
|
|
import ElementPlus from 'element-plus'
|
|
|
|
|
|
import 'element-plus/dist/index.css'
|
|
|
|
|
|
import App from './App.vue'
|
2020-08-13 15:18:26 +08:00
|
|
|
|
|
2020-10-16 11:14:34 +08:00
|
|
|
|
const app = createApp(App)
|
2021-08-24 13:36:48 +08:00
|
|
|
|
|
2020-10-16 11:14:34 +08:00
|
|
|
|
app.use(ElementPlus)
|
|
|
|
|
|
app.mount('#app')
|
2020-08-13 15:18:26 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
### Introducción de componentes a la carta
|
|
|
|
|
|
|
|
|
|
|
|
El código JS en `ElementPlus` soporta
|
|
|
|
|
|
[tree shaking](https://webpack.js.org/guides/tree-shaking/) basado en módulos ES
|
|
|
|
|
|
por defecto.
|
|
|
|
|
|
|
|
|
|
|
|
> App.vue
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<template>
|
2021-09-04 19:29:28 +08:00
|
|
|
|
<el-button> Soy ElButton </el-button>
|
2021-08-24 13:36:48 +08:00
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
2021-09-04 19:29:28 +08:00
|
|
|
|
import { defineComponent } from 'vue'
|
|
|
|
|
|
import { ElButton } from 'element-plus'
|
|
|
|
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
|
|
|
|
name: 'app'
|
|
|
|
|
|
components: {
|
|
|
|
|
|
ElButton,
|
|
|
|
|
|
},
|
|
|
|
|
|
})
|
2021-08-24 13:36:48 +08:00
|
|
|
|
</script>
|
2020-08-13 15:18:26 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
### Introducción de estilos
|
2020-08-13 15:18:26 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
**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](https://www.cloudflare.com/learning/cdn/what-is-a-cdn/)
|
|
|
|
|
|
para cargar los archivos de estilo, haciendo así que su aplicación cargue más rápido.
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
Introducido por medio de JS
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
```typescript
|
|
|
|
|
|
import 'element-plus/dist/index.css'
|
2021-03-27 19:18:36 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
Introducido a través de las cabeceras HTML
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
```html
|
|
|
|
|
|
<!-- index.html -->
|
|
|
|
|
|
<head>
|
2021-09-04 19:29:28 +08:00
|
|
|
|
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
|
2021-08-24 13:36:48 +08:00
|
|
|
|
</head>
|
2021-03-27 19:18:36 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
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](/#/es/component/quickstart#faqs)
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
## Plantilla de proyecto de construcción rápida
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
### Use vue-cli@4.5
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
Hemos preparado los correspondientes plugins vue-cli para la nueva versión de
|
|
|
|
|
|
[Element Plus plugins](https://github.com/element-plus/vue-cli-plugin-element-plus)
|
|
|
|
|
|
que puede utilizar para construir rápidamente un proyecto basado en
|
|
|
|
|
|
Proyecto Element Plus.
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
### Use Starter Kit
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
Proporcionamos [plantillas de proyecto](https://github.com/element-plus/element-plus-starter)
|
|
|
|
|
|
genéricas que puede utilizar directamente, además de proporcionar
|
|
|
|
|
|
Vite [plantilla](https://github.com/element-plus/element-plus-vite-starter). Para
|
|
|
|
|
|
Los usuarios de Laravel, también tenemos una
|
|
|
|
|
|
[plantilla correspondiente](https://github.com/element-plus/element-plus-in-laravel-starter)
|
|
|
|
|
|
que también puede descargar y utilizar directamente.
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
## Configuración global
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
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.
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
Presentación completa de ElementPlus.
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
|
|
|
|
|
```js
|
2021-08-24 13:36:48 +08:00
|
|
|
|
import { createApp } from 'vue'
|
2021-09-04 19:29:28 +08:00
|
|
|
|
import ElementPlus from 'element-plus'
|
|
|
|
|
|
import App from './App.vue'
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
const app = createApp(App)
|
2021-09-04 19:29:28 +08:00
|
|
|
|
app.use(ElementPlus, { size: 'small', zIndex: 3000 })
|
2021-03-27 19:18:36 +08:00
|
|
|
|
```
|
2020-08-13 15:18:26 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
Presentación de Element on demand.
|
2020-08-13 15:18:26 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
```js
|
2020-11-23 16:28:06 +08:00
|
|
|
|
import { createApp } from 'vue'
|
2021-09-04 19:29:28 +08:00
|
|
|
|
import { ElButton } from 'element-plus'
|
|
|
|
|
|
import App from './App.vue'
|
2021-03-27 19:18:36 +08:00
|
|
|
|
// import 'element-plus/packages/theme-chalk/src/base.scss'
|
2020-08-13 15:18:26 +08:00
|
|
|
|
|
2020-11-23 16:28:06 +08:00
|
|
|
|
const app = createApp(App)
|
2021-08-24 13:36:48 +08:00
|
|
|
|
app.config.globalProperties.$ELEMENT = option
|
2021-09-04 19:29:28 +08:00
|
|
|
|
app.use(ElButton)
|
2020-08-13 15:18:26 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
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.
|
2020-08-13 15:18:26 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
## Cómo empezar
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
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。
|
2020-11-23 16:28:06 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
### Use Nuxt.js
|
2020-11-23 16:28:06 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
También podemos utilizar [Nuxt.js](https://nuxtjs.org)：
|
2020-11-23 16:28:06 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
|
|
|
|
|
|
<iframe src="https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true" alt="nuxt-with-element on glitch" style="height: 100%; width: 100%; border: 0;"></iframe>
|
|
|
|
|
|
</div>
|
2020-08-13 15:18:26 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
## FAQs
|
2020-08-13 15:18:26 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
### Quiero introducir tanto componentes como estilos a la carta, ¿qué debo hacer?
|
2020-08-13 15:18:26 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
Puede conseguirlo en función del bundler que esté utilizando actualmente, con
|
|
|
|
|
|
Plugins compatibles con ElementPlus.
|
2020-08-13 15:18:26 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
#### Carga de estilos a la carta con vite
|
2020-08-13 15:18:26 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
Si utiliza [vite](https://vitejs.dev) como herramienta de compilación, deberá instalar
|
|
|
|
|
|
primero `vite-plugin-element-plus` para cargar los estilos bajo demanda.
|
2020-11-23 16:28:06 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
```shell
|
|
|
|
|
|
yarn add vite-plugin-element-plus -D
|
|
|
|
|
|
# o
|
|
|
|
|
|
npm install vite-plugin-element-plus -D
|
2020-08-13 15:18:26 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
A continuación, añada el siguiente código al archivo `vite.config.js`:
|
2020-08-13 15:18:26 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
```typescript
|
|
|
|
|
|
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
|
|
|
|
|
|
}),
|
|
|
|
|
|
],
|
|
|
|
|
|
})
|
2020-08-13 15:18:26 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
#### Carga de estilos bajo demanda con webpack
|
2020-08-13 15:18:26 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
Si estás usando webpack como herramienta de empaquetado, entonces necesitas instalar
|
|
|
|
|
|
primero `babel-plugin-import` para cargar los estilos bajo demanda
|
2020-08-13 15:18:26 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
```shell
|
|
|
|
|
|
yarn add babel-plugin-import -D
|
|
|
|
|
|
# o
|
|
|
|
|
|
npm install babel-plugin-import -D
|
|
|
|
|
|
```
|
2020-08-13 15:18:26 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
A continuación, debe añadir el siguiente código a su archivo `babel.config.js`.
|
2020-08-13 15:18:26 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
> babel.config.js
|
2020-08-13 15:18:26 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
```javascript
|
|
|
|
|
|
module.exports = {
|
|
|
|
|
|
plugins: [
|
|
|
|
|
|
[
|
2021-09-04 19:29:28 +08:00
|
|
|
|
'import',
|
2021-08-24 13:36:48 +08:00
|
|
|
|
{
|
|
|
|
|
|
libraryName: 'element-plus',
|
2021-08-26 15:11:47 +08:00
|
|
|
|
// import component
|
|
|
|
|
|
customName: (name) => {
|
|
|
|
|
|
name = name.slice(3)
|
|
|
|
|
|
return `element-plus/lib/components/${name}`
|
|
|
|
|
|
},
|
|
|
|
|
|
// import style
|
2021-08-24 13:36:48 +08:00
|
|
|
|
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
|
2021-08-26 15:11:47 +08:00
|
|
|
|
// 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`
|
2021-08-24 13:36:48 +08:00
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
2021-09-04 19:29:28 +08:00
|
|
|
|
],
|
2021-08-26 15:11:47 +08:00
|
|
|
|
}
|
2021-08-24 13:36:48 +08:00
|
|
|
|
```
|
