前言：应上级要求，搭建一个公司内部的vue组件库，由于临近我预计的离职时间，所以只将流程梳理实践了一遍。假设组件库名称为ui-library。一、使用vue-cli3创建ui-library项目vue create ui-library创建项目时选择自定义模板，我的配置如下 记得vue版本需要选择2.x。ui-library目录如下 二、在根目录添加vue.conf
我们都知道Vue作为一个轻量级的低门槛入门前端框架，其核心就是 组件化开发 。Vue就是由多个组件组建成的，组件化是它的精髓，更是它的强大之处。各组件实例之间是相互独立的，这也就意味着不同组件之间数据是无法相互共用。 但实际项目开发中，我们时常需要其他组件的数据，为此诞生了组件通信的问题。针对组件之 ...
转载
2021-08-10 09:28:00
182阅读
2评论
带你快速了解Vue2和Vue3开发组件的区别，技术尝鲜~
转载
2022-05-06 10:36:19
565阅读
一、组件的介绍 现代前端技术都是由组件构建成一个大型项目,最开始使用组件构建项目的可能是react,之后angular2,vue都使用组件构建大型项目二、创建组件的几种方式1、全局创建组件Vue.component('component2', { template: '<h1>我是组件2</h1>'})2、局部创建组件var app = new Vue({ el: '#a
原创
2021-06-15 16:04:58
86阅读
一、组件化开发思想
1. 什么是组件化开发
组件化开发指的是：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。例如：ibootstrap - Bootstrap 可视化布局系统 所展示的效果，就契合了组件化开发的思想。用户可以通过拖拽组件的方式，快速生成一个页面的布局结构。
2. 组件化开发的好处
前端组件化开发的好处主要体现在以下两方面：
提高了前端代码的复用性和灵活
vue3组件创建，vue3组件全局注册，vue3组件插槽封装
原创
2022-11-18 00:08:52
182阅读
? 背景最近项目中需要制作一个图层拖拽到组的交互（如下图展示），今天分享一下这个组件功能。希望能抛砖引玉，给大家带来启发。?需求功能1.新建组，再新建图层，在组下显示；2.新建组没选中，则图层和组在同级；3.图层拖拽可以在一级也可在组下面；4.组拖拽只能在一级，不能叠加到组内；5.组删除，该组下图层全部删除；6.组点击眼睛，该组下图层全部显示，点击闭眼，该组下图层全部不显示。?设计开发先说一下我的
原创
2023-08-03 20:39:55
331阅读
1.组件拆分1.组件实质上也是一个vue实例，因此组件中也可以使用vue的对象属性，反过来每一个vue实例也是一个vue组件（注：1.唯一不同的是el是根实例的特有选项，2.组件中的data必须是一个函数）；2.如果vue实例中没有template模板的定义，那么vue会把el挂载点下的html作为vue实例的模板；3.模板中如果还有子组件，父组件调用子组件的时候，通过属性的方式进行调用，那么子组
由于后期项目要使用ts，所以先学习下，这是第一次使用ts，要是有不足之处，还请多指教。最开始因为webpack版本问题搭了好几次没成功，果然失败乃成功之母，古人诚不欺我，每次学习都是在写bug解决bug继续创造bug的循环里痛并快乐着。由于使用的是Vue-cli2 + webpack3.6.0版本，按照webpack3的方式来搭建的，所以安装时一定要注意自己的版本与插件版本哈。前边儿初始化Vue项
什么是组件，构成组件的三部分，定义（过滤器，监听器，计算属性，方法区），style开启less语法
上一篇文章小编用Vue的语法编写了一个简单的todoList，实现的逻辑比较简单，但是在实际项目中，会涉及到一些比较复杂的逻辑，比如在item中添加各种各样的标签，再加上甲方爸爸提出各种各样的需求，最后可能把我们搞到崩溃。所以引入了在组件化的概念。在组件化之前，小编先跟大家补充一些基础知识。一、数据 ...
转载
2021-08-26 20:37:00
233阅读
2评论
00.组件入门 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D ...
转载
2021-09-10 12:40:00
126阅读
2评论
打包发布理解打包作用：用webpack把.vue,.less.js ----> 浏览器可直接执行的代码。命令: npm run build结果：内部集成了webpack,会在根目录下创建 /dist，在这个目录下创建打包完成的结果。chunk:块 vendors代理商app-hash值.js ：主入口chunk-vendors：第三方包的代码统一放在这里（dayjs,vue,vuex,vue
一、生命周期钩子函数 对于前端的vue,react,angular的几大框架来说,说到生命周期钩子函数可能会想到react,vue中也有生命周期钩子函数二、生命周期钩子函数1、beforeCreate组件实例刚创建,在计算属性之前(比如计算data属性)2、created组件实例创建完成,属性已经绑定,但是DOM还未生成($el属性还不存在)3、beforeMount挂载之前4、mou
原创
2021-06-15 16:05:01
247阅读
Vue组件的基本概念Vue组件是一种可复用的Vue实例，用于封装可重用的HTML元素、JavaScript代码和CSS样式。它可以让开发者更好地组织和复用代码，使Web应用程序更加可维护和可扩展Vue组件通常由三部分组成：模板（template）、数据（data）和方法（methods）。模板：用于定义组件的结构和布局；数据：用于存储组件的状态和属性；方法：用于定义组件的行为和逻辑；以下是一个简单
? 背景最近项目中需要制作一个颜色选择器（如下图展示），今天分享一下这个组件功能。希望能抛砖引玉，给大家带来启发。?需求功能icon或者文字颜色需要选择颜色?设计开发先说一下我的开发环境版本：node: v11.3.0npm: 6.4.1vue：2.5.11如果不是以上版本也没关系，今日分享的思路，相信你可以自己造出来~首先点击空白收缩： this.handler = function(e) {
原创
2023-09-07 20:40:25
1292阅读
三. 组件化开发
原创
2022-09-13 12:16:53
252阅读
<div id="app"> <navbar></navbar> <pagefooter></pagefooter></div>Vue.component('navbar',{ template:'#navbar',
转载
2022-05-26 16:51:15
1430阅读
组件
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 js 特性扩展。
1. 全局 Vue.component(tagName, options)
<!DOCTYPE html>
<
转载
2021-06-29 16:17:37
343阅读
