The team before I found Element in Zhihu last time has already developed Element-Plus. It seems that we can continue to use Element in Vue3. In my mind, Element is a really good framework and the design style is the most friendly. A UI component framework that looks very comfortable. So today we are going to write an introductory article about Element-Plus, which is available on the website:
element-plus
Let’s start by building Vue3 environment, first we need to install the Node environment, which you can install by yourself, paste the node download path:
npm install @vue/cli -g
Copy the codeThen we start creating the project using the command:
vue create element-plus-test
Copy the codeFor the first step we select: Default (Vue 3 Preview) ([Vue 3] Babel, esLint) and press Enter.
Step 2: Select Use Yarn to install dependencies and press Enter.
Step 3: Usually our projects rely on element-Plus:
cd element-plus-test
yarn add element-plus
Copy the codeFourth, we need to import components as needed, so we need to install the following plug-ins:
yarn add babel-plugin-component
Copy the codeWe then create a new.babelrc file in the element-plus-test root directory to configure the element-plus import as needed:
{
"plugins": [
[
"component".
{
"libraryName": "element-plus".
"styleLibraryName": "theme-chalk"
}
]
]
}
Copy the codeStep 5: We need to introduce the element-plus component in SRC /main.js:
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
import {
ElAlert,
ElAside,
ElAutocomplete,
ElAvatar,
ElBacktop,
ElBadge,
ElBreadcrumb,
ElBreadcrumbItem,
ElButton,
ElButtonGroup,
ElCalendar,
ElCard,
ElCarousel,
ElCarouselItem,
ElCheckbox,
ElCheckboxButton,
ElCheckboxGroup,
ElCol,
ElCollapse,
ElCollapseItem,
ElColorPicker,
ElContainer,
ElDatePicker,
ElDialog,
ElDivider,
ElDrawer,
ElDropdown,
ElDropdownItem,
ElDropdownMenu,
ElFooter,
ElForm,
ElFormItem,
ElHeader,
ElIcon,
ElImage,
ElInput,
ElInputNumber,
ElLink,
ElMain,
ElMenu,
ElMenuItem,
ElMenuItemGroup,
ElOption,
ElOptionGroup,
ElPageHeader,
ElPagination,
ElPopconfirm,
ElPopover,
ElPopper,
ElProgress,
ElRadio,
ElRadioButton,
ElRadioGroup,
ElRate,
ElRow,
ElSelect,
ElSlider,
ElStep,
ElSteps,
ElSubmenu,
ElSwitch,
ElTabPane,
ElTable,
ElTableColumn,
ElTabs,
ElTag,
ElTimePicker,
ElTimeSelect,
ElTimeline,
ElTimelineItem,
ElTooltip,
ElTransfer,
ElTree,
ElUpload,
ElInfiniteScroll,
ElLoading,
ElMessage,
ElMessageBox,
ElNotification,
} from 'element-plus';
const components = [
ElAlert,
ElAside,
ElAutocomplete,
ElAvatar,
ElBacktop,
ElBadge,
ElBreadcrumb,
ElBreadcrumbItem,
ElButton,
ElButtonGroup,
ElCalendar,
ElCard,
ElCarousel,
ElCarouselItem,
ElCheckbox,
ElCheckboxButton,
ElCheckboxGroup,
ElCol,
ElCollapse,
ElCollapseItem,
ElColorPicker,
ElContainer,
ElDatePicker,
ElDialog,
ElDivider,
ElDrawer,
ElDropdown,
ElDropdownItem,
ElDropdownMenu,
ElFooter,
ElForm,
ElFormItem,
ElHeader,
ElIcon,
ElImage,
ElInput,
ElInputNumber,
ElLink,
ElMain,
ElMenu,
ElMenuItem,
ElMenuItemGroup,
ElOption,
ElOptionGroup,
ElPageHeader,
ElPagination,
ElPopconfirm,
ElPopover,
ElPopper,
ElProgress,
ElRadio,
ElRadioButton,
ElRadioGroup,
ElRate,
ElRow,
ElSelect,
ElSlider,
ElStep,
ElSteps,
ElSubmenu,
ElSwitch,
ElTabPane,
ElTable,
ElTableColumn,
ElTabs,
ElTag,
ElTimePicker,
ElTimeSelect,
ElTimeline,
ElTimelineItem,
ElTooltip,
ElTransfer,
ElTree,
ElUpload,
]
const plugins = [
ElInfiniteScroll,
ElLoading,
ElMessage,
ElMessageBox,
ElNotification,
]
components.forEach(component= > {
app.component(component.name, component)
})
plugins.forEach(plugin= > {
app.use(plugin)
})
app.mount('#app')
Copy the codeFinally, we in the SRC/component/HelloWorld vue using el – button component:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<el-row>
<el-button>The default button</el-button>
<el-button type="primary">The main button</el-button>
<el-button type="success">Successful button</el-button>
<el-button type="info">Information button</el-button>
<el-button type="warning">The warning button</el-button>
<el-button type="danger">Dangerous button</el-button>
</el-row>
<el-row>
<el-button plain>A simple button</el-button>
<el-button type="primary" plain>The main button</el-button>
<el-button type="success" plain>Successful button</el-button>
<el-button type="info" plain>Information button</el-button>
<el-button type="warning" plain>The warning button</el-button>
<el-button type="danger" plain>Dangerous button</el-button>
</el-row>
<el-row>
<el-button round>The rounded button</el-button>
<el-button type="primary" round>The main button</el-button>
<el-button type="success" round>Successful button</el-button>
<el-button type="info" round>Information button</el-button>
<el-button type="warning" round>The warning button</el-button>
<el-button type="danger" round>Dangerous button</el-button>
</el-row>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
</div>
</template>
<script>
export default {
name: 'HelloWorld'.
props: {
msg: String
}
}
</script>
<! -- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
Copy the codeFinally we run the project using the following command:
npm run serve
Copy the codeHere’s what we see: