Vue on 404_@林达

Dev Cockpit 资源雷达工作台

Tue, 19 May 2026 00:00:00 +0000

Dev Cockpit 现在更像一个本地资源雷达，而不是普通的项目启动器。它把我平时看到的 GitHub 仓库、Demo、工具、教程、视频号文本和 AI coding 资源收进一个工作台，再用分类、标签、摘要、价值评分和可视化视图帮助我判断哪些东西值得继续研究。

为什么做这个

开发过程中真正麻烦的不是找不到资料，而是资料太分散。一个工具可能来自 GitHub，一个设计技能来自别人分享的 Skill.md，一个工作流来自社区仓库，一个教程来自短文本记录。看过之后如果没有及时归档，很快就会忘掉它为什么有价值。

Dev Cockpit 的目标是把这些资源变成可以复盘的卡片，而不是只留一串链接。每条资源都会保留来源、摘要、类型、子分类、状态和评分，后续可以按关键词、标签、来源和大类快速筛选。

当前资源页

资源页现在有两个主要视图。

卡片库适合做日常整理。页面顶部可以粘贴 GitHub、Demo、工具、教程或视频号文本，也可以导入、导出和解析资源。中间区域提供搜索框、状态筛选和大类筛选，目前支持工具、Skills、Workflow 等分类。

星云图适合看资源之间的分布。它把资源按照大类和主题放进一个可视化空间里，适合快速判断当前收集内容偏向前端工具、AI 编程辅助、视觉设计、预测模拟还是 3D 生成。

它解决什么问题

把零散链接整理成有摘要、有标签、有来源的资源卡片。
区分工具、Skills、Workflow 等不同类型，避免所有资料混在一起。
给资源打价值评分，帮助优先看更值得研究的内容。
支持搜索、状态筛选和大类筛选，让资源库不会越积越乱。
通过星云图观察资源分布，快速发现自己最近关注的技术方向。
保持本地运行，适合个人开发者维护自己的资料库。

现在收集的资源样例

这版截图里可以看到 taste-skill、everything-claude-code、FreeDomain、react-bits、MiroFish、andrej-karpathy-skill、articraft、huashu-design 等资源。它们覆盖前端设计技能、AI 编程工作流、免费域名、React 动效组件、群体智能预测、3D 资产生成和智能体设计生成等方向。

这些资源不是简单展示名称，而是会被整理成摘要、来源、分类、标签和评分。这样后面回看时，不需要重新打开每个仓库才能想起来它适合什么场景。

适合谁

经常收藏 GitHub 仓库、工具、教程和 AI coding 资源的人。
想把资源从聊天记录、浏览器收藏夹和临时文档里整理出来的人。
需要给资源做分类、评分、状态管理和后续复盘的人。
正在研究 AI coding workflow、Agent Skills、前端工具链和设计生成工具的人。
想参考 Electron、Vue、TypeScript 本地工作台界面的人。

技术方向

Electron
Vue
TypeScript
本地资源管理
GitHub 与工具资源整理
卡片式信息结构
资源分类与评分
星云图可视化

项目入口

GitHub 仓库：linsk27/local-dev-cockpit
项目总览：linsk27 Projects

如果你正在找 developer resource dashboard、GitHub resource manager、AI coding resources、resource radar 或 Electron Vue desktop tools，Dev Cockpit 会比普通练手页面更接近真实的个人开发工作流。

AI Vue Flask Blog 全栈系统

Tue, 10 Mar 2026 00:00:00 +0000

AI-Vue3-python-flask-Blog 是一个 Vue 3、Flask、MySQL 和 AI 能力组合的全栈博客系统。它覆盖前端页面、后端接口、数据库持久化、内容管理和 AI 能力接入，适合作为课程设计、毕业设计、全栈项目练习和二次开发基础。

适合谁

需要 Vue 3 + Flask + MySQL 全栈项目参考的学生或初级开发者。
正在准备课程设计、毕业设计或项目答辩的人。
想学习前后端分离、接口设计、内容管理和数据库持久化的人。
想在传统博客系统里加入 AI 能力的人。

项目价值

这个项目的核心价值是完整。它不是只有一个前端页面，也不是只有接口示例，而是把页面、接口、数据和内容管理串成一个可继续扩展的系统。对于搜索 Vue Flask full stack project、Vue3 Flask MySQL blog system、AI blog system、graduation project 或 course design 的人，它能提供更直接的参考。

技术方向

Vue 3
Flask
Python
MySQL
Element Plus
前后端分离
内容管理
AI blog system

项目入口

