Vue+Element Plus initialization

1. Initialize the Vue project   

Create a vue3 project  

vue create k8s-platform-fe

2. Introducing Element Plus

To install element-plus, first install these dependent packages, and import them after installation. The import methods include global reference and local import. In fact, it is the same as a component, where it is imported locally and used. If each page involves the use of element components, there is no need to introduce components one by one, then you only need to import them globally in main.js.

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

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

The icons of element-ui can be used directly without importing one by one. But element-plus needs to be imported one by one. If the icon has not been registered globally, it needs to be imported, and the icon can be used after importing it, that is, partial import, so that it can be used directly when using the icon later, and there is no need to import it again.

The following is the initialization of the entire element is completed.

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

Component is a registered component. In main.js, it is a global registration. It can be used everywhere. Use is a feature of using a third-party package, that is, installing a vue plug-in. You like antd, elementplus, router, etc., except for npm install , Vue is also required to introduce this plugin.

App.vue is as follows: 

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

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

}
</script>

 This means success.