学习笔记
背景
给一个旧的后台管理项目，增加一个从详情页返回，不刷新页面的功能。使用 vue 的 keep-alive 组件 include 属性，但是发现不生效，页面刷新了。网上查了下，这个 include，是根据组件的 name 属性来匹配的，需要把组件的 name 属性加上去改成与 include 中的一致。顺便再复习下 keep-alive 的用法。
keep-alive 是 Vue 提供的一个内置组件，用于缓存组件的状态，避免组件在切换时重新渲染。它通常用于路由组件的缓存，以提升用户体验。
背景
春节过后，deepseek 大火，导致线上的服务经常崩溃，于是想着自己在本地部署一个，方便自己使用。
现在网上大部分方案，都是通过 Ollama 来实现的。但是这个方案需要安装 Ollama，要想聊天界面更友好，还要安装一个 chatbox，并且每次启动都要敲命令。我自己的电脑用的是 intel 的独立显卡，要想使用独显去跑模型，还得装个转译的包，还是挺麻烦的。
下边介绍一个比较简单的方式。
背景
给一个老项目添加功能，修改后保存，直接报 Module Warning(from./node modules/eslint-loader/index.js):error:Missing space beforefunction parentheses(space-before-function-paren)。
原因是我的 vscode 默认使用 prettier，prettier 格式化 javaScript 代码之后，默认不会在函数与 () 添加空格，而 eslint 默认情况下则要求函数与 () 之间必须有一个空格。处理起来大概有这么几种方案：
背景
使用 uniapp 开发的小程序，想对接 AI 大模型。目前这个时间点，2024 年 12 月，直接为前端提供 api 的大模型，有百度的文心一言和讯飞的星火大模型，这篇先记录下文心一言的对接方式。
首先要在文心千帆大模型平台控制台总览中，左侧菜单中选择 应用接入，创建自己的应用，配置服务，这里选择所有的预置服务就行。申请成功后，会得到一个 API_key 和 Secret_key，这两个 key 在后续的调用中会用到。
背景
使用 uniapp 开发的小程序，想对接 AI 大模型。目前这个时间点，2024 年 12 月，直接为前端提供 api 的大模型，有百度的文心一言和讯飞的星火大模型，这篇先记录下星火模型的对接方式。
首先进入星火大模型 API，新用户要先注册。选择 Spark Lite，目前这个模型 token 是免费的。当然也可以选择其他更强大的模型。然后创建应用，获取到 APPID 和 APISecret、APIKey。
背景
之前用 uniapp 开发的小程序，使用了 echarts 用来展示折线图和饼状图。现在不需要再展示饼状图了，因为小程序前端代码大小有限制，所以干脆重新生成一个只包含折线图的 echarts.min.js 文件，发现报错 t.addEventListener is not a function。突然想起，这种定制的 echarts，在 5.3.0 版本以上，就会报错。手动选择低版本，重新生成一个就好了。
因为小程序代码大小限制，所以在小程序中使用 echarts，基本上都会采用定制方式，只选择自己需要的图标类型就行。定制地址：https://echarts.apache.org/zh/builder.html
背景
最近在做一个答题小程序，部分题型中试题数量比较大，一把带出来所有的试题，经过测试界面在试题数量大概在 100 道以上就会开始卡顿，而且试题越多，首次进来加载的时间越长。
一开始想的方案是分页进行加载，但是加载第二页的时候因为要请求接口，所以体验不是特别好。这种分页方式，还有个很大的问题，就是实现“答题卡”功能，在各个试题中跳转比较麻烦。于是在网上搜索，发现一种方案能完美解决这个问题。
简单说，就是 swiper 组件只需要准备三个 item，这三个 item 就相当于三个桶。然后设置 swiper 的 circular 属性为 true，这样可以实现循环滑动。而在滑动的过程中，我们可以通过监听 swiper 的 change 事件，来动态的更新桶中的内容。这样，不管试题有多少，我们只需要准备三个桶，就可以实现流畅的滑动效果。下面看代码：
背景
使用 el-table 组件，并且在列中使用了v-if指令，容易导致列的次序错乱。
解决的方法也很简单，只需要为每个el-table-column添加一个key属性即可。
<el-table
stripe
v-loading="loading"
style="width: 100%;"
:data="tableData"
:height="height">
<el-table-column
type="index"
fixed
width="70"
align="center"
label="序号"
:key="1" />
<el-table-column
v-if="USER_LV === 0"
prop="subCompanyName"
align="center"
label="公司名称"
width="150"
:key="2"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
v-if="USER_LV !== 2"
prop="projectName"
align="center"
label="项目名称"
:key="3"
:show-overflow-tooltip="true">
</el-table-column>
</el-table>背景
画前端页面的时候，偶尔会遇到一个需求。在一个 div 中，既有背景颜色，又有背景图片，而且背景图要在背景色之上。
/* 这种分开写的方式，把颜色写在图片之前，背景颜色会被图片覆盖，不显示 */
background-color: #f5f5f5;
background: url('./images/banner11.png') no-repeat scroll left bottom/cover;
/* 把背景色写在背景图之后就可以实现需求 */
background: url('./images/banner11.png') no-repeat scroll left bottom/cover;
background-color: #f5f5f5;
/* 也可以采用这种简写的方式，依然有效*/
background: #f5f5f5 url('./images/banner11.png') no-repeat scroll left
bottom/cover;背景
给一个 Vue2 项目开发新功能，在一个 el-dialog 中使用了 el-tabs 组件做了一个详情页，在第一个页面使用时候正常。在第二个页面使用的时候，浏览器卡死了，无法操作，强制刷新都不行。
首先排查了下自己代码中的逻辑问题，然后在网上找了下：
网上查到的方法，自己尝试后没用，但是可以参考下