目录
一、 Element-Plus的概念
就是简化了Vue开发网站,其中有许多组件,按钮,表单等等我们可以直接拿来使用
二、安装Element-Plus
(1)完整引入
//完整引入的命令 npm install element-plus --save
若是对于打包后的文件大小不在乎,那么使用完整引入更加方便
//首先第一步在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)按需引入
我们通常使用的是按需引入,因为真实开发中并不是每个组件都会用到
第一步需要安装一些配置,命令如下: 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()] }) ] } })
三、Vue3加载Element-Plus的字体图标
Vue3加载Element-Plus的其他内容不需要特别注意,只要复制粘贴即可,但是加载字体图标需要特别注意一下
第一步安装字体图标 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)
最后一步便是在官网上复制粘贴需要的效果的代码