微服务 教程
1085个小节阅读:195.7k
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0
的桌面端组件库
Element Plus 基于 Vue 3
,面向设计师和开发者的组件库
xxxxxxxxxx
npm install element-plus --save
如果你对打包后的文件大小不是很在乎,那么使用完整导入会更方便
xxxxxxxxxx
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
按需导入才是我们的最爱,毕竟在真实的应用场景中并不是每个组件都会用到,这会造成不小的浪费
首先你需要安装unplugin-vue-components
和 unplugin-auto-import
这两款插件
xxxxxxxxxx
npm install -D unplugin-vue-components unplugin-auto-import
然后修改vue.config.js
配置文件
xxxxxxxxxx
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()]
})
]
}
})
最后,可以直接在组件中使用
xxxxxxxxxx
<template>
<el-button>Default</el-button>
<el-button type="primary">Primary</el-button>
</template>
实时效果反馈
1. 在Vue3项目中引入饿了么UI组件库,下来命令正确的是:
A npm install --save element-iu
B vue add element
C npm install element-plus --save
D vue add element-plus