基于Vue3 + Typescript 封装 Element-Plus 组件

最新推荐文章于 2025-05-09 14:53:53 发布

前端贾公子

最新推荐文章于 2025-05-09 14:53:53 发布

阅读量960

点赞数 19

分类专栏： element ui 文章标签： typescript javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_63358859/article/details/140032676

版权

1. 课程简介

项目地址 git clone https://gitee.com/childe-jia/my-message.git

背景: 该课程是基于Vue3 + Typescript + Vite构建, 教会大家封装Element-Plus组件

具备能力:

最新的 Vue3 及相关技术
组件的设计思想
大厂的开发模式/代码规范

技术:

Vue3
- 首次渲染 / diff 算法更快
- 内存占用 / 打包体积更少
- Composition API 组合 API
  - Options API：基于对象的方式，将组件的各种选项，如data、methods、computed等，组织在一个对象中
  - Composition API：允许我们将组件的逻辑拆分成更小的、可复用的部分，从而实现更高度的组件复用。
Typescript
- 介绍: 是一种带有 类型语法 的 JavaScript 语言，在任何使用 JavaScript 的开发场景中都可以使用。
  - JavaScript 代码
```
// 没有明确的类型
const age = 18
```
  - TypeScript 代码
```
// 有明确的类型，可以指定age是number类型(数字类型)
const age: number = 18
```
- 作用: 编译时进行类型检查提示错误
```
const num = 18;
num.toLowerCase() 
// Uncaught TypeError: num.toLowerCase is not a function
```
  这些错误导致在开发项目的时候，需要花挺多的时间去定位和处理 BUG
  
  原因：
  - JS 是动态类型的编程语言，动态类型最大的特点就是它只能在 代码执行 期间做类型的相关检查，所以往往你发现问题的时候，已经晚了。
  解决方案
  - TS 是静态类型的编程语言，代码会先进行编译然后去执行，在 代码编译 期间做类型的相关检查，如果有问题编译是不通过的，也就暴露出了问题。
  TS 优势
  - 更早发现错误，提高开发效率
  - 随时随地提示，增强开发体验
  - 强大类型系统，代码可维护性更好
Vite
- 一种新型前端构建工具，能够显著提升前端开发体验
- 对比 webpack
  - webpack构建原理
    - 需要查找依赖，打包所有的模块，然后才能提供服务，更新速度会随着代码体积增加越来越慢
- vite 的原理
  - 使用原生 ESModule 通过 script 标签动态导入，访问页面的时候加载到对应模块编译并响应

在这里插入图片描述

Vue3 + TS + Vite 最新的开发技术栈，你还在等什么…

2. 项目创建

掌握：使用 create-vue 脚手架创建项目

create-vue参考地址：https://github.com/vuejs/create-vue

执行创建命令：

# pnpm
pnpm create vue
# npm
npm init vue@latest
# yarn
yarn create vue

选择项目依赖内容

在这里插入图片描述

3. 组件需求分析

3.1 Message 消息提示 - 组件分析

功能分析

常用于主动操作后的反馈提示
提示在一定时间后可以消失
可以手动关闭
有多种类型 ( success warning error message)

难点

使用函数式的方式来创建组件

createMessage('hello Vue', props)
// 如何将一个组件函数式的渲染到一个节点上?
// 可以采用createApp?.....


类型属性分析

```typescript 
interface MessageProps {
    message?: stirng;
    duration?: number;
    showClose?: boolean;
    type?: 'primary' : 'success' : .... 
}

事件以及实例

const instance = createMessage('hello world', props)
instance.close()

事件以及实例

const instance = createMessage('hello world', props)
instance.close()

3.2 Message组件创建

创建目录
- Message
  - style.css - 样式
  - Message.vue - 组件
  - method.ts - api方法
  - types.ts - 辅助的 typescript 类型
报错:

Component name “Message” should always be multi-word

原因:

要求组件名称以驼峰格式命名, 自定义组件名称应该由多个单词组成, 防止和html标签冲突, 所以会报错

解决:

.eslintrc.js
```
  rules: {
     
    // 关闭组件命名规则
    'vue/multi-word-component-names': 'off'
  }
```
编写