GitHub 仓库：linsk27/AI-Vue3-python-flask-Blog
线上演示：ai-vue3-python-flask-blog.vercel.app
项目总览：linsk27 Projects

如果这个全栈项目对你有参考价值，欢迎在 GitHub 仓库点 Star。Star 是我继续完善文档、部署说明和二次开发示例的主要信号。

Vue-blog 前端博客项目

Wed, 23 Jul 2025 00:00:00 +0000

Vue-blog 是一个 Vue 前端博客项目，用来展示文章入口、AI 中心、数据分析看板和内容型页面结构。它适合作为 Vue blog project、front-end learning notes、content presentation 和前端页面组织方式的参考。

适合谁

想参考 Vue 博客首页、文章入口和导航结构的人。
正在做学习笔记、内容展示或个人博客前端的人。
需要 AI 中心、数据分析看板和内容型页面组合示例的人。
想看 Vue 项目如何整理页面层级和视觉入口的人。

项目价值

Vue-blog 的价值在于它有可访问的线上成品，并且页面结构比普通静态练习更完整。它把博客首页、文章入口、AI 中心和数据分析看板放在同一个前端项目里，适合用来观察内容型应用如何组织导航、视觉层级和页面入口。

如果你搜索的是 Vue blog project、Vue front-end project、front-end learning notes、content presentation 或 AI center dashboard，这个项目可以作为一个直接可打开的示例。

技术方向

Vue
前端页面结构
博客首页
内容展示
AI 中心
数据分析看板
学习笔记展示

项目入口

GitHub 仓库：linsk27/Vue-blog
线上演示：vue-blog-smoky.vercel.app
项目总览：linsk27 Projects

如果这个 Vue 博客项目对你有参考价值，欢迎在 GitHub 仓库点 Star。Star 是我继续完善页面结构、文档和可复用组件示例的主要信号。

echarts-learn 数据可视化练习

Wed, 09 Apr 2025 00:00:00 +0000

echarts-learn 是一个 Vue、Nuxt 和 ECharts 数据可视化练习项目，用来展示多图表 dashboard 的页面组织方式。它覆盖柱状图、雷达图、关系图、环形图、词云和数据总览，适合用来参考 ECharts data visualization、Vue chart project 和 dashboard UI 的组合方式。

适合谁

想参考 Vue 和 ECharts 如何组合成数据大屏的人。
正在做 dashboard UI、数据看板、监控页面或图表交互练习的人。
需要柱状图、雷达图、关系图、环形图和词云组合示例的人。
想看 Nuxt 项目如何组织组件和页面入口的人。

项目价值

这个项目的重点不是单个图表，而是把多个可视化组件放在同一个页面里，形成一个完整的数据看板。对搜索 Vue ECharts dashboard、ECharts data visualization、Nuxt dashboard 或 chart interaction demo 的人来说，这个页面可以直接说明项目的展示效果和代码入口。

截图来自本地运行项目并使用同结构演示数据生成。这样可以避免远程示例数据接口不可访问时只截到加载态，同时保留项目真实的页面布局和组件结构。

技术方向

Vue
Nuxt
ECharts
数据可视化
dashboard UI
图表组件拆分
数据看板页面组织

项目入口

GitHub 仓库：linsk27/echarts-learn
项目总览：linsk27 Projects

如果这个 ECharts 数据可视化项目对你有参考价值，欢迎在 GitHub 仓库点 Star。Star 是我继续补充图表说明、运行文档和可复用示例的主要信号。

feidu 智慧社区数据大屏

Sun, 30 Mar 2025 00:00:00 +0000

feidu 是一个 Nuxt 3、Vue、Tailwind CSS 和 ECharts 组成的智慧社区数据大屏项目。它把社区管理、安防监控、CIM 平台、能源检测和节能分析集中在一个可视化界面里，适合展示智慧社区、园区管理、安防运维和能源数据看板类项目的前端实现方式。

适合谁

想参考智慧社区、智慧园区或数据大屏界面实现的人。
想学习 Nuxt 3、Vue、Tailwind CSS 和 ECharts 组合方式的人。
需要安防监控、CIM 平台、能源检测、节能分析等可视化页面结构的人。
想看真实线上演示，而不是只看静态截图的前端学习者。

项目价值

feidu 的价值在于它不是单个图表练习，而是把多种业务模块组织成一个完整大屏：左侧展示安防概况、摄像头监控和报警信息，中间展示城市 / 社区 CIM 场景，右侧展示舒适度、能耗、系统能效和机组运行状态。底部还提供社区管理、安保监控、CIM 平台、能源检测和节能分析等模块切换入口。

