web前端全系列 教程
1839个小节阅读:2244.1k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0
的桌面端组件库
Element Plus 基于 Vue 3
,面向设计师和开发者的组件库
npm install element-plus --save
如果你对打包后的文件大小不是很在乎,那么使用完整导入会更方便
ximport { 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
然后修改vite.config.js
配置文件
xxxxxxxxxx
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
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
答案
1=>C