网盘地址:https://pan.baidu.com/s/17MAhLxPomNMyL2Y29ZMMfA 提取码: 36uw
腾讯微云下载地址:https://share.weiyun.com/NHFepirL 密码:hd9ctm
[完结16章]Vue3.3 + TS4 ,自主打造媲美 ElementPlus的组件库——进阶必学,2023最新 ,打造媲美ElementPlus的组件库
Element Plus 是一个基于 Vue 3 的高质量 UI 组件库。它包含了丰富的组件和扩展功能,例如表格、表单、按钮、导航、通知等,让开发者能够快速构建高质量的 Web 应用。Element Plus 的设计理念是:提供开箱即用的 UI 组件和扩展功能,帮助开发者快速构建应用程序,同时提供详细的文档和教程,让开发者更好地掌握和使用 Element Plus。
官方续作 ——Vue 3.0 组件库
Element Plus,由饿了么大前端团队开源出品的一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。
Element Plus 使用 TypeScript + Composition API 进行了重构,主要有:
使用 TypeScript 开发,提供完整的类型定义文件
使用 Vue 3.0 Composition API 降低耦合,简化逻辑
使用 Vue 3.0 Teleport 新特性重构挂载类组件
使用 Lerna 维护和管理项目
使用更轻量更通用的时间日期解决方案 Day.js
升级适配 popperjs, async-validator 等核心依赖
完善 52 种国际化语言支持
除此以外,还有:
全新的视觉 *
优化的组件 API
更多自定义选项
更加详尽友好的文档
在 vite + create-vue + vue3 + ts 项目中使用element-plus步骤
1, 下载安装element-plus
cnpm i element-plus / yarn add element-plus
2, 下载elment-plus按需导入插件
cnpm i unplugin-vue-components unplugin-auto-import
3, 配置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()],
}),
],
})
4, 在页面中直接使用组件库即可
<el-button type="primary" plain>Primary</el-button>