Table of contents
1. The concept of Element-Plus
3. Vue3 loads the font icon of Element-Plus
1. The concept of Element-Plus
It simplifies the Vue development website, where there are many components, buttons, forms, etc. that we can use directly
2. Install Element-Plus
(1) Complete introduction
//完整引入的命令 npm install element-plus --save
If you don't care about the size of the packaged file, it is more convenient to use the complete import
//首先第一步在main.js文件中导入element-plus需要的文件 import { createApp } from 'vue' import App from './App.vue' import './registerServiceWorker' import router from './router' import store from './store' //使用element-plus需要引入的文件 import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; createApp(App).use(store).use(ElementPlus).use(router).mount('#app')
//第二步直接去官网找你想要的效果的代码复制粘贴就行 //components文件夹下的helolo.vue <template> <div class="hello"> <h1>{ { msg }}</h1> <el-row class="mb-4"> <el-button>Default</el-button> <el-button type="primary">Primary</el-button> <el-button type="success">Success</el-button> <el-button type="info">Info</el-button> <el-button type="warning">Warning</el-button> <el-button type="danger">Danger</el-button> </el-row> </div> </template> <script> export default { } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
(2) Import on demand
We usually use on-demand import, because not every component will be used in real development
第一步需要安装一些配置,命令如下: npm install -D unplugin-vue-components unplugin-auto-import
第二步是将下面的代码粘贴复制到vue.config.js配置文件中 const { defineConfig } = require('@vue/cli-service') const AutoImport = require('unplugin-auto-import/webpack') const Components = require('unplugin-vue-components/webpack') const { ElementPlusResolver } = require('unplugin-vue-components/resolvers') module.exports = defineConfig({ transpileDependencies: true, configureWebpack: { plugins: [ AutoImport({ resolvers: [ElementPlusResolver()] }), Components({ resolvers: [ElementPlusResolver()] }) ] } })
3. Vue3 loads the font icon of Element-Plus
Vue3 does not need to pay special attention to loading other elements of Element-Plus, just copy and paste, but loading font icons requires special attention
第一步安装字体图标 npm install @element-plus/icons-vue
第二步在项目根目录下创建plugins文件夹,在文件夹下创建icons.js文件,并写如下代码 import * as components from "@element-plus/icons-vue"; export default { install: (app) => { for (const key in components) { const componentConfig = components[key]; app.component(componentConfig.name, componentConfig); } }, };
在main.js文件引入如下 import elementIcon from "./plugins/icons"; app.use(elementIcon)
最后一步便是在官网上复制粘贴需要的效果的代码