![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue3基础
文章平均质量分 96
VillanelleS
Und wenn du lange in einen Abgrund blickst, blickt der Abgrund auch in dich hinein.
Friedrich Nietzsche
展开
-
Vue进阶之Vue无代码可视化项目(九)
登录注册真这么简单吗?针对普通的table,数据量特别大的时候,要怎么做呢?Canvas是没有事件机制的,因此这个事件(鼠标点击事件等)需要我们自己代理去做,把这个事件计算,拿到位置等后处理选中单元格现在smooth-dnd属于是年久失修的一个状态了,因为目前已经不支持vue3的这部分内容了,所以我们使用的时候,需要先在他基础上拓展一下将拖拽的逻辑提取出来DndContainer.js文件,做封装DndContainer.js原创 2024-08-02 00:51:26 · 918 阅读 · 0 评论 -
Vue进阶之Vue无代码可视化项目(八)
将components/RightPanel.vue 移到components/RightPanel目录下去这里,只有通过computed、watch、将他的api这些语法全部连接起来,它才会有一个响应式的表现,如果不这样做,只会在初始化进来的时候操作一次,后续的话,是不会再走的,这也是跟React很大的一个区别。之前探讨过更细颗粒度的更新,更细粒度的管理,在React中是通过信号的方式来进行状态的维护的。TextSetting.vueImageSetting.vueChartSetting.v原创 2024-07-29 17:28:39 · 461 阅读 · 0 评论 -
Vue进阶之Vue无代码可视化项目(七)
右侧栏配置主要是表单相关的内容,表单处理是开发中用的特别多的场景;今天从架构师的视角来看下这个表单怎么设计,动态表单、复杂表单、表单联动。先将左侧栏复制一份粘到右侧栏上views/LayoutView.vue全部代码:现在的import包是没有按照顺序去排列的,应该有一个排列顺序才对,这里应该安装一个eslint插件来去自动修复的,全部代码:.eslintrc.cjs全部代码:pnpm i安装LeftPanel.vueLayoutView.vueBlockRenderer.原创 2024-07-18 15:44:31 · 961 阅读 · 0 评论 -
Vue进阶之Vue无代码可视化项目(六)
接下来要做的是,中间区域Block相关的内容,block相关的内容最重要的就是,数据协议设计和整体渲染器的逻辑渲染器概念:简单点说就是,封装他的组件。比如做了一个图表,可以说封装了一个图表组件,如果做了一个表单校验,可以说做了一个表单校验组件,或者写了一些业务组件,但是这些点要是上升一点,就是,表单渲染 – 表单渲染器,表单渲染组件,表单规则约定 – 表单规则校验器;可以美化这些词语,提高简历数据协议:左边物料区有很多的物料列表,将左边的物料拖到中间编排区进行编排,拖拽之后,这些内容区域就能组装成一个页面,原创 2024-07-17 18:12:44 · 882 阅读 · 0 评论 -
Vue进阶之Vue无代码可视化项目(五)
全部代码:LayoutView.vue全部代码:stores/debug.ts全部代码:stores/editor.ts跨模块的数据需要存在store中AppNavigator.vue全部代码:全部代码:store/editor.ts全部代码:LeftPanel.vue全部代码:LayoutView.vue全部代码:原创 2024-06-24 16:42:17 · 997 阅读 · 0 评论 -
Vue进阶之Vue无代码可视化项目(四)
创建LeftPanelLayoutView.vuebase.css全部代码:LeftPanel.vue分类:流式、自由、grid、retoolpackage.json:创建文件componentsSmoothDndSmoothDndContainer.ts - 容器SmoothDndDraggable.ts - 拖拽对象utils.tsSmoothDndContainer.tsutils.tsSmoothDndDraggable.tsLe原创 2024-06-05 00:20:12 · 838 阅读 · 0 评论 -
Vue进阶之Vue无代码可视化项目(三)
stores/counter.ts创建editor.ts文件LayoutView.vueicon-park githubicon-park官网store/debug.ts创建debug.ts文件src/components/AppNavigator.vuesrccomponents_test_AppNavigator.tsAppNavigator.vueAppNavigator.ts:AppNavigator.vue:theme样式创建rese原创 2024-06-02 16:41:04 · 1099 阅读 · 0 评论 -
Vue进阶之Vue无代码可视化项目(二)
创建ActionsView、DataSourceView、LayoutView三个文件。删除示例文件AboutView、AboutAboutView、HomeView三个文件。原创 2024-06-01 22:04:29 · 891 阅读 · 0 评论 -
Vue进阶之Vue无代码可视化项目(一)
eslint跑起来的过程中需要指定一个env环境,这个千万不要忘记了。除了已有的基础架子之外,还要在这基础上再加一些规范化的产物。.vue,.js相关的内容用eslint做规范检查。git commit -m “规范化相关内容”全程参与了 - 把控/管控App的生命周期。创建stylelint.config.cjs。创建custom-words.txt。stylelint检查样式相关的。像这样就是暂时没大问题了。设置npm官方下载源。原创 2024-05-31 00:51:59 · 867 阅读 · 0 评论 -
Vue进阶之Vue项目实战(四)
编辑器 -> 管理端发布上线 ->应用端但是一般很多公司产品的管理端和应用端结合,进行高度复用。这是因为,在管理端进行拖拽的时候,是比较消耗性能的,要更好的考虑性能,所以很多产品都会用 canvas,用画布的形式画、绘制 对齐的网格线,或者编排过程中的辅助线;但是在渲染过程中,在应用端是没有任何的辅助线和网格线,所以一般将管理端和应用端分开考虑。管理端和应用端中间的联系一般是组件的复用,但是在页面中,编排引擎,渲染器方面,他们俩不是高度复用illaretool。原创 2024-05-29 00:07:56 · 1099 阅读 · 1 评论 -
Vue进阶之Vue项目实战(三)
package.json:图表渲染器(图表组件)一般负责:基于数据协议的图表渲染逻辑渲染逻辑:通用渲染逻辑、特殊渲染逻辑BarRenderer.vue、LineRenderer.vue,统一在ChartsRenderer.vue中进行分发渲染(在这一层将不同的图表类型差异磨平)图表的事件处理图表举例:创建 ChartsRenderer.vuecomponentsChartsRenderer.vueApp.vue项目中:ChartsDataTransformer.t原创 2024-05-23 23:55:24 · 814 阅读 · 2 评论 -
Vue进阶之Vue项目实战(二)
使用代码分割来解决。不管是useForm,还是自己去封装表单,表格的插件,都需要将UI层(组件)和状态层(CompositionAPI负责产出的状态数据)分离,在用的地方,使用useForm,useTable等等解构出来。1.设计理念比较好 基于hooks实现的/CompositionAPI实现的,能够解决很多事情,例如,表单类型校验规则,动态表单,表单间联动,统一的表单状态处理等等。如果组件多了,渲染引擎变得慢或卡,一家公司的商城,首页用了无代码平台来搭建,首页要等一会才出来,这个如何解决?原创 2024-05-07 00:44:44 · 715 阅读 · 0 评论 -
Vue进阶之Vue项目实战(一)
git hooks提供的pre-commit等,可以在开发的时候,在提交对应的时机,发生一些作用。2.创建文件pre-commit.mjs 在husky/pre-commit.mjs。pre-commit:预提交 执行提交后会先预提交一下,失败的话全部打回,不会提交。husky是一个钩子工具,但是钩子本身不是husky的,钩子是属于git的。加依赖,devDependencies加。以后写脚本的时候可以尝试用zx写。node版本:20.11.1。pnpm版本:9.0.4。帮助轻松拦截hooks。原创 2024-05-03 14:30:30 · 1340 阅读 · 0 评论 -
Vue3技术8之Fragment、Suspense、Vue3中其他的改变
什么是Teleport?——Teleport是一种能将我们的组件html结构移动到指定位置的技术< teleport to = " 移动位置 " > < div v-if = " isShow " class = " mask " > < div class = " dialog " > < h3 > 我是一个弹窗 < button @click = " isShow=false " > 关闭弹窗原创 2023-04-25 18:15:31 · 1311 阅读 · 2 评论 -
Vue3技术7之toRaw与markRaw、customRef、provide与inject、响应式数据的判断、组合式API的优势分析
Demo.vue案例:(并且还具备防抖功能)set执行修改数据的过程:定时器实现防抖功能原理:实现祖孙组件间通信Child.vueSon.vue(2)后代组件中:响应式数据的判断App.vue使用传统OptionsAPI中,新增或者修改一个需求,就需要分别在data,methods,computed里修改更加优雅的组织代码,函数。让相关功能的代码更加有序的组织在一起。原创 2023-04-25 16:15:47 · 1616 阅读 · 0 评论 -
Vue3技术6之toRef和toRefs、shallowReactive与shallowRef、readonly与shallowReadonly
作用:创建一个ref对象,其value值指向另一个对象中的某个属性应用:要将响应式对象中的某个属性单独提供给外部使用时toRefs与toRefshallowReactive:只处理对象最外层属性的响应式(浅响应式)shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理什么时候使用?(1)如果有一个对象数据,结构比较深,但变化时只是外层属性变化 ===> shallowReactive。原创 2023-04-24 10:56:23 · 595 阅读 · 0 评论 -
Vue3技术5之watchEffect函数、Vue3生命周期、自定义hook函数
watch的套路是:既要指明监视的属性,也要指明监视的回调watchEffect的套路是:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性watchEffect有点像computed(1)但computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值(2)而watchEffect更注重的是过程(回调函数的函数体), 不用写返回值//watchEffect所指定的回调中用到的数据只要发生变化,则直接重新执行回调 watchEffect(() => {原创 2023-04-20 09:54:08 · 943 阅读 · 0 评论 -
Vue3技术4之watch监视属性、watch时value问题
exportdefaultname'App'components原创 2023-04-18 18:03:47 · 808 阅读 · 0 评论 -
Vue3技术3之setup的两个注意点、computed计算属性
setup执行的时机在beforeCreate之前执行一次,this是undefinedsetup的参数(1)props:值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性(2)context:上下文对象① attrs:值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性,相当于②slots:收到的插槽内容,相当于③emit:分发自定义事件的函数,相当于this.$emit与Vue2.x中computed配置功能一致写法import {原创 2023-04-13 15:40:29 · 1042 阅读 · 1 评论 -
Vue3技术2之ref函数、reactive函数、Vue3中的响应式原理
ref函数1. 作用:定义一个响应式的数据2. 语法:const xxx=ref(initValue)(1)创建一个包含响应式数据的`引用对象(reference对象,简称ref对象)` (2)JS中操作数据: xxx.value(3)模板中读取数据:不需要.value,直接:\{{xxx}}\3. 备注:(1)接收的数据可以是:基本类型、也可以是对象类型(2)基本类型的数据:响应式依然是靠Ob原创 2023-04-12 16:55:50 · 1531 阅读 · 0 评论 -
Vue3技术1之Vue3简介、创建Vue3工程、分析工程结构、安装开发者工具与初识setup
2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王)理解:Vue3.0中一个新的配置项,值为一个函数setup是所有Composition API(组合API)“表演的舞台”组件中所用到的:数据、方法等等,均要配置在setup中setup函数的两种返回值:(1)若返回一个对象,则对象中的属性、方法,在模板中均可以直接使用(重点关注!(2)若返回一个渲染函数,则可以自定义渲染内容(了解)注意点:(1)尽量不要与Vue2.x配置混用。原创 2023-04-11 15:23:01 · 1080 阅读 · 0 评论