当前位置： 首页 > article >正文

「从零开始的 Vue 3 系列」：第十二章——Element Plus 组件的二次封装实践（保姆式）

article 2024/10/19 23:55:49

前言

本系列将从零开始，系统性地介绍 Vue 3 的常用 API，逐步深入每个核心概念与功能模块。通过详尽的讲解与实战演示，帮助大家掌握 Vue 3 的基础与进阶知识，最终具备独立搭建完整 Vue 3 项目的能力。

什么是ui组件的二次开发？二次开发有什么用？

在 Vue 3 中封装 Element UI 组件库是一个常见的需求，尤其是为了复用组件和提升开发效率。通过二次封装 Element UI（Element Plus）的组件，你可以在 Vue 3 项目中更高效地复用 UI 组件，并对特定的业务逻辑或样式做统一管理。在封装的过程中，建议保持组件的灵活性，确保对常用属性和事件的支持，这样可以在不同场景下复用而不丢失 Element Plus 组件的原有功能。下面将以常见方法带大家进一步的了解：
1.在项目中封装并使用
2.通过 NPM 配置并发布二次封装的 Element Plus 组件
3.通过 class 来封装并通过 class 来封装并使用 Vue 组件库

项目中封装并使用：

  • 步骤 1: 安装 Element Plus
npm install element-plus
  • 步骤 2: 引入 Element Plus 并全局注册组件
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');
  • 步骤 3: 二次封装组件

创建一个 components 目录，在其中创建一个 CustomButton.vue 文件：

<template>
  <el-button
    :type="type"
    :size="size"
    :icon="icon"
    :disabled="disabled"
    @click="handleClick"
  >
    <slot></slot>
  </el-button>
</template>

<script>
export default {
  name: 'CustomButton',
  props: {
    type: {
      type: String,
      default: 'primary', // 设置默认类型
    },
    size: {
      type: String,
      default: 'medium', // 设置默认大小
    },
    icon: {
      type: String,
      default: '', // 可选图标
    },
    disabled: {
      type: Boolean,
      default: false, // 禁用状态
    },
  },
  methods: {
    handleClick(event) {
      this.$emit('click', event); // 触发 click 事件
    },
  },
};
</script>

<style scoped>
/* 可以添加自定义样式 */
</style>
  • 步骤 4: 在项目中使用封装组件
<template>
  <div>
    <!-- 使用封装的按钮组件 -->
    <CustomButton type="success" @click="handleClick">点击我</CustomButton>
  </div>
</template>

<script>
import CustomButton from '@/components/CustomButton.vue';

export default {
  components: {
    CustomButton,
  },
  methods: {
    handleClick() {
      console.log('按钮被点击');
    },
  },
};
</script>

你可以进一步优化封装组件，例如统一处理事件、增加更多属性控制、甚至添加主题和样式扩展。

通过 NPM 配置并发布二次封装的 Element Plus 组件

  1. 同上先创建一个vue3项目并引入Element Plu ui组件
  2. 二次封装 Element Plus 组件
    在项目中封装一个自定义的 Element Plus 组件。以封装 ElButton 为例：创建 src/components/CustomButton.vue 文件
<template>
  <el-button
    :type="type"
    :size="size"
    :icon="icon"
    :loading="loading"
    :disabled="disabled"
    @click="handleClick"
  >
    <slot></slot>
  </el-button>
</template>

<script>
export default {
  name: 'CustomButton',
  props: {
    type: {
      type: String,
      default: 'primary',
    },
    size: {
      type: String,
      default: 'medium',
    },
    icon: {
      type: String,
      default: '',
    },
    loading: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleClick(event) {
      this.$emit('click', event); // 触发父组件的 click 事件
    },
  },
};
</script>

<style scoped>
/* 你可以在这里添加自定义样式 */
</style>
  1. 编辑 src/index.js 文件，将组件导出：
import CustomButton from './components/CustomButton.vue';

const components = [CustomButton];

const install = (app) => {
  components.forEach((component) => {
    app.component(component.name, component);
  });
};

export default {
  install,
};

export { CustomButton };
  1. 为了能够发布到 NPM，你需要确保 package.json 文件配置正确。
    确保 name、version、main 等字段已正确配置。main 字段指向你的打包输出文件，files 字段指向你想要发布的文件：
{
  "name": "my-custom-element",
  "version": "1.0.0",
  "main": "dist/index.js",
  "files": [
    "dist",
    "src"
  ],
  "scripts": {
    "build": "vue-cli-service build --target lib --name my-custom-element src/index.js",
    "serve": "vue-cli-service serve"
  },
  "dependencies": {
    "element-plus": "^2.0.0"
  },
  "devDependencies": {
    "@vue/cli-service": "^4.5.0"
  }
}
  1. 通过 Vue CLI 的库模式，将组件库打包成一个可以在其他项目中复用的库。
npm run build
  1. 发布到 NPM：

如果还没有登录 NPM，请先使用以下命令登录npm login

发布组件库：发布之前，确保项目版本号是唯一的，NPM 不允许相同版本号重复发布。然后执行发布命令npm login，成功后，组件库将会发布到 NPM，可以在其他项目中通过 NPM 安装并使用。

  1. 在其他项目中使用封装好的组件库
    在其他 Vue 3 项目中使用该组件库，只需要通过 NPM 安装：
    my-custom-element是你配置的 package.json中的name
