Vue3(四)从jQuery 转到 Vue工程化 的捷径

不会 webpack 还想学 vue 工程化开发 的福音熟悉jQuery开发的,学习vue的简单使用是没用啥问题的,但是学习vue的工程化开发方式,往往会遇到各种问题,比如:webpack、node、npm、cnpm、yarn、脚手架、开发环境、测试环境、生产环境、各种安装、各种创建。好在 vue3 不容易报错了,想当初 vue2.x 的时候各种报错,看到错误就只能干瞪眼,这都是啥?好像是webpack的报错。当初学 vue2 就卡在了建立项目上,各种尝试居然一个项目都没跑起来。如果能像jQuery那样,直接开鲁那多好呀!各种阴差阳错+机缘巧合的情况下,弄出来了这种在 CND

Vue3组件(九)Vue + element-Plus + json = 动态渲染的表单控件

一个成熟的表单表单表单,你已经长大了,你要学会:动态渲染支持单列、双列、多列支持调整布局支持表单验证支持调整排列(显示)顺序依据组件值显示需要的组件支持 item 扩展组件可以自动创建 model这个表单控件是基于 element-plus 的 el-form 做的二次封装,所以首先感谢 element-plus 提供了这么强大的UI库,以前用 jQuery 做过类似的,但是非常麻烦,既不好看,可维护性、扩展性也差,好多想法都实现不了(技术有限)。现在好了,站在巨人的肩膀上,实现自己的想法了。实现动态渲染把表单需要的属性,统统放入json里面,然后用require(方便) 或者aioxs

全面了解Vue3的 reactive 和相关函数

Vue3的 reactive 怎么用,原理是什么,官网上和reactive相关的那些函数又都是做什么用处的?这里会一一解答。ES6的ProxyProxy 是 ES6 提供的一个可以拦截对象基础操作的代理。因为 reactive 采用 Proxy 代理的方式,实现引用类型的响应性,所以我们先看看 Proxy 的基础使用方法,以便于我理解 reactive 的结构。我们先来定义一个函数,了解一下 Proxy 的基本使用方式:// 定义一个函数,传入对象原型,然后创建一个Proxy的代理 const myProxy = (_target) => { // 定义一个 Proxy 的实例 const

全面了解Vue3的 ref 和相关函数和计算属性

基础类型的响应性 —— ref在vue3里面,我们可以通过 reactive 来实现引用类型的响应性,那么基础类型的响应性如何来实现呢?可能你会想到这样来实现:const count = reactive({value: 0}) count.value += 1这么做确实可以实现,而且也很像 ref 的使用方式,都是要 .value 嘛。那么 ref内部 是不是这么实现的呢?我们先定义两个 ref 的实例并且打印看看。 const refCount = ref(0) // 基础类型 console.log('refCount ', refCount ) const refObject =

初探 vite2 + vue3

vite2已经出来一段时间了,这几天没忍住尝试了一下,首先体验到的就是 —— 快,真的很快,再也不用痛苦的等待了。然后就是踩坑,因为vite2还算是比较新,所以介绍文章不多,虽然已经出来官网文档了,但是现在的官网似乎侧重原理介绍,对于最初级的使用方式,似乎没有,或者是我还没有找到。这里汇总一些基础用法。创建项目vite2 构建项目:建议使用yarn,可以更快一些。yarn create @vitejs/app然后按照提示操作即可!选择需要的模板:vanillavuevue-tsreactreact-tspreactpreact-tslit-elementlit-element

Red Hat Enterprise Linux 8 第七课

RAID磁盘冗余阵列近年来, CPU的处理性能保持着高速增长,即便是被称为“牙膏厂”的英特尔公司也在2017年发布了i9-7980XE处理器芯片,率先让家用电脑达到了18核心36线程。2020年末,AMD公司又推出了线程撕裂者系统处理器3990X,让家用电脑也可以驾驭的了64核心128线程的处理器小怪兽了。但与此同时,硬盘设备的性能提升却不是很大,逐渐成为当代计算机整体性能的瓶颈。而且,由于硬盘设备需要进行持续、频繁、大量的IO操作,相较于其他设备,其损坏几率也大幅增加,导致重要数据丢失的几率也随之增加。硬盘设备是计算机中较容易故障的元器件之一,加之由于其需要存储数据的特殊性质,不能像CPU

Vue3 封装第三方组件(一)做一个合格的传声筒

各种UI库的功能都是非常强大的,尤其对于我这种不会 css 的人来说,就更是帮了大忙了。只是嘛,如果再封装一下的话,那么用起来就会更方便了。那么如何封装呢?封装三要素 —— 属性、插槽、事件、方法可以封装,但是原生UI库提供的强大功能不能给封装没了吧,吃了回扣可是不好滴。那么如何做到不遗漏呢?先做一个合格的传声筒。传递属性先看看 el-input 提供的属性:太长了,这里只截了一半。这么多的属性,如果一个一个都弄到 props 里面,然后再一个一个绑定上去,这就太麻烦了。我们可以分成两部分,重要的属性做到 props 里面,其他的可以放到 $attrs 里面

reactive是如何实现深层响应的?

深层响应的 reactive看过官网文档的都知道,Vue3 的响应性分为浅层和深层,我们常用的 reactive 是深层的。我们也都知道,reactive 是使用 proxy 来实现响应性的,那么问题来了:既然 proxy 的拦截操作是浅层的,对于嵌套属性的操作无感,那么 reactive 是如何实现深层响应的呢?这个就得看看 源码了。// reactivity.js function createGetter(isReadonly = false, shallow = false) { return function get(target, key, receiver) { if (key

做个开源博客学习Vite2 + Vue3 (一)搭建项目

前言不会 webpack,遇到报错就一头雾水,完全不知道怎么办,而且体积还大速度还慢。所以尤雨溪做了 vite 后就很向往,只是知道自己水平有限还是等大佬先趟趟坑,等差不多了在跳。现在vite2发布了,官网也有了,网上也能找到大佬写的相关资料,时机应该成熟可以往里跳了。所以打算做个开源博客,一边做这个小项目,一边学习 vite2 和vue3,还有相关知识。为啥选择博客呢?因为功能相对比较简单,不考虑皮肤等功能的话。而且大家都比较熟悉,没写过博客总看过博文吧。所以呢,业务需求方面一说大家也都懂,不用做过多的解释。建立项目因为GitHub总是连不上,速度还慢,所以选择了gitee

做个开源博客学习Vite2 + Vue3 (二)设置别名、代理和ESLint

vite2可以有很多配置,也可以都使用默认配置,这个看项目需要。vite.config.js我们先看看 vite.config.js里面的常用配置,其他配置可以看官网:https://cn.vitejs.dev/config/// vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from "path" // 主要用于alias文件路径别名 // 加别名的函数 function pathResolve(dir) { return