前言 2018年刚入行前端时，公司使用的还是Angular。Angular什么都好，就是写代码时的体验老糟心了，改一个地方，按下保存之后，要等好几秒刷新后才能看到效果，Webstorm无比好用的自动保存，对我来说反而像是一个负担。然而2024年了，Angular已经更新了17版本，还是没有解决这个问题，热替换依然那么的糟糕 在网上冲浪时，发现了刚开始火起来的Vue，大家都在说简单好用上手快，于是抱着试一试的心态照着Vue官网的教程开始学习，并创建了这个项目。一开始只是用来学习Vue练手，后面断断续续的更新，有空就优化下，完成度已经可以达到官方App的80%了 在线访问 Vercel:http:...

最近在做一个全国海域潮汐表查询，可以为赶海钓鱼爱好者提供涨潮退潮时间表及潮高信息。下面教大家怎么做一个这样的小程序。主要功能，根据IP定位地理位置，自动查询出省份或城市的港口，进入后预测7天内港口潮汐表查询。步骤：1.采集全部国海域港口数据。2.采集对应的港口数据每天潮汐表数据。3.用百度echarts.js图表显示潮汐信息。 扫码看效果：  小程序代码： <!--pages/index/index.wxml--> <t-navbarclass="custom-navbar"title="爱潮汐表网"/> <viewstyle="{{navBarHe...

<u-collapseref="myCollapse"@change="change"accordion> <u-collapse-itemv-for="(level,index)inlevelList":key="index":title="level.name"ref="collapseHeight"> <viewclass=""> <viewv-for="(film,i)infilmList":key="i"class="u-p-20"> {{film.name}} </view> </view> </u-co...

a-textarea(textarea)出现模糊问题的可能解决方案 项目介绍：本项目是一个vue3+ant-design-vue4.x开发，是一个客服机器人的组件。其它项目通过iframe+js文件来引入(iframe的内容就是表单，入口按钮是通过js文件进行dom操作创建)。 通过js监听页面宽度，然后通过transform来适配不同分辨率。 iframe+transform，出bug似乎也不奇怪 这期间也因为transform出现过模糊bug，但这篇文章的重点是textarea。 大致的情况如图： 在出现滚动条的时候，表单变得非常模糊。 而没有滚动条的时候： 页面就又恢复了清晰。 猜测...

先申明 为了避免有标题党的嫌疑，这里先做申明。 标题中说的零代码指的是借助VuePress通过简单配置，帮助我们生成静态网站。 零成本指的是借助GitHubPages或者GiteePages部署VuePress生成的静态网站。让互联网上的小伙伴访问到我们的个人网站。 这些都不需要我们写一行代码，不需要花一分钱。 当然了，如果你追求网站访问速度，定制个人域名，这些是需要money的 如果你还不知道VuePress、GitHubPages和GiteePages是个啥东东，这都没关系，文章后面会慢慢解释 一、别人家的网站 ①程序员鱼皮的个人网站 ②小林coding的个人网站 ③JavaGuide...

其他章节请看： vue3快速入门系列 他API 前面我们已经学习了vue3的一些基础知识，本篇将继续讲解一些常用的其他api，以及较完整的分析vue2和vue3的改变。 浅层响应式数据 shallowRef shallow中文：“浅层的” shallowRef：浅的ref()。 先用ref写个例子： <!-ChildA.vue--> <template> <p>组件A</p> <p>a:{{a}}</p> <p>o:{{o}}</p> <p><button@click="cha...

1.computed（计算属性）和方法有什么区别？ 计算属性本质上是包含getter和setter的方法 当获取计算属性时，实际上是在调用计算属性的getter方法。vue会收集计算属性的依赖，并缓存计算属性的返回结果。只有当依赖变化后才会重新进行计算。 方法没有缓存，每次调用方法都会导致重新执行。 计算属性的getter和setter参数固定，getter没有参数，setter只有一个参数。而方法的参数不限。 由于有以上的这些区别，因此计算属性通常是根据已有数据得到其它数据，并在得到数据的过程中不建议使用异步、当前时间、随机数等副作用操作。 实际上，它们最重要的区别是含义上的区别。计算属性含...