npm install my-custom-element
  1. 在项目的 main.js 文件中全局注册组件库：
import { createApp } from 'vue';
import App from './App.vue';
import MyCustomElement from 'my-custom-element';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(MyCustomElement);
app.mount('#app');
  1. 使用封装的组件：
<template>
  <CustomButton type="success" @click="handleClick">点击我</CustomButton>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击');
    },
  },
};
</script>

通过 class 来封装并通过 class 来封装并使用 Vue 组件库

步骤 1：安装和初始化项目（这里不做过多演示，内容同上）
步骤2：二次封装 Element Plus 组件，并应用自定义的 CSS 类
在 Vue 中，我们通常通过 setup() 或 data() 函数处理组件逻辑。但你也可以使用 class 来封装组件的逻辑，将其应用到组件中。
1.创建 src/utils/ButtonHandler.js 文件：

export default class ButtonHandler {
  constructor(type = 'primary', size = 'medium') {
    this.type = type;
    this.size = size;
    this.isLoading = false;
  }

  startLoading() {
    this.isLoading = true;
  }

  stopLoading() {
    this.isLoading = false;
  }

  handleClick(event) {
    console.log('Button clicked', event);
    this.startLoading();
    setTimeout(() => {
      this.stopLoading();
    }, 2000);
  }
}

2.创建 src/components/CustomButton.vue，在组件中使用封装的 class：

<template>
  <el-button
    :type="handler.type"
    :size="handler.size"
    :loading="handler.isLoading"
    @click="handleClick"
  >
    <slot></slot>
  </el-button>
</template>

<script>
import ButtonHandler from '../utils/ButtonHandler';

export default {
  name: 'CustomButton',
  props: {
    type: {
      type: String,
      default: 'primary',
    },
    size: {
      type: String,
      default: 'medium',
    },
  },
  data() {
    return {
      handler: new ButtonHandler(this.type, this.size),
    };
  },
  methods: {
    handleClick(event) {
      this.handler.handleClick(event);
      this.$emit('click', event);
    },
  },
};
</script>

<style scoped>
/* 可选的自定义样式 */
</style>

步骤 3：打包组件库并发布到 NPM
1.编辑 src/index.js 文件，导出封装的组件：

import CustomButton from './components/CustomButton.vue';

const components = [CustomButton];

const install = (app) => {
  components.forEach((component) => {
    app.component(component.name, component);
  });
};

export default {
  install,
};

export { CustomButton };

2.配置 package.json：

{
  "name": "my-custom-element",
  "version": "1.0.0",
  "main": "dist/index.js",
  "files": [
    "dist",
    "src"
  ],
  "scripts": {
    "build": "vue-cli-service build --target lib --name my-custom-element src/index.js",
    "serve": "vue-cli-service serve"
  },
  "dependencies": {
    "element-plus": "^2.0.0"
  },
  "devDependencies": {
    "@vue/cli-service": "^4.5.0"
  }
}

3.执行打包命令：

npm run build

4.登录 NPM，并发布你的库：

npm login
npm publish

步骤 4：在其他项目中使用封装的组件库
1.安装自定义库：

npm install my-custom-element

2.在项目中全局注册库：main.js中引用

import { createApp } from 'vue';
import App from './App.vue';
import MyCustomElement from 'my-custom-element';

const app = createApp(App);
app.use(MyCustomElement);
app.mount('#app');

3.在组件中使用封装好的 class 组件：

<template>
  <CustomButton type="success" @click="handleClick">点击我</CustomButton>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击');
    },
  },
};
</script>

总结：二次封装 Element Plus 组件是提升项目开发效率的重要手段，能够使代码更加清晰、可维护性更强。在封装时，应重点关注组件的复用性和灵活性，避免过度封装。通过统一样式和行为扩展，能够实现功能的高效集成。

ps:以上内容仅为本人对 vue3的个人理解，如有不足之处，欢迎大家指正与交流，共同进步。

http://www.kler.cn/news/356528.html

相关文章：

  • 母婴商城(论文+源码)_kaic
  • 音视频入门基础：H.264专题（18）——AVCDecoderConfigurationRecord简介
  • conda打包
  • Vue 3中集成Element Plus组件库
  • 车载行业前瞻技术---AI应用前景分析
  • 软件产品国际化：前后端及App多语言版本解决方案（超详细实现过程)
  • 3.Java入门笔记--基础语法
  • Git Push 深度解析：命令的区别与实践
  • Linux 手撕线程池
  • vcenter的使用
  • linux查看系统类型
  • Sqli-labs less-27
  • Oracle 19C VIP跑到了PUBLIC IP上？
  • 学SQL第一天
  • 【C++】- STL之vector模拟实现
  • wifi、热点密码破解 - python
  • 8-基于双TMS320C6678 + XC7K420T的6U CPCI Express高速数据处理平台
  • oracle数据库---基本查询（单表查询、多表查询、子查询、分页查询、oracle内置函数、行列转换、集合运算）
  • 通过docker镜像安装elasticsearch和kibana
  • 充电桩高压快充发展趋势