html模板 多列展示模板_系统软件开发_搜索引擎优化的办法有哪些_培训机构推荐

前言

本系列将从零开始，系统性地介绍 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>

3. 编辑 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 };

4. 为了能够发布到 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"}
}

5. 通过 Vue CLI 的库模式，将组件库打包成一个可以在其他项目中复用的库。

npm run build

6. 发布到 NPM：

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

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

7. 在其他项目中使用封装好的组件库
   在其他 Vue 3 项目中使用该组件库，只需要通过 NPM 安装：
   my-custom-element是你配置的 package.json中的name

npm install my-custom-element

8. 在项目的 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');

9. 使用封装的组件：

<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的个人理解，如有不足之处，欢迎大家指正与交流，共同进步。