大家好，我是Java陈序员。 今天，给大家介绍一个简洁、开源的中后台管理模板项目。 关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。 项目介绍 nova-admin——一个基于Vue3、Vite5、Typescript、NaiveUI,简洁干净后台管理模板。 nova-admin追求用简单的方式实现完整功能，无过度封装，方便二次开发。 功能特性： 最新技术栈：基于Vue3、Vite5、TypeScript、NaiveUI、Unocss等最新技术栈开发 网络请求：提供完善的网络请求封装，提供统一的响应处理和多场景能力 权限管理：完善的前...

vue3快速入门系列组件通信 组件通信在开发中非常重要，通信就是你给我一点东西，我给你一点东西。 本篇将分析vue3中组件间的通信方式。 Tip：下文提到的绝大多数通信方式在vue2中都有，但是在写法上有一些差异。 准备环境 在vue3基础上进行。 新建三个组件：爷爷、父亲、孩子A、孩子B，在主页Home.vue中加载组件Gradfather.vue： <!-Gradfather.vue--> <template> <p>爷爷</p> <hr> <Father/> </template> <script...

一、代码分割 一个大型前端应用，如果所有代码都放在单一文件，体积会特别大，下载时间长，白屏时间久，用户体验差。 代码分割是一种有效的优化方式。提前把代码切分为多个小块，只下载当前必需的部分，用到哪块下载哪块。就像吃自助餐一样，吃多少拿多少。 早期的代码分割一般通过 webpack 实现。随着ES6的不断流行，原生的 import() 成为更好的选择。   使用import()和《Vue3基础用法：组件入门》介绍的动态组件，可以实现一个简单的代码分割[2]。   实际运行效果如图：   上面代码“糙快猛”地实现了代码分割...

大家好，我是Java陈序员。 问君能有几多愁，唯有开源项目解千愁！之前，分别给大家介绍了离线和在线的工具箱应用程序。 开发者的瑞士军刀！一款适用于开发者的工具集合！ 8.7K+Star！快速搭建个人在线工具箱 今天，再给大家安利一款无广告、不需要登录、可二开的桌面端工具箱！ 关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。 项目介绍 Rubick——一款纯绿色、效率、开源的桌面端工具箱软件。 软件支持插件化的方式来安装工作所需要的任何插件。插件是基于npm进行安装和卸载，非常轻便。 功能特色： 安装使用 Rubick提供了Window...

前言 还是上一篇面试官：来说说vue3是怎么处理内置的v-for、v-model等指令？文章的那个粉丝，面试官接着问了他另外一个v-model的问题。 面试官：vue3的v-model都用过吧，来讲讲。 粉丝：v-model其实就是一个语法糖，在编译时v-model会被编译成:modelValue属性和@update:modelValue事件。一般在子组件中定义一个名为modelValue的props来接收父组件v-model传递的值，然后当子组件表单的值变化时再使用@update:modelValue抛出事件给父组件，由父组件来更新v-model绑定的变量。 面试官：你说的这个是在组件上面...

随着互联网技术的迅速发展，用户对网页的加载速度和交互体验有了更高的期待。作为开发者，我们常常需要在服务器端渲染（SSR）与客户端渲染（CSR）之间做出选择。这两种渲染方式各有特点，适用于不同的场景和需求。今天，就让我们一起来探索SSR和CSR的世界，帮助你为你的应用选择最合适的渲染策略。 什么是渲染？   简单来说，渲染就是在屏幕上显示视觉元素的过程。在网页开发中，这涉及将HTML、CSS和JS代码转化为用户可以交互的视觉吸引力页面。 渲染过程为何如此重要？ 渲染过程是形成用户体验的关键环节，因此选择正确的渲染策略对于打造引人入胜的UI/UX至关重要。一个网页的用户体验质量和搜索引...

