- 博客(25)
- 收藏
- 关注
RSS订阅原创 虚拟滚动探索与封装
什么是虚拟滚动？虚拟滚动就是通过js控制大列表中的dom创建与销毁，只创建可视区域dom非可视区域的dom不创建。这样在渲染大列表中的数据时，只创建少数的dom，提高性能。有了非定高虚拟滚动组件，不就是可以应对各种情况了，为什么还需要做定高虚拟滚动组件？在上面的封装思路中，我们能清晰知道非定高虚拟滚动组件是用假定值进行渲染的，在真实渲染过后才会弥补更新，而定高虚拟滚动所有东西都是确定的。所以定高虚拟滚动的优势就是比非定高虚拟滚动性能高，缺点就是只能应对每一条渲染数据是固定的情况。
2023-02-27 00:04:08
1608
原创 写一个vscode支持vue文件跳转到定义的插件，又可以愉快地摸鱼了
由于全局组件引入的情况比较复杂，该插件使用了模糊查找的方式来查找组件定义的地方，做到了全局组件引入的跳转支持。在vue-cli（webpack）的配置下，我们可以配置alis别名，这样我们可以提升生产效率，但是vscode本身是不支持的，所以该插件需要支持alis别名路径跳转。如果我们使用了省略写法，vscode自身是无法支持跳转的，所以该插件需要支持省略写法跳转。中，其中包含了组件的引入和注册，这个vscode本身是不支持跳转的，所以该插件支持mixins引入的情况。
2022-11-13 21:38:59
9457
8
原创 Parallels Desktop17安装win10过程
停止虚拟机，打开Parallels Desktop 虚拟机的状态，再Windows安装的界面先把把Windows虚拟机停止，然后再点击顶部的 【菜单】 按钮找到 【配置…，先彻底关闭退出虚拟机软件，然后打开访达，按下shift+command+G 三个键，前往文件夹：/Library/Preferences/Parallels。这里需要注意的是，必须安装正版的win10，不然镜像是无法被识别到的。弹出的高级设置选项，把你的目光看向 【虚拟机监控程序：】，然后点击。，那可以在创立虚拟机之时就设定好，选中。
2022-10-30 00:01:42
5697
2
原创 手把手写一个vscode翻译插件
写这篇文章的初衷是看到市场上的中英翻译插件都是将翻译结果以弹窗的形式做的，体验感非常不好。如果有像有道字典那种打开一个弹窗或者新tab的翻译面板来进行使用就好了。但是找了很久都没有找到，所以就自己写了一个。成品如下：仓库地址：https://github.com/atdow/translation-panel如果想体验该翻译面板插件，请在vscode插件市场中搜索并安装:右键打开菜单栏，并选择，即可打开该翻译插件：开发所需的技术是、、。选择vue的原因是本人开发多以vue为主，所以就首选了vue。单从开发w
2022-10-26 23:03:55
3878
1
原创 npm install 404问题
这个时候我们再安装npm包，比如npm install create-vue，这个时候报了。当我们在安装npm上的包时，明明看到npm上是有包的，但是安装的时候却报了。这个问题大概率是由于我们设置了。的问题，比如是淘宝镜像或者是我们的其他代理。
2022-10-02 15:35:28
11294
3
原创 vue动态代理无须重启项目解决方案
有时候我们需要使用不同后端服务器地址，也就是我们开发中所说的测试环境、灰度环境、正式环境等，这个时候如果我们需要使用不同的环境地址的时候，就需要使用命令或者手动修改。我们在项目启动后，手动修改代理配置文件的代理地址，然后刷新页面，就可以使我们的新代理地址生效。当项目项目越来越大的时候，我们需要很长的时间来启动项目，如此反复，极大影响我们开发进度。是无法感知文件的变化，所以代理的还是旧的地址，所以我们需要重新启动项目来使配置生效。函数读取配置文件的内容，也就是我们的代理地址。选项的配置也是基于这个包的配置。
2022-09-18 01:19:18
1197
原创 tabulator-tables使用总结（避坑大法）
实践中使用tabulator-tables的总结，经过长期的实践，总结出常用的api设置和避免官方的坑...
2022-08-20 16:31:16
1650
原创 如何在react使用jest
第一步，我们需要安装所需依赖包进行支持：npm install @babel/plugin-transform-react-jsx @testing-library/jest-dom @testing-library/react jest --save-dev第二步，我们需要在babel.config.js中加入jsx转换：module.exports = { presets: [['babel-preset-env', { targets: { node: 'current' } }]], +
2022-03-28 22:36:13
1265
原创 jest支持less
如果我们在jsx中引入了less样式，比如:import styles from './style.less';那么运行jest进行单元测试的时候会在less文件中报错，因为jest默认是不支持less的。为了在jest中支持less，我们需要jest-less-loader的支持。我们第一步需要安装jest-less-loader依赖：npm install jest-less-loader --save-dev然后在jest.config.js配置jest-less-loader规则：m
2022-03-28 22:20:34
810
原创 ios滚动顺畅问题
在移动端超出现滚动条时，在安卓端可以顺畅地进行滚动，但是在ios端却出现不能滚动顺畅问题，我们可以在需要滚动的标签中，加入以下样式：overflow-y: scroll;touch-action: pan-y;-webkit-overflow-scrolling: touch; 这个时候，安卓和ios端都可以顺畅地进行滚动。...
2022-03-20 03:03:05
499
原创 input标签变为搜索框在移动端中的兼容
input标签的基本写法为：<input type="text"> 在移动端中，我们会发现，回车键只是普通的回车键标识。为了让回车键变为搜索标志，我们可以在input标签中加入type="search"的属性，即：<input type="search" /> 然而在ios系统中，回车键仍然是普通的回车键标识，为了让ios系统也变成搜索标志，我们需要将input标签用form包裹起来，即：<form action> <input type
2022-03-20 03:00:16
1150
原创 vue全局query（vue-router函数拦截）
有时候我们需要在每个页面的跳转中传入固定的参数，但是又需要混入其他的参数。在vue-router中没有提供这样的api，这时候我们可以使用函数拦截的方式，改写vue-router的router.history.transitionTo的方法，将我们需要混入的全局参数注入vue-router中。1.第一步新建global-query.js文件，然后在mian.js文件中引入// main.jsimport 'global-query.js'
2022-03-16 21:46:40
798
原创 深入解读provide/inject原理
provide和inject选项需要一起使用，它允许祖先组件向其所有子孙组件注入依赖，并在其上下游关系成立的时间里始终生效，不论组件层级有多深。1. 我们简单回顾一下provide/inject的使用方式如下：var Provider = { provide: { foo: "bar" }}var Child = { inject: ["foo"], created() { console.log(this.foo); // "bar
2022-03-16 20:18:30
2654
2
原创 如何使用electron-vue搭建electron项目
第一步、使用vue-cli2构建模板项目vue init simulatedgreg/electron-vue my-project如果你当前使用的是vue-cli3或vue-cli4，那么你需要全局安装vue-cli2：npm install --global vue-cli当模板现在完毕后，根据提示一步一步进行下去。当模板完全构建完毕后，进行依赖安装：npm install第二步、运行项目npm run dev这个时候会报错误:Unable to install `vue-de
2022-03-13 13:22:03
1727
原创 （五）vue3之mixin
vue中mixin用法是一大利器，可以方便我们将组件中共同的代码抽离出来，提高代码复用性。但是mixin在vue3中有些许不同，让我们看一下变化：1. vue3中data的变量对比是浅层次的// app.vue<script>import Mixins from "./mixin.js";export default { name: "App", mixins: [Mixins], data() { return { user: { id
2022-03-13 13:21:17
1980
4
原创 vue技术栈上手react hook
1. 简介Hook是React16.8的新增特性,hook必须要在函数组件中使用，但是hook对于使用vue的同学来和vue是很多的共同点的，让我们来看一下hook都有什么特性：使用usesState维护状态useEffect代替生命周期（componentDidMount、componentDidUpdate 和 componentWillUnmount）其他 Hook2. 基本语法对于我们的基本开发，使用usesState和useEffect基本能完成基础开发，让我们看一下基本的用法：
2022-03-13 13:20:43
749
原创 Vue如何优雅地进行事件解绑和解绑
使用vue的同学一定对事件的绑定和解绑再熟悉不过了，以开启scroll事件为例，我们一般的写法是这样的：export default { name: "test", data() { return {}; }, mounted() { window.addEventListener("scroll", this.scrollHanlder); }, beforeDestroy() { window.removeEventListener("scroll",
2022-03-13 13:19:54
3203
1
原创 (四)vue3之key值绑定
我们知道，key值在vue中是非常重要的，可以在dom diff中提高dom的可复用性。那么在vue2和vue3中的使用有什么不同呢？1.在v-if/v-else/v-else-if中，key值绑定不再是必须的，因为vue3会自动生成对应的唯一key值2.如果你在vue3中（如v-if）手动绑定key值，那么其他对应指令中（如v-else）也必须手动绑定key值3.<template v-for>中的key值应该绑定在<template>中而不再绑定在它的子元素中1.v-
2022-03-13 13:19:20
5131
原创 (三)vue3之Async Components异步组件
1.简介vue3中的Async Components异步组件使用进行了很大的改动，改动如下：使用defineAsyncComponent方法来定义async components异步组件组件配置项的component重新命名为loaderloader函数（对应vue2的component函数）不再接受resolve和reject参数，并且必须返回Promise2.vue2的使用方式vue2中通过一个返回promise函数来定义async components异步组件：const async
2022-03-13 13:18:48
2910
1
原创 (二)vue3之v-for Array Refs
1.简介在vue2中，v-for绑定$refs将会自动生成一个refs的数组，但是在v-for中这种行为将会变得有歧义和不高效。而在vue3中，这种用法就不会生效，因为vue3不会自动生成refs的数组。如果我们需要拿到多个的refs组成的数组，那么就需要使用函数的方式手动去绑定。2.vue2中的用法<template> <div> <ul> <!-- 绑定ref --> <li v-for="(item, i
2022-03-11 21:29:41
2627
原创 (一)vue3之Lifecycle hooks
1.vue3Lifecycle hooks列表beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedactivateddeactivatedbeforeUnmountunmountederrorCapturedrenderTrackedrenderTriggered2.vue2Lifecycle hooks列表beforeCreatecreatedbeforeMountmountedbeforeUpdate
2022-03-11 21:28:38
548
原创 React Native环境搭建：ios环境搭建
按照React Native官网的环境搭建过程，我们启动项目后总会遇到很多奇奇怪怪的环境问题。通过几天的折腾，终于完美地将React Native项目给启动了起来。以下是我通过mac（catalina 10.15.7）搭建React Native环境的过程，m1的mac不作为参考。大家按照以下步骤进行搭建后可能会遇到不同的问题，可以通过评论留言，共同解决。环境搭建分为两个部分，分别是ios环境搭建和android环境搭建，由于篇幅过长，所以分为了两个部分，以下是ios环境搭建过程。1.安装cocoap
2022-03-09 21:36:59
3301
原创 剖析$nextTick原理与特性
1. $nextTick的作用是什么？$nextTick的作用是将回调延迟到下次DOM更新周期之后执行。new Vue({ // ... methods:{ example: function(){ this.message = 'change'; this.$nextTick(function(){ // DOM更新了，可以拿到最新的DOM }) } }})
2022-03-08 20:35:00
2328
原创 react-native使用babel-plugin-root-import注意事项
我们在`react-native`中使用`babel-plugin-root-import`，一般是`yarn add babel-plugin-root-import@6.6.0`，然后在`.babelrc`配置：{ "plugins": [ [ "babel-plugin-root-import", { "rootPathPrefix": "@", "rootPathSuffix": "src/" } ]
2022-01-03 02:14:07
838
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人