如果你搜索的是 smart community dashboard、Vue ECharts dashboard、Nuxt 3 data visualization、security monitoring dashboard、energy monitoring dashboard 或 CIM platform UI，这个项目可以作为一个可运行的前端大屏参考。

技术方向

Nuxt 3
Vue
Tailwind CSS
ECharts
Element Plus
数据可视化大屏
智慧社区界面
安防监控看板
能源监测与节能分析
CIM 平台前端展示

项目入口

GitHub 仓库：linsk27/feidu
线上演示：feidu-murex.vercel.app
项目总览：linsk27 Projects

如果这个智慧社区数据大屏对你有参考价值，欢迎在 GitHub 仓库点 Star。Star 是我继续完善项目文档、模块说明和线上演示体验的主要信号。

bilibili-nuxt3 Nuxt3 移动端项目

Sun, 23 Mar 2025 00:00:00 +0000

bilibili-nuxt3 是一个 Nuxt 3、Vue、TypeScript 和 Vant 移动端项目实战，围绕视频列表、频道导航、视频详情、分页加载、服务端渲染和 SEO 信息配置展开。它适合作为 Nuxt 3 project、Vue mobile app、Nuxt SSR SEO 和前端移动端页面结构的参考。

适合谁

想参考 Nuxt 3、Vue 和 TypeScript 移动端项目结构的人。
正在学习 SSR、SEO meta、文件路由和首屏数据获取的人。
需要 Vant UI、频道导航、视频列表和详情页示例的人。
想做移动端前端项目实战、课程项目或简历作品的人。

项目价值

这个项目的价值在于它把 Nuxt 的服务端渲染、SEO 信息配置、文件路由、移动端适配和数据交互放在一个完整示例里。相比普通组件练习，它更接近真实移动端内容应用，适合用来观察首页信息流、频道 tab、视频卡片和详情页之间的组织方式。

项目预览图来自仓库 README。历史线上预览链接当前连接不稳定，因此这个项目页优先保留稳定的截图、技术说明和 GitHub 仓库入口，后续演示站恢复后再补充新的在线入口。

技术方向

Nuxt 3
Vue
TypeScript
Vant UI
SSR
SEO meta
移动端 vw 适配
视频列表与详情页

项目入口

GitHub 仓库：linsk27/bilibili-nuxt3
项目总览：linsk27 Projects

如果这个 Nuxt 3 移动端项目对你有参考价值，欢迎在 GitHub 仓库点 Star。Star 是我继续完善预览、运行文档和项目说明的主要信号。

悬浮出现箭头盒子的写法

Fri, 07 Mar 2025 00:00:00 +0000

模板部分

<template>
<!--断层-->
      <div class="tooltip-box">
      <div class="tooltip-arrow"></div>
        点击复制链接
      </div>
<!--伪类写法-->
      <div class="copy-tooltip-box">
        点击复制链接
      </div>
</template>

Css处理部分

断层写法例子

.tooltip-arrow {
  position: absolute;     /* 👉 基于父容器（.tooltip-box）定位 */
  bottom: -10px;          /* 👉 位于提示框下方 10px 处（负值向上移动） */
  left: 50%;              /* 👉 水平居中 */
  transform: translateX(-50%);  /* 👉 微调水平位置 */
  width: 0;               /* 👉 宽度为 0，通过边框生成三角形 */
  height: 0;              /* 👉 高度为 0 */
  border-left: 8px solid transparent;  /* 👉 左侧透明边框 */
  border-right: 8px solid transparent; /* 👉 右侧透明边框 */
  border-top: 10px solid white;        /* 👉 顶部实色边框，形成箭头 */
}

使用伪类防止断层写法

推荐方法，防止黑色透明箭头和盒子交接处出现断层深色线条

// 正常的样例盒子
.copy-tooltip-box {
  bottom: calc(100% + 14px);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: #323233D9; /* 黑色主题 */
  width: 88px;
  height: 28px;
  color: #fff;
}
// 伪类实现方法
.copy-tooltip-box:after {
  content: "";
  position: absolute;
  top: 100%;
  /* 箭头位于提示框底部 */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #323233D9;
}

什么是防抖和节流？什么时候去用？

Sat, 26 Oct 2024 00:00:00 +0000

什么是防抖（Debounce）？

防抖（多次触发只执行最后一次）

原理：在高频率触发某个响应事件时，在规定时间间隔内如果没有再次触发，则属于最后一次完成交互，触发相对应的方法
常用：在用户输入搜索词的过程中，每一次输入都会触发 input 事件，但显然没必要每次都发送请求，只有当用户停止输入后，系统才发送一次最终的请求