前言 大家在开发过程中，或多或少都会用到轮播图之类的组件，PC和Mobile上使用Swiper.js，小程序上使用swiper组件等。 本文将详细讲解如何用Vue一步步实现的类似Swiper.js的功能，无任何第三方依赖，干货满满。 最终效果 在线预览：https://zyronon.github.io/douyin/ 项目源代码：https://github.com/zyronon/douyin 注意：PC 必须将浏览器切到手机模式，先按 F12 调出控制台，再按 Ctrl+Shift+M才能正常预览 Demo代码 上面的预览地址是最终实现的效果，下...

前言：针对项目越来越大，js弱类型、动态类型捉襟见肘，导致项目维护成本越来越高，typeScript接入学习成本及vue兼容性等问题，考虑引入flow.js优点：静态类型检查，避免类型编码错误不影响线上代码打包，对线上代码影响小接入后可仅在需要的文件中使用项目接入流程如下：使用yarn、babel的方式，其他方式请参照：https://flow.org/en/docs/install/，安装如下依赖：yarnadd--dev@babel/preset-flowflow-binflow-typed2.安装完成后在项目根文件初始化flowyarnrunflow3.在babel.config.js文...

本篇作为《Vue+OpenLayers6入门教程》和《Vue+OpenLayers6实战进阶案例》所有文章的二合一汇总目录，方便查找。 本专栏源码是由OpenLayers6.15.1版本结合Vue2框架编写，同时支持Vue3，零星几篇文章用到了Element-UI库。本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers6开发。 反馈和建议OpenLayers系列-交流专区，建议和问题反馈 OpenLayers6入门目录 一、介绍 Gis开发入门，OpenLayers、Leafle...

关于微信小程序转发&保存图片 已经好多年没写博客了，最近使用在用uniapp开发一个移动版管理后台，记录下自己踩过的一些坑 微信小程序图片转发保存简单说明 微信小程序图片转发保存，依赖小程序的转发api——wx.showShareImageMenu(Objectobject)通过调用这个api能触发如下弹窗  代码如下： wx.showShareImageMenu({ path:filePath,//...

其他章节请看： vue3快速入门系列 Pinia vue3状态管理这里选择pinia。 虽然vuex4已支持Vue3的CompositionAPI，但是vue3官网推荐新的应用使用pinia——vue3pinia 集中式状态管理 redux、mobx、vuex、pinia都是集中式状态管理工具。与之对应的就是分布式。 Pinia符合直觉的Vue.js状态管理库甚至让你忘记正在使用的是一个状态库——官网 安装pinia环境 首先下载安装包： PShello_vue3>npmipinia added2packages,andaudited71packagesin11s 10packa...

前言 最近有粉丝找到我，说被面试官给问懵了。 粉丝：面试官上来就问“一个vue文件是如何渲染成浏览器上面的真实DOM？”，当时还挺窃喜这题真简单。就简单说了一下先是编译成render函数、然后根据render函数生成虚拟DOM，最后就是根据虚拟DOM生成真实DOM。按照正常套路面试官接着会问vue响应式原理和diff算法，结果面试官不讲武德问了我“那render函数又是怎么生成的呢？”。 我：之前写过一篇看不懂来打我，vue3如何将template编译成render函数文章专门讲过这个吖。 粉丝：我就是按照你文章回答的面试官，底层其实是调用的一个叫baseCompile的函数。在baseCo...

一、前期转杯 确保电脑上已安装node.js。可通过命令npm--version进行查询，如果展示了版本号，则说明已安装，若提示npm不是有内部或外部命令，也不是可运行的程序，则说明未安装，可进入官网下载并进行安装。 确保已安装VueCLI。可通过命令vue--V查看版本号，如果返回了版本号，则说明已安装，若提示vue不是有内部或外部命令，也不是可运行的程序，则说明未安装VueCLI,可使用命令：npminstall-g@vue/cli进行安装。 二、创建vue项目 在命令行窗口输入命令vuecreate[web名称]后，点击回车(Enter)键。进入如下界面 可以使用方向键上/下进行选...