janyxh的博客

记录开发过程中遇到的坑，以及解决方案。

最近使用vite + vue 3.0 + typescript搭了一个项目，发现引入组件时，使用@引入绝对路径报错。想了下，可能是因为从vue cli换成了vite，也可能是javascript换成了typescript。那在目前的架构下，怎么使用@作为路径的开头呢？经查询vite文档，发现可以使用resolve.alias设置别称。vite.config.tsimport path from "path";export default defineConfig({ resolve:

我有一个列表页，是滚动加载的。每次从详情页返回，刷新数据的话，又从头开始，非常不便。我研究了2天keep-alive，听说可以缓存数据，保存页面不变。我觉得这正是我需要的。我按照文档，又按照网上的方法，试了一遍又一遍，终不得解。怎么回事，为什么页面一直不缓存？为什么还是一次又一次刷新加载？直到我看到这两段话，感觉崩溃！！！也就是说，keep-alive跟缓存，根本没有半毛钱关系！缓存数据，唯一的逻辑是，离开需要缓存的页面时，把数据保存起来。再进入这个页面时，你自己决定要不要刷新，如果不要，就

昨天看Vue的官方文档，怎么都找不到之前在组件上使用v-model，然后组件同步取到值的方法。后来找回Vue 2的文档，再结合Vue 3的文档，终于发现，Vue 3移除了$listeners。以前Vue 2是通过$listeners，传递两个pros值，label和value,子组件通过v-on绑定一个方法（通过计算属性），结合$listeners，再返回去。同时监听组件事件，把组件的值 ，通过$emits返回给父组件。父组件<custom-input v-model="searchText

最近项目需要做一个国际版，多种语言切换功能。有同事提出可以分别分开做几个项目，然后分别打包。但是我认为这种方式弊大于利。首先，弊端是难以同步管理。项目的功能80%以上都是相同的，分开几个项目，意味着有新的需求时，在每个项目里进行一次再开发，同时有bug时，也是几个地方进行修改。第二，优点不明显。页面中静态文字是固定的，并不是会常更改。通常情况下 ，只要配置一次。如果有修改，也只需要在配置文...

官方资料：Vue.set( target, propertyName/index, value )参数：{Object | Array} target{string | number} propertyName/index{any} value返回值：设置的值。用法：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，...

二、开启路由懒加载上一章内容： 前端优化（一）：开启nginx gzip压缩本文继上一章，接着前一章，继续讲解如何做前端优化，以vue项目为例。路由懒加载依赖于webpack的分片，默认情况下，一个项目被webpack打包成一个 index.html, app.js, chunk-vendors.js, app.css，chunk-vendors.css和若干图片。单页应用下，只有一...

三、抽取第三方js，使用dll打包第一章内容：前端优化（一）：开启nginx gzip压缩第二章内容：前端优化（二）：使用路由懒加载本文继续前两章内容，继续讲解第三个前端优化方案：抽取第三方js。随着项目增长，引入的第三方js也越来越大。webpack将第三方js默认打成一个包，导致该js文件越来越庞大，严重影响首屏加载 。1.创建抽取的文件对象在项目根目录创建一个dll.co...

1.安装拖拽排序工具vuedraggableyarn 或 npm 安装yarn add vuedraggable npm i -S vuedraggable2.引入vuedraggable组件script部分import draggable from 'vuedraggable'...export default { components: { ...