手搓代码：

// 1.封装防抖函数
function debounce(fn, time) {
  // 4.创建一个标记用来存放定时器的返回值
  let timeout = null;
  return function () {
    // 5.每当用户触发input事件  把前一个 setTimeout 清楚掉
    clearTimeout(timeout);
    // 6.然后又创建一个新的 setTimeout, 这样就能保证输入字符后等待的间隔内 还有字符输入的话，就不会执行 setTimeout里面的内容
    timeout = setTimeout(() => {
      // 7.这里进行防抖的内容
      fn();
    }, time);
  };
}

// 2.获取inpt元素
var inp = document.getElementById("inp");
// 8. 测试防抖临时使用的函数
function sayHi() {
  console.log("防抖成功");
}
// 3.给inp绑定input事件  调用封装的防抖函数  传入要执行的内容与间隔事件
inp.addEventListener("input", debounce(sayHi, 5000));

什么是节流（Throttle）？

节流（时间间隔内只允许执行一次）

原理：在高频率触发某个有响应方法的事件时，第一次触发响应事件，计时器开始计时，规定时间内继续交互不触发事件
常用：鼠标滚轮滑动触发下拉刷新、王者的英雄技能刷新

手搓代码：

// 1.封装节流函数
function throttle(fn, time) {
  //3. 通过闭包保存一个 "节流阀" 默认为false
  let temp = false;
  return function () {
    //8.触发事件被调用 判断"节流阀" 是否为true  如果为true就直接trurn出去不做任何操作
    if (temp) {
      return;
    } else {
      //4. 如果节流阀为false  立即将节流阀设置为true
      temp = true; //节流阀设置为true
      //5.  开启定时器
      setTimeout(() => {
        //6. 将外部传入的函数的执行放在setTimeout中
        fn.apply(this, arguments);
        //7. 最后在setTimeout执行完毕后再把标记'节流阀'为false(关键)  表示可以执行下一次循环了。当定时器没有执行的时候标记永远是true，在开头被return掉
        temp = false;
      }, time);
    }
  };
}
function sayHi(e) {
  // 打印当前 document 的宽高
  console.log(e.target.innerWidth, e.target.innerHeight);
}
// 2.绑定事件，绑定时就调用节流函数
// 敲黑板！！！ 这里是重点 绑定是就要调用一下封装的节流函数 触发事件是触发封装函数内部的函数
window.addEventListener("resize", throttle(sayHi, 2000));

高效方式实现防抖和节流

使用 Loadash 库实现防抖和节流

lodash 是一个留下的 JavaScript 实用工具库，提供了高效的防抖和节流函数

使用步骤

安装 lodash

`1`	`npm install lodash`

使用防抖和节流

import debounce from "lodash/debounce";
import throttle from "lodash/throttle";

// 防抖示例
const debouncedSearch = debounce(handleSearch, 300);
searchInput.addEventListener("input", debouncedSearch);

// 节流示例
const throttledScroll = throttle(handleScroll, 200);
window.addEventListener("scroll", throttledScroll);

设置合适的时间间隔

防抖和节流的核心在于事件频率控制，因此根据实际场景合理设置时间参数非常关键。过长的延迟可能导致响应不及时，而过短的间隔可能会影响性能提升效果。

通常，防抖的延迟在200ms到500ms之间，节流的时间间隔在100ms到300ms之间。

我写过的

  import _ from 'lodash'
  const loading=ref()
  // 防抖搜索（核心逻辑）
  const handleSearch = _.debounce(async (query) => {
    if (!query) return
    loading.value = true
    try {
      let res;
      // 接口调用
      res = await props.api({ name: query})
    } finally {
      loading.value = false
    }
  }, 300)

js中数组去的常规去重方法

Mon, 14 Oct 2024 00:00:00 +0000

数组去重方法

1. 通过 `filter` 过滤函数

JavaScript 的 Array.prototype.filter() 方法可以创建一个新数组，其包含通过所提供函数实现的测试的所有元素。利用这个特性，我们可以对数组进行去重。

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((item, index, self) => {
  return self.indexOf(item) === index;
});
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]

2. 通过 `new Set()` 集合进行去重

Set 是 ES6 引入的一种新的数据结构，它类似于数组，但是成员的值都是唯一的，没有重复的值。我们可以利用这个特性进行数组去重。

1
2
3

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]

3. `for` 循环遍历判断

虽然 filter 和 Set 是更现代且效率更高的方法，但了解如何使用 for 循环进行去重也很有用。

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [];
for (let i = 0; i < array.length; i++) {
  if (uniqueArray.indexOf(array[i]) === -1) {
    uniqueArray.push(array[i]);
  }
}
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]

