![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
组件封装
Best_卡卡
一天不掉发,心里就空空的
展开
-
仿Element-UI组件封装系列1-alert组件
Alert组件提前准备好字体文件@font-face {font-family: "iconfont"; src: url('//at.alicdn.com/t/font_1699077_nnhvr47tsmd.eot?t=1584947660650'); /* IE9 */ src: url('//at.alicdn.com/t/font_1699077_nnhvr47tsmd.eot?t=1584947660650#iefix') format('embedded-opentype'), /原创 2020-10-25 22:47:11 · 811 阅读 · 0 评论 -
仿Element-UI组件封装起步3-vue-cli创建项目
目标:搭建一个用来开发,测试公共组件库的项目架子通过vuecli创建项目,这个项目创建的目的有三个:维护组件库(不是某个具体的业务项目哦,而是造轮子)本地测试组件库整体打包上传到npm使用脚手架工具创建项目命令:vue create XXXXX项目名尽量不要太大众(与别人重复),后期我们会把这个项目打包上传到npm上,如果你的名字与现有的包名重复,则无法上传。要点:vue2.0 + Babel + Router + Linter/Formatter + less? Pl原创 2020-10-25 22:33:33 · 173 阅读 · 0 评论 -
仿Element-UI组件封装起步2-vue公共组件的创建和使用
目标:以button按钮为例,学习如何封装(与具体项目无关的组件–vant)及使用公共组件知识点:Vue.component() – 定义全局组件Vue.use() – 使用插件全局组件和局部组件局部组件绝大多数vue项目就只有一个实例(new Vue()只运行一次),即:一个项目就只有一个vue实例我们前面写组件一般都是直接写在vue实例中的,也就是局部组件这个组件不能在另一个项目中使用(复制粘贴代码不算哈)。典型使用格式:import XXX fro原创 2020-10-25 22:25:40 · 356 阅读 · 0 评论 -
仿Element-UI组件封装起步1-介绍
组件库封装基本介绍目标:( 造轮子)自己动手封装一个公共组件库(我们自己的element-ui, vant)放置在npm上,其它用户通过 npm i yourUIName 来下载安装使用组件 。意义:更加深入地学习vue组件相关的知识组件之间数据共享, 事件,props,插槽…Vue.component(), render()如何开发Vue的插件: Vue.use()学会封装一个公共组件库,打包,发布到npm,迭代开发…有利于提高竞争力学习内容:Vue.use()用v原创 2020-10-25 22:18:30 · 176 阅读 · 0 评论 -
仿Element-UI组件封装系列6-轮播图组件
目标:实现一个轮播图组件基本步骤:开发组件。packages/slider/slider.vue添加到packages/index.js,全局注册在测试页面中使用组件准备工作添加组件创建一个组件<template> <div class=''> 我是一个轮播图组件 </div></template><script>export default { name: 'MySlider'}&原创 2020-10-24 23:47:23 · 970 阅读 · 0 评论