Inicialización de Vue+Element Plus

1. Inicializar el proyecto    Vue

Crear un proyecto   vue3

vue create k8s-platform-fe

2. Presentación de Element Plus

Para instalar element-plus, primero instale estos paquetes dependientes e impórtelos después de la instalación. Los métodos de importación incluyen referencia global e importación local. De hecho, es lo mismo que un componente, donde se importa localmente y se usa. Si cada página implica el uso de componentes de elementos, no es necesario introducir los componentes uno por uno, solo necesita importarlos globalmente en main.js.

#进入项目目录
cd k8s-platform-fe

#安装element plus，这些依赖是根据每个项目去隔离的
npm install element-plus

Los íconos de element-ui se pueden usar directamente sin importar uno por uno. Pero element-plus debe importarse uno por uno. Si el ícono no se ha registrado globalmente, debe importarse y el ícono se puede usar después de importarlo, es decir, una importación parcial, para que se pueda usar directamente cuando se use el ícono más adelante, y no hay necesidad de importarlo de nuevo.

A continuación se completa la inicialización de todo el elemento.

import { createApp } from 'vue'
import App from './App.vue'

//导入elementplus
import ElementPlus, { ElIcon } from 'element-plus'
//默认情况下找的是node_models目录下的，导入样式表
import 'element-plus/dist/index.css'
//导入element-plus所有图标
import * as ELIcons from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'

//改造vue初始化实例
const app = createApp(App)
//将所有图标注册为组件
for (let iconName in ELIcons){
    //第一个参数是你注册的组件名，这里是原生的组件名,第二个参数是组件
    app.component(iconName,ElIcon[iconName])
}
//使用element-plus
app.use(ElementPlus)
app.mount('#app')

El componente es un componente registrado. En main.js, es un registro global. Se puede usar en todas partes. El uso es una característica del uso de un paquete de terceros, es decir, la instalación de un complemento vue. Te gusta antd, elementplus , enrutador, etc., a excepción de npm install , también se requiere Vue para introducir este complemento.

App.vue es el siguiente: 

<template>
  <P>elemnet-plus组件如下</P>
 <el-button type="primary">这是一个elemnet按钮</el-button>
</template>

<script>
export default {
  name: 'App',

}
</script>

 Esto significa éxito.