el-select标签存在的数据匹配问题

Sun, 13 Oct 2024 00:00:00 +0000

一使用方法

userList数据循环在列表，下拉框显示的值为userList里面的label字段的值，实际值为对应label的uuid值，如下面例子中输出选中小王的值应该为01

<template>
  <el-select v-model="form">
    <el-option
      v-for="item in userList"
      :key="item.uuid"
      :label="item.username"
      :value="item.uuid"
    />
  </el-select>
</template>

const userList = ref([{
    username:'小王',
    uuid:'01'
}])
const form = ref<any>()

二传值问题（匹配功能）

当我们在子组件进行表单操作的时候，需要从父组件往子组件传相关操作数据的值，若传入form的值是小王，则form在下拉框中显示的值为小王,实际值也为小王，若传入的值为01,则下拉框中显示的值为小王，实际值依旧为01

v-if和v-for为何不该同时作用于一个模块？

Sat, 12 Oct 2024 00:00:00 +0000

[vue/no-use-v-if-with-v-for] 这个错误信息是由 ESLint 的 Vue.js 插件 eslint-plugin-vue 产生的。它指出在你的 Vue.js 模板中，v-if 和 v-for 指令被不当地一起使用在了同一个元素上。

为什么会产生这个错误？

在 Vue.js 中，当 v-if 和 v-for 同时用在同一个元素上时，Vue 会先处理 v-for，然后处理 v-if。这意味着即使 v-if 最终会过滤掉一些元素，v-for 仍然会遍历整个列表，这可能会导致不必要的计算开销，特别是在处理大型列表时。

如何修复这个错误？

根据 ESLint 的建议，你应该将 v-if 移动到包含 v-for 的父元素（或“包装元素”）上。这样可以确保 v-if 的条件判断只执行一次，而不是对 v-for 生成的每个元素都执行。

错误的示例：

1
2
3

<div v-for="item in items" v-if="item.active" :key="item.id">
  {{ item.name }}
</div>

在这个例子中，v-if 会在每次迭代时都执行，检查 item.active 是否为真。

正确的示例：

<div v-if="hasActiveItems">
  <div v-for="item in activeItems" :key="item.id">
    {{ item.name }}
  </div>
</div>

在这个修正后的例子中，首先通过一个计算属性 hasActiveItems 或在 data、computed 或 methods 中定义的逻辑来检查是否有活跃的项。如果有，则使用 v-for 来渲染这些活跃的项。这里的 activeItems 应该是一个只包含活跃项的数组。

总结

通过将 v-if 移动到 v-for 的外部，你可以优化你的 Vue 组件的性能，避免不必要的渲染和计算。这也是 Vue.js 官方文档和 ESLint 插件推荐的最佳实践。

Vue on 404_@林达

Dev Cockpit 资源雷达工作台

为什么做这个

当前资源页

它解决什么问题

现在收集的资源样例

适合谁

技术方向

项目入口

AI Vue Flask Blog 全栈系统

适合谁

项目价值

技术方向

项目入口

Vue-blog 前端博客项目

适合谁

项目价值

技术方向

项目入口

echarts-learn 数据可视化练习

适合谁

项目价值

技术方向

项目入口

feidu 智慧社区数据大屏

适合谁

项目价值

技术方向

项目入口

bilibili-nuxt3 Nuxt3 移动端项目

适合谁

项目价值

技术方向

项目入口

悬浮出现箭头盒子的写法

模板部分

Css处理部分

断层写法例子

使用伪类防止断层写法

什么是防抖和节流？什么时候去用？

什么是防抖（Debounce）？

防抖 （多次触发 只执行最后一次）

什么是节流（Throttle）？

节流 （时间间隔内 只允许执行一次）

高效方式实现防抖和节流

使用 Loadash 库实现防抖和节流

使用步骤

我写过的

js中数组去的常规去重方法

数组去重方法

1. 通过 filter 过滤函数

2. 通过 new Set() 集合进行去重

3. for 循环遍历判断

el-select标签存在的数据匹配问题

一 使用方法

二 传值问题（匹配功能）

v-if和v-for为何不该同时作用于一个模块？

为什么会产生这个错误？

如何修复这个错误？

错误的示例：

正确的示例：

总结

防抖（多次触发只执行最后一次）

节流（时间间隔内只允许执行一次）

1. 通过 `filter` 过滤函数

2. 通过 `new Set()` 集合进行去重

3. `for` 循环遍历判断

一使用方法

二传值问题（匹配功能）