前端 on 404_@林达

AI-v0.dev AI UI 原型

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

AI-v0.dev- 是一个用 Next.js、React、TypeScript、Tailwind CSS 和 shadcn/ui 搭出来的 AI 学习仪表盘原型。它把 3 个月 AI 工程师冲刺计划拆成时间线、项目卡片、知识体系、里程碑、任务进度和本地数据管理。

适合谁

想看 v0.dev 生成页面如何继续整理成真实项目的人。
正在做 AI learning dashboard、Next.js dashboard 或学习计划工具的人。
想参考 shadcn/ui、Tailwind 和 Radix UI 组合方式的前端开发者。
需要 AI UI prototype、项目卡片、进度追踪和本地状态管理界面的人。

项目价值

这个项目的重点是产品原型表达。它不是默认模板仓库，而是把学习计划、任务、项目、资源和里程碑组合成一个可交互的仪表盘。对于搜索 AI UI prototype、v0.dev workflow、Next.js dashboard、Tailwind interface design 或 AI learning dashboard 的人，这个页面能更快说明项目价值。

技术方向

Next.js
React
TypeScript
Tailwind CSS
shadcn/ui
Radix UI
localStorage 状态管理
v0.dev workflow

项目入口

GitHub 仓库：linsk27/AI-v0.dev-
项目总览：linsk27 Projects

如果这个 AI 产品界面原型对你有参考价值，欢迎在 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 是我继续完善页面结构、文档和可复用组件示例的主要信号。

手撸好看柱状图的记录

Tue, 03 Jun 2025 01:05:52 +0800

            <div class="compliance-bar" v-for="item in averageScore" :key="item.name">
                <div class="bar-label">
                    {{ item.name }}
                    <div>
                        <span :style="`color:${item.color}`">{{ item.value + `${item.base === '/ 100%' ? '%' : ''}`
                        }}</span> {{
                                item.base }}
                    </div>
                </div>
                <div class="bar-bg">
                    <div class="bar-fill"
                        :style="{ width: item.base === '/ 100%' ? item.value + '%' : item.value / 5 * 100 + '%', backgroundColor: item.color }">
                    </div>
                </div>
            </div>


const averageScore = [
    { name: "Qualitative Assessment (QA)", value: 2.4, base: '/ 5', color: "#ee6262" },
    { name: "Facility Proximity (FP)", value: 78.6, base: '/ 100%', color: "#ffe2a4" },
    { name: "Infrastructure Completion (IC)", value: 91.97, base: '/ 100%', color: "#b8afff" }
];


        .compliance-bar {
            @include MarginBottom(20);

            .bar-label {
                display: flex;
                @include hHeight(17);
                font-family: PingFang SC;
                @include FontSize(12);
                text-transform: capitalize;
                @include MarginBottom(7);
                justify-content: space-between;
                color: #D3D3D4;
            }

            .bar-bg {
                width: 100%;
                @include hHeight(8);
                background: #39404a;

                .bar-fill {
                    height: 100%;
                    @include BorderRadius(4);
                }
            }

        }

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 是我继续补充图表说明、运行文档和可复用示例的主要信号。

初步接触可视化Echarts

Tue, 08 Apr 2025 17:44:12 +0800

什么是Echarts

ECharts（全称：Enterprise Charts）是由百度开源的一个基于 JavaScript 的可视化图表库，专门用于构建交互性强、表现丰富的数据可视化图表。

它能做什么？

ECharts 提供了多种常用和高级图表类型，适用于数据分析、仪表盘、报表系统、可视化大屏等场景，例如：

折线图（line）
柱状图（bar）
饼图（pie）
散点图（scatter）
地图（map，支持中国地图和世界地图）
仪表盘（gauge）
热力图（heatmap）
自定义图形（graph、tree、sunburst 等）

它的核心特点：

特性	说明
高性能	基于 Canvas 渲染，适合大数据量可视化
响应式	能适应不同屏幕尺寸，自适应缩放
交互性强	支持 tooltip、点击事件、缩放、图例控制等
主题丰富	提供多种主题，也可自定义
开源免费	使用 Apache-2.0 协议，商业项目也可免费用

安装方式（前端项目）：

如果你用的是 Nuxt、Vue、React 等框架，常见引入方式有两种：

npm/yarn 安装：

1
2
3

yarn add echarts
# 或者
npm install echarts

直接在 HTML 中引用（CDN）：

`1`	`<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>`

其他类似图表库

虽然 ECharts 很强大，但近几年市面上也涌现了不少其它优秀的图表库，例如：

AntV/G2 系列：蚂蚁金服出品，视觉效果更现代，支持更多数据关系分析，且生态体系逐步完善。
D3.js：功能灵活，适合自定义程度非常高的可视化开发，不过上手难度和开发成本较高。
Highcharts、Chart.js：Highcharts 商业授权较为严格，而 Chart.js 则适合中小型数据量和基本交互需求。

如何写一个图表

图表步骤

初始化 echarts 实例

let myChart = null
onMounted(()=>{
    myChart = echarts.init(target.value)
})

构建 option 配置对象
1 2

const options = { }
通过实例.setOption(option) 挂载到对应盒子上
1

myChart.setOption(options)

图表配置

柱形图

const options = {
 // X轴展示数据
 xAxis:{
     show: false,
     // x方向作为值展示
     type: 'value',
     // 设置最大值的配置
     max: function (value) {
         // 动态最大值设置为所有数据中的最大值1.2倍，防止样式问题
         return parseInt(value.max * 1.2)
     }
 },
 // y轴展示数据
 yAxis:{
     // 作为列名展示
     type: 'category',
     // 列名数组，默认从下到上
     data: props.data.regions?.map((item) => item.name),
     // 反向展示
     inverse: true,
     // 不展示线
     axisLine: { show: false },
     // 不展示刻度
     axisTick: { show: false },
     // 展示列名并且label颜色设置
     axisLabel: { color: '#9eb1cd' },
 },
 // 图表绘制的位置，对应上下左右
 grid:{
     top: 0,
     right: 0,
     left: 0,
     bottom: 0,
     // 标签包含进去
     containLabel: true
 },
 // 核心配置
 series:[
     {
         // 柱形图
         type: 'bar',
         // 展示的数据
         data: props.data.regions?.map((item) => ({
             name: item.name,
             value: item.value
         })),
         // 柱状条背景开关
         showBackground: true,
         // 柱状条背景色
         backGroundStyle: {
             color: 'rgba(180, 180, 180, 0.2)'
         },
         // 每个轴的样式
         itemStyle: {
             color: '#5d98CE',
             barBorderRadius: 10,
             shadowColor: 'rgba(0,0,0,0.3)',
             shadowBlur: 5,
         },
         // 柱子宽度
         barWidth: 12,
         // 字体的显示
         label: {
             show: true,
             position: 'right',
             textStyle: {
                 color: '#fff',
             }
            	// 为数据加上百分比，c代表数据
             formatter:'{c}%'
         }
     }
 ],
}

雷达图

    const option = {
        // 雷达坐标系配置
        radar: {
            // 坐标系（外部）名字配置
            name: {
                textStyle: {
                    color: '#05D5FF',
                    fontSize: 14
                }
            },
            // 雷达图形状
            shape: 'polygon',
            center: ['50%', '50%'],
            radius: '80%',
            // 起始位置(开始角度)
            startAngle: 120,
            // 轴线配置
            axisLine: {
                lineStyle: {
                    color: 'rgba(5,213,255,0.8)'
                }
            },
            // 网格线，为true才能形成闭环
            splitLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: 'rgba(5,213,255,0.8)'
                }
            },
            // 指示器,就是name部分的坐标系（外部）名字
            indicator: props.data.risks.map((item) => ({
                name: item.name,
                max: 100
            })),
            // 拆分区域，false网格内颜色区分更明显
            splitArea: {
                show: false
            }
        },
        // 坐标极点
        polar: {
            center: ['50%', '50%'],
            radius: '0%'
        },
        // 坐标角度
        angleAxis: {
            min: 0,
            // 分割线分割间隔
            interval: 5,
            // 刻度显示是否为逆时针增长,
            clockwise: false
        },
        // 径向轴
        radiusAxis: {
            min: 0,
            interval: 20,
            splitLine: {
                show: false
            }
        },
        // 图表核心配置
        series: [
            {
                type: 'radar',
                // 指定形状
                symbol: 'circle',
                // 内部数据拐角大小
                symbolSize: 10,
                itemStyle: {
                    normal: {
                        color: '#05D5FF'
                    }
                },
                areaStyle: {
                    normal: {
                        color: '#05D5FF',
                        opacity: 0.5
                    }
                },
                lineStyle: {
                    width: 2,
                    color: '#'
                },
                label: {
                    normal: {
                        // 内部数据文本
                        show: true,
                        color: '#fff'
                    }
                },
                data: [
                    {
                        value: props.data.risks.map((item) => item.value)
                    }
                ]
            }
        ]
    }

环形图

const getSeriesData = () => {
const series = []
props.data.abnormals.forEach((item, index) => {
 // 上层
 series.push({
     name: item.name,
     type: 'pie',
     // 逆时针排列
     clockWise: false,
     // 取消悬浮动画
     hoverAnimation: false,
     // 实现半径依次递减
     radius: [73 - index * 15 + '%', 68 - index * 15 + '%'],
     center: ['50%', '50%'],
     label: {
         show: false
     },
     data: [
         {
             value: item.value,
             name: item.name
         },
         {
             value: 1000,
             itemStyle: {
                 color: 'rgba(0,0,0,0)',
                 borderWidth: 0,
             },
             tooltip: {
                 show: false
             },
             hoverAnimation: false
         }
     ]
 })
 // 底层
 series.push({
     name: item.name,
     type: 'pie',
     // 不希望收到任何事件
     silent: true,
     z: 1,
     // 逆时针排列
     clockWise: false,
     // 取消悬浮动画
     hoverAnimation: false,
     // 实现半径依次递减
     radius: [73 - index * 15 + '%', 68 - index * 15 + '%'],
     center: ['50%', '50%'],
     label: {
         show: false
     },
     data: [
         {
             value: 7.5,
             name: item.name,
             itemStyle: {
                 color: 'rgba(3,31,62)',
                 borderWidth: 0,
             },
             tooltip: {
                 show: false,
             },
             hoverAnimation: false
         },
         {
             value: 2.5,
             itemStyle: {
                 color: 'rgba(0,0,0,0)',
                 borderWidth: 0,
             },
             tooltip: {
                 show: false,
             },
             hoverAnimation: false
         }
     ]
 })
});
return series
}
const option = {
 // 图例配置
 legend: {
     show: true,
     // 图例颜色块形状
     icon: 'circle',
     top: '8%',
     left: '52%',
     // 图例数据文本
     data: props.data.abnormals.map((item) => item.name),
     // 负数以列展示
     width: -5,
     // 色块宽高
     itemWidth: 10,
     itemHeight: 10,
     // 图例间距
     itemGap: 6,
     textStyle: {
         fontSize: 12,
         lineHeight: 5,
         color: '#fff'
     }
 },
 // 悬浮提示层
 tooltip: {
     show: true,
     // 触发器
     trigger: 'item',
     // 展示内容,a代表系列名，b代表数据名，c代表数据值,d代表百分比比例
     formatter: '{a}<br>{b}:{c}({d}%)'
 },
 yAxis: [
     {
         type: 'category',
         // 反向展示
         inverse: true,
         axisLine: {
             show: false
         }
     }
 ],
 xAxis: [
     {
         show: false
     }
 ],
 // 由于饼图过多，通过方法进行配置
 series: getSeriesData()
}

关系图

    const option = {
        xAxis: {
            show: false,
            type: 'value'
        },
        yAxis: {
            show: false,
            type: 'value'
        },
        series: [
            {
                type: 'graph',
                // 表示不需要任何布局类型
                layout: 'none',
                // 该系列需要使用的坐标系：“二维直角坐标系”
                coordinateSystem: 'cartesian2d',
                // 节点大小
                symbolSize: 26,
                z: 3,
                // 边界的萧条标签文字
                edgeLabel: {
                    // 默认
                    normal: {
                        show: true,
                        color: '#fff',
                        testStyle: {
                            fontSize: 14
                        },
                        // 文本模拟内容
                        formatter: function (params) {
                            return params.data.speed
                        }
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'bottom',
                        color: '#5E5E5E'
                    }
                },
                // 边两端的标记类型,数据流动图标类型
                edgeSymbol: ['none', 'arrow'],
                edgeSymbolSize: 8,
                data: props.data.relations.map(item => {
                    if (item.id !== 0) {
                        return {
                            name: item.name,
                            category: 0,
                            active: true,
                            speed: `${item.speed}kb/s`,
                            value: item.value,
                        }
                    } else {
                        return {
                            name: item.name,
                            value: item.value,
                            symbolSize: 100,
                            itemStyle: {
                                color: {
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: '#157eff'
                                        },
                                        {
                                            offset: 1,
                                            color: '#35c2ff'
                                        },
                                    ]
                                }
                            },
                            label: {
                                normal: {
                                    fontSize: 14
                                }
                            }
                        }
                    }
                }),
                // 节点间的数据关系
                links: props.data.relations.map((item, index) => ({
                    source: item.source,
                    target: item.target,
                    speed: `${item.speed}kb/s`,
                    lineStyle: {
                        normal: {
                            color: '#12b5d0',
                            // 曲线率
                            curveness: 0.2
                        }
                    },
                    label: {
                        show: true,
                        position: 'middle',
                        // 是否对文字进行偏移
                        offset: [10, 0]
                    }
                }))
            }, {
                type: 'lines',
                // 该系列需要使用的坐标系：“二维直角坐标系”
                coordinateSystem: 'cartesian2d',
                z: 1,
                // 线条的特效配置
                effect: {
                    show: true,
                    smooth: false,
                    trailLength: 0,
                    symbol: 'arrow',
                    color: 'rgba(55,155,255,0.6)',
                    symbolSize: 12
                },
                lineStyle: {
                    normal: {
                        curveness: 0.2
                    }
                },
                data: [
                    [{ coord: [0, 300] }, { coord: [50, 200] }],
                    [{ coord: [0, 100] }, { coord: [50, 200] }],
                    [{ coord: [50, 200] }, { coord: [100, 100] }],
                    [{ coord: [50, 200] }, { coord: [100, 300] }]
                ]
            }
        ]
    }

词云图

需要安装依赖后导入import("echarts-wordcloud")

注意：借助浏览器的插件在Nuxt框架下需要判断让它在客户端导入，不然会报错！

const option ={
        series: [
            {
                type: 'wordCloud',
                // 文字大小范围
                sizeRange: [8, 46],
                // 文字旋转
                rotationRange: [0, 0],
                gridSize: 0,
                layoutAnimation: true,
                textStyle: {
                    color: randomRGB
                },
                // 高亮字体
                emphasis: {
                    textStyle: {
                        fontWeight: 'bold',
                        color: '#000'
                    }
                },
                data: props.data.datas
            }
        ]
    }

封装composable用于操作echarts生成

按需加载插件，节省初始包体积。
避免 SSR 报错（import 仅在客户端执行）。
onMounted：监听 resize 事件，onBeforeUnmount：解除 resize 监听，释放图表实例
销毁 ECharts 实例：释放资源，避免内存不断积累。
正确时机：组件即将卸载时执行，最适合做 cleanup。
markRaw 处理 chartInstance，避免将 ECharts 实例做响应式包裹，提升性能，避免不必要的跟踪。

// 导入 echarts 主库
import * as echarts from "echarts"
import { markRaw } from 'vue' // 添加这句

// 声明 process.client（为了让 TypeScript 不报错）
// 在 Nuxt 中，process.client 表示是否处于客户端运行环境
declare const process: {
  client: boolean;
}

// 导出一个 composable，用于封装 echarts 的初始化和操作逻辑
export const useEcharts = () => {
  // 图表容器的 DOM 引用（挂载到页面上的 <div ref="chartRef">）
  const chartRef = ref<HTMLElement | null>(null)

  // 图表实例对象（echarts.init 的返回值）
  let chartInstance: echarts.ECharts | null = null

  // 初始化图表，支持普通图表或词云（wordcloud）
  const initChart = async (type?: "wordcloud") => {
    if (!chartRef.value) return // 容器还没挂载，跳过
    // 如果是词云图表，并且是在客户端环境下，动态加载 echarts-wordcloud 插件
    if (type === "wordcloud" && process.client) {
      await import("echarts-wordcloud")
    }

    // 初始化 echarts 实例，绑定到 DOM 容器上, 使用 markRaw 避免响应式干扰
	chartInstance = markRaw(echarts.init(chartRef.value))
  }

  // 设置图表的配置项（option）
  const setOptions = (options: any) => {
    chartInstance?.setOption(options)
  }

  // 响应窗口大小变化，重置图表大小
  const resize = () => {
    chartInstance?.resize()
  }

  // 组件挂载时绑定 resize 事件监听
  onMounted(() => {
    if (process.client) {
      window.addEventListener("resize", resize)
    }
  })

  // 组件销毁前解绑事件监听，并销毁 echarts 实例释放资源
  onBeforeUnmount(() => {
    if (process.client) {
      window.removeEventListener("resize", resize)
      chartInstance?.dispose()
    }
  })

  // 返回方法和 DOM 引用，供组件内使用
  return {
    chartRef,     // DOM 引用，组件中通过 ref="chartRef" 绑定
    initChart,    // 初始化图表方法
    setOptions,   // 设置图表配置项方法
    resize        // 手动触发图表 resize
  }
}

用nuxt3写echarts开发注意事项

SSR渲染问题

图表组件依赖 DOM 和浏览器环境，不能 SSR，用 <ClientOnly> 包裹图表部分，完美规避服务端渲染的问题。

初步接触nuxt3

Sun, 06 Apr 2025 19:18:28 +0800

关键概念

导入功能的提升

Components 文件夹组件自动导入

在 Nuxt 中，你可以在 components/ 目录中创建这些组件，它们将自动在整个应用程序中可用，无需显式地导入。

Auto-imports 自动导入(响应式 API、生命周期)

<script setup lang="ts">
/* ref() and computed() are auto-imported */
const count = ref(1)
const double = computed(() => count.value * 2)
</script>

Built-in Auto-imports 内置自动导入

1
2
3

<script setup lang="ts">
  /* useFetch() is auto-imported */ const {(data, refresh, status)} = await useFetch('/api/hello')
</script>

Vue.js 路由

1. 通过`pages/`每个组件生成路由

-| pages/
---| about.vue
---| index.vue
---| posts/
-----| [id].vue

2. `<NuxtLink>`标签进行路由跳转

<template>
  <header>
    <nav>
      <ul>
        <li><NuxtLink to="/about">About</NuxtLink></li>
        <li><NuxtLink to="/posts/1">Post 1</NuxtLink></li>
        <li><NuxtLink to="/posts/2">Post 2</NuxtLink></li>
      </ul>
    </nav>
  </header>
</template>

3. Route Parameters 路由参数

<script setup lang="ts">
  const route = useRoute() // When accessing /posts/1, route.params.id will be 1
  console.log(route.params.id)
</script>

4. Route Middleware 路由中间件

导航到特定路由之前提取要运行的代码
路由中间件在 Nuxt 应用程序的 Vue 部分运行。尽管名称相似，但它们与服务器中间件完全不同，后者在应用程序的 Nitro 服务器部分运行。

export default defineNuxtRouteMiddleware((to, from) => {
  // isAuthenticated() is an example method verifying if a user is authenticated
  if (isAuthenticated() === false) {
    return navigateTo("/login");
  }
});

<script setup lang="ts">
definePageMeta({
  middleware: "auth",
});
</script>

<template>
  <h1>Welcome to your dashboard</h1>
</template>

5. Route Validation 路由验证

Nuxt 通过你想要验证的每个页面中 definePageMeta（）中的 validate 属性提供路由验证。
validate 属性接受路由作为参数。您可以返回一个布尔值，以确定这是否是要使用此页面呈现的有效路由。如果返回 false，但找不到其他匹配项，则会导致 404 错误。您也可以直接返回带有 statusCode/statusMessage 的对象，以立即响应错误（不会检查其他匹配项）。

<script setup lang="ts">
definePageMeta({
  validate: async (route) => {
    // Check if the id is made up of digits
    return typeof route.params.id === 'string' && /^\d+$/.test(route.params.id)
  }
})
</script>

Rendering Modes 渲染模式

浏览器和服务器都可以解释 JavaScript 代码，以将 Vue.js 组件转换为 HTML 元素。此步骤称为渲染。
默认情况下，Nuxt 使用通用渲染来提供更好的用户体验、性能并优化搜索引擎索引，但您可以在一行配置中切换渲染模式。

关于服务端渲染和客户端渲染的一个bug，使用setInterval计时器,服务端报错500

1
2
3

setInterval(() => {
  request()
}, 3000);

1. 问题分析

当你在 Nuxt 的组件或页面中直接使用 setInterval 时，这段代码会在服务端渲染阶段被执行。然而，setInterval 是浏览器环境中的 API，在服务端（Node.js）环境中会报错，提示类似以下内容：

`1`	`ReferenceError: setInterval is not defined`

2. 解决方案

使用 process.client 判断是否在客户端运行

nuxt 提供了 process.client 变量，用于判断当前代码是否在浏览器环境中运行。你可以通过这个变量确保 setInterval 只在客户端执行。

// 确保 setInterval 只在客户端运行
if (process.client) {
  const intervalId = setInterval(() => {
    loadData()
  }, 3000)

  // 组件销毁时清除计时器，防止内存泄漏
  onUnmounted(() => {
    clearInterval(intervalId)
  })
}

将计时器逻辑放在 mounted 生命周期钩子中

在 Vue.js 中，mounted 钩子只会在客户端渲染完成后执行，因此可以将计时器逻辑放在这里。

export default {
  mounted() {
    this.interval = setInterval(() => {
      this.loadData();
    }, 3000);
  },
  beforeDestroy() {
    // 清除计时器，防止内存泄漏
    clearInterval(this.interval);
  },
  methods: {
    loadData() {
      console.log('加载数据...');
    }
  }
};

什么是服务器渲染的，什么是客户端渲染的？

<script setup lang="ts">
const counter = ref(0); // executes in server and client environments

const handleClick = () => {
  counter.value++; // executes only in a client environment
};
</script>

<template>
  <div>
    <p>Count: {{ counter }}</p>
    <button @click="handleClick">Increment</button>
  </div>
</template>

在初始请求中，计数器 ref 在服务器中初始化，因为它呈现在 <p>标记内。handleClick 的内容在此处永远不会执行。在浏览器中激活期间，counter ref 会重新初始化。handleClick 最终将自身绑定到按钮;因此，可以合理地推断 handleClick 的主体将始终在浏览器环境中运行。

Universal Rendering 通用渲染

原理

当浏览器请求启用了通用渲染的 URL 时，Nuxt 会在服务器环境中运行 JavaScript （Vue.js）代码，并将完全渲染的 HTML 页面返回给浏览器。如果页面是提前生成的，Nuxt 也可以从缓存中返回完全渲染的 HTML 页面。用户会立即获得应用程序的全部初始内容，这与客户端渲染相反。
下载 HTML 文档后，浏览器会解释此内容，Vue.js 将控制该文档。曾经在服务器上运行的相同 JavaScript 代码再次在客户端（浏览器）上运行，现在通过将其侦听器绑定到 HTML 来启用交互性（因此是通用渲染）。

效果

通用渲染允许 Nuxt 应用程序提供快速的页面加载时间，同时保留客户端渲染的优势。此外，由于内容已经存在于 HTML 文档中，因此爬网程序可以毫无开销地为其编制索引。
通用渲染用途广泛，几乎可以适应任何用例，特别适用于任何面向内容的网站：博客、营销网站、投资组合、电子商务网站和市场。

1. 服务器端渲染（SSR）

概念:
- 在 SSR 模式下，页面的 HTML 内容是在服务器端动态生成的，然后发送到客户端。客户端接收到 HTML 后，再通过 JavaScript 进行进一步的交互。
- SSR 是 Nuxt 3 的默认渲染模式，适合需要 SEO 优化或需要快速首屏加载的应用。
好处
- 性能：用户可以立即访问页面的内容，因为浏览器显示静态内容的速度比 JavaScript 生成的内容快得多。同时，Nuxt 在水合过程中保留了 Web 应用程序的交互性。
- 搜索引擎优化：通用渲染将页面的整个 HTML 内容作为经典服务器应用程序交付给浏览器。Web 爬虫可以直接为页面的内容编制索引，这使得 Universal rendering 成为您想要快速编制索引的任何内容的绝佳选择。
缺点
- 开发约束：服务器和浏览器环境不提供相同的 API，因此编写可以在两端无缝运行的代码可能很棘手。幸运的是，Nuxt 提供了指南和特定变量来帮助您确定一段代码的执行位置。
- 成本：需要运行服务器才能动态呈现页面。这会增加每月成本，就像任何传统服务器一样。但是，由于浏览器接管了客户端导航的通用渲染，服务器调用大大减少了。利用 edge-side 渲染可以降低成本。

2. 静态站点生成（Static Site Generation, SSG）

在 SSG 模式下，页面的 HTML 是在构建时预先生成的，并作为静态文件部署到服务器。这些静态页面可以在没有服务器端逻辑的情况下直接被客户端加载。
SSG 适合内容不经常更新的网站，如博客或文档网站。

3. 单页应用（Single Page Application, SPA）

在 SPA 模式下，页面的 HTML 是在客户端动态生成的，服务器只提供一个初始的 HTML 模板和必要的 JavaScript 文件。
SPA 适合对交互性要求较高的应用，但可能对 SEO 不太友好。

Client-Side Rendering 客户端渲染

相较于通用渲染相反，不做过多叙述

好处
- 开发速度：不考虑服务器的兼容性
- 便宜：不考虑服务器基础设施成本
- 离线：在 Internet 不可用时很好地保持工作
缺点
- 性能: 需等待浏览器下载、解析、运行js，响应长，影响用户体验
- 搜索引擎优化: 索引和更新通过客户端渲染交付的内容需要更多时间。不利于引擎爬虫。

您可以在 nuxt.config.ts中使用 Nuxt 启用仅客户端渲染：

1
2
3

export default defineNuxtConfig({
  ssr: false
})

:warning: 如果你确实使用 ssr： false，你还应该放置一个 HTML 文件， ~/app/spa-loading-template.html 其中包含一些你想用来渲染加载屏幕的 HTML，该屏幕将一直呈现，直到你的应用程序被激活。

Deploying a Static Client-Rendered App部署静态客户端呈现的应用程序

Hybrid Rendering 混合渲染

Route Rules 路由规则

Edge-Side Rendering 边侧渲染

Nuxt的Server层服务

通过`defineEventHandler()`定义接口

server文件夹下定义接名字`channel.get.ts`，默认get接口

//  server
//  - /api
// 	  - channel.get.ts
import channel from "~/database/channel" //channel 是database定义的默认数据
export default defineEventHandler(()=>{
    return channel
})

使用useFetch()调用接口

1
2
3

// 无需导入
// 解构-重命名
const {data:channelList} =await useFetch('/api/channel')

我写过的项目的写法的记录

import { API_HOT_CATEGORY_LIST } from '~/api/category'
import { nodeFetch } from '~/server/utils/handle'

export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  const data = await nodeFetch(API_HOT_CATEGORY_LIST, { body, nitroEvent: event })

  return {
    data,
    status: 0,
    info: 'ok',
  }
})

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 是我继续完善项目文档、模块说明和线上演示体验的主要信号。

初学Promise对象

Thu, 27 Mar 2025 22:33:37 +0800

初学Promise对象，异步基础

推荐实践代码，自己动手调试，更容易理解原理

基础

三个状态（重要）

pendding 等待状态
fullfilled 完成状态
rejected 失败状态

状态流向以及回调函数resolve和reject

Promise状态流向只有两种，而且状态一旦改变，则不会再变

调用reolve函数，则 pendding => fullfilled
调用rejecte函数，则pendding => rejected
只接收第一个参数调用后改变状态，其他的忽略

const promise = new Promise((resolve, reject) => {
  resolve(1);
  reject(2); // 被忽略
})
console.log(promise)
// PromiseState : fullfilled
// PromiseResult: 1

消费者 .then、.catch

最重要最基础的一个就是 .then

个人见解就是then就是对Promise对象的一个总结反馈，判断对象的状态并且执行fullfilled后的函数

.then 的第一个参数是一个函数，该函数将在 promise resolved 且接收到结果后执行。
.then 的第二个参数也是一个函数，该函数将在 promise rejected 且接收到 error 信息后执行。

下面例子，可自己通过注释选择resolve还是reject

let promise = new Promise(function(resolve, reject) {
  // setTimeout(() => resolve("done!"), 1000);
  setTimeout(() => reject(new Error("Whoops!")), 1000);
});

// reject 运行 .then 中的第二个函数
promise.then(
  result => alert(result), // 不运行
  error => alert(error) // 1 秒后显示 "Error: Whoops!"
);

如果我们只对某个状态的情况感兴趣，那么我们可以只为 .then 提供一个函数参数：

let promise = new Promise(resolve => {
  setTimeout(() => resolve("done!"), 1000);
  // setTimeout(() => reject("fail!"), 1000);
});

promise.then(alert); // 1 秒后显示 "done!"
// promise.catch(alert); // 1 秒后显示 "fail!"

实际情况成功的情况较为常见，并且.then和.catch也可以通过链式写法

new Promise((resolve, reject) => {
  resolve(42);
}).then(value => {
  console.log(value); // 输出: 42
});

Promise.API

await+async

Promise 通过链式调用（如 .then() 和 .catch()）管理异步操作的成功或失败；
async 修饰的函数总会返回一个 Promise，无论返回的是普通值还是 Promise 本身；
await await语句之后的代码处于微队列，用于暂停 async 函数的执行，等待后面的 Promise 解析完成，然后直接获得解析结果，从而让异步代码写起来更像同步代码，避免了冗长的 .then() 链。

await 等待的不一定是promise对象，也有可能为await 1; ==> await Promise.resolve(1)

Promise.all

Promise.all([
  // 每个数组对象都是**异步微任务**，因此1和2瞬间输出
  // 对象5 需要等待 对象4 await执行完毕后执行，即3秒后输出3
  new Promise(resolve => setTimeout(() => resolve(4), 4000)), // 对象0，value4
  console.log(1), // 对象1，undefined（不是promise对象）
  new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 对象2，value2
  console.log(2), // 对象3，undefined
  await new Promise(resolve => setTimeout(() => resolve(3), 3000)),  // 对象4，value3
  console.log(3), // 对象5，undefined
]).then((res) => {
  console.log(res);
}) // 4秒后所有异步任务执行完毕，输出
[
    0:1,
    1:undefined,
    2:2,
    3:undefined,
    4:3,
    5:undefined
]

全部完成才会运行.then，如果有某一个失败，则不执行.then

Promise.allSettled([
  new Promise(resolve => setTimeout(() => resolve(4), 4000)),
  console.log(1),
  new Promise((resolve,reject) => setTimeout(() => reject(2), 2000)), // 这里使用reject
  console.log(2),
  await new Promise(resolve => setTimeout(() => resolve(3), 3000)), 
  console.log(3),
]).then((res) => {
  console.log(res);
})
[
    0:1,
    1:undefined,
    2:2,
    3:undefined,
    4:3,
    5:undefined
]

Promise.allsettled

如果任意的 promise reject，则 Promise.all 整个将会 reject。当我们需要所有结果都成功时，它对这种“全有或全无”的情况很有用

Promise.allSettled 等待所有的 promise 都被 settle，无论结果如何。结果数组会是这样的：

对成功的响应，结果数组对应元素的内容为 {status:"fulfilled", value:result}，
对出现 error 的响应，结果数组对应元素的内容为 {status:"rejected", reason:error}。

Promise.allsettled([
  new Promise(resolve => setTimeout(() => resolve(4), 4000)),
  console.log(1),
  new Promise((resolve,reject) => setTimeout(() => reject(2), 2000)), // 这里使用reject
  console.log(2),
  await new Promise(resolve => setTimeout(() => resolve(3), 3000)), 
  console.log(3),
]).then((res) => {
  console.log(res);
})
// 控制台输出
[
    0:{status:fullfiled,value:4},
    1:{status:fullfiled,value:undefined},
    2:{status:rejected,reson:2},
    3:{status:fullfiled,value:undefined},
    4:{status:fullfiled,value:3},
    5:{status:fullfiled,value:undefined},
]

参考文献

js小红书

ECMAScript 6 入门

一道让我失眠的 Promise 面试题

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 是我继续完善预览、运行文档和项目说明的主要信号。

XMLHttpRequest、Axios 与 Fetch 在 Vue3 中的深度解析

Sat, 22 Mar 2025 12:01:56 +0800

XMLHttpRequest、Axios 与 Fetch 在 Vue3 中的深度解析

一、XMLHttpRequest (XHR)

核心特性

历史地位：Web 2.0时代的核心技术，实现AJAX异步请求
兼容性：支持IE6+等老旧浏览器
缺陷：基于回调函数，易产生回调地狱

基础示例

const xhr = new XMLHttpRequest();
// 1. 初始化请求（方法、URL、异步标志）
xhr.open('GET', '/api/data', true);
// 2. 监听状态变化事件
xhr.onreadystatechange = function() {
  // 3. 判断请求完成且状态码200
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 4. 手动解析JSON响应
    console.log(JSON.parse(xhr.responseText));
  }
};
// 5. 发送请求
xhr.send();

代码解析

open()方法：
- 第三个参数true表示异步请求
- readyState状态（标识XMLHttpRequest对象处于什么状态）说明：
  - 0: 未初始化
  - 1: 已建立连接
  - 2: 请求已接收
  - 3: 处理中
  - 4: 完成
手动处理JSON：需通过JSON.parse()转换响应文本
错误处理缺失：未处理4xx/5xx状态码

GET和POST请求数据区别 使用Get请求时,参数在URL中显示,而使用Post方式,则放在send里面使用Get请求发送数据量小,Post请求发送数据量大使用Get请求安全性低，会被缓存，而Post请求反之关于第一点区别，详情见下面两张图：

参考文献：Ajax原理一篇就够了

二、Fetch API

核心特性

现代标准：基于Promise的链式调用
简洁语法：支持async/await
注意点：默认不携带cookie

基础示例

fetch('/api/data')
  .then(response => {
    // 手动处理非2xx状态码
    if (!response.ok) throw new Error('HTTP error');
    return response.json(); // 自动解析JSON
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

代码解析

response.ok：自动判断2xx状态码
.json()方法：返回Promise对象，自动解析JSON
错误处理：
- .catch()捕获网络错误
- 需手动处理业务错误（如404）

Vue3整合示例

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const data = ref(null);
    
    onMounted(async () => {
      try {
        // 使用async/await简化代码
        const response = await fetch('/api/data');
        data.value = await response.json();
      } catch (error) {
        console.error('Fetch Error:', error);
      }
    });
    
    return { data };
  }
};

三、Axios

核心特性

功能丰富：拦截器、自动JSON转换
跨平台：支持浏览器和Node.js
生态集成：与Vue3深度适配

基础示例

axios.get('/api/data')
  .then(response => console.log(response.data))
  .catch(error => {
    // 统一错误处理
    console.error(error.response?.data || error.message);
  });

高级用法：创建实例

// src/api/index.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 5000,
  headers: {'X-Custom-Header': 'foobar'}
});

// 请求拦截器
apiClient.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

// 响应拦截器
apiClient.interceptors.response.use(
  response => response.data,
  error => {
    if (error.response.status === 401) {
      // 统一处理未授权错误
      router.push('/login');
    }
    return Promise.reject(error);
  }
);

export default apiClient;

四、Vue3最佳实践

1. 组合式API封装

import { ref } from 'vue';

export function useFetch(url) {
  const data = ref(null);
  const loading = ref(false);
  const error = ref(null);

  const fetchData = async () => {
    try {
      loading.value = true;
      const response = await fetch(url);
      data.value = await response.json();
    } catch (err) {
      error.value = err.message;
    } finally {
      loading.value = false;
    }
  };

  return { data, loading, error, fetchData };
}

2. Pinia状态管理

// stores/posts.js
import { defineStore } from 'pinia';
import axios from 'axios';

export const usePostStore = defineStore('posts', {
  state: () => ({
    posts: [],
    loading: false,
    error: null
  }),
  actions: {
    async fetchPosts() {
      this.loading = true;
      try {
        const res = await axios.get('/api/posts');
        this.posts = res.data;
      } catch (error) {
        this.error = error.message;
      } finally {
        this.loading = false;
      }
    }
  }
});

五、技术选型对比表

特性	XMLHttpRequest	Fetch	Axios
语法复杂度	⭐️（回调地狱）	⭐️⭐️⭐️（Promise）	⭐️⭐️⭐️⭐️（链式调用）
浏览器兼容性	IE6+	IE10+	IE11+
自动JSON转换	❌	✅	✅
拦截器支持	❌	❌	✅
取消请求	手动实现	✅（AbortController）	✅
默认携带Cookie	❌	❌	✅

六、Vue3项目推荐方案

小型项目：fetch + 组合式API封装
中大型项目：Axios实例 + Pinia状态管理
SSR项目：Nuxt3的useFetch组合式函数
TypeScript项目：Axios + 类型守卫

提示：在Vue3.2+版本中，推荐使用<script setup>语法配合组合式API进行开发，可获得更好的类型推导支持。

el-table中sort(拖拽排序)的常见方法

Sat, 08 Mar 2025 00:00:00 +0000

el-table中sort的常见方法

const sort = async (newIndex: number, oldIndex: number) => {
    if (newIndex === oldIndex) return;

const newData = [...tableData.value.rows];
const [movedItem] = newData.splice(oldIndex, 1);
newData.splice(newIndex, 0, movedItem);

newData.forEach((item, index) => {
  item.index = index;
});

// Vue3 响应式更新方式
tableData.value = { 
  ...tableData.value, 
  rows: [...newData] // 强制替换整个数组触发更新
};

sortData.value.tag_groups = newData.map(item => ({
  tag_group_id: item.tag_group_id,
  index: item.index
}));

isData .value += 1; // 每次拖拽后更新 key
}

悬浮出现箭头盒子的写法

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)

入门前端？如何少走弯路！！！

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

📌 程序员成长的底层逻辑

大学自学常见误区：过度依赖视频教程 → 知识碎片化 + 学习低效 + 上水课坐牢!!!!

一、计算机基础筑基

1.1 网络协议

📖《图解 TCP/IP》- TCP/IP协议族可视化解析
📖《图解 HTTP》- HTTP协议运作机制图解
🔗 MDN HTTP 文档（权威技术参考——官方文档）

1.2 算法与数据结构

📖《算法图解》- 算法思维可视化入门
🏆 LeetCode 新手村（每日一题保持手感）

1.3 数据库基础

🐬 MySQL 极简教程（CRUD快速上手——老胡的周刊）
🎯 SQLZoo 实战（在线SQL练习平台）

1.4 Linux 入门

🐧 中科大 Linux 101（中文实验室手册）
💻 Linux 命令速查表（PDF可打印版）

二、前端学习黄金路径

2.1 核心三件套

技术栈	学习重点	推荐资源
HTML5	语义化标签 + 表单验证	MDN HTML 权威指南
CSS3	Flex/Grid布局 + 动画	CSS Tricks 终极指南
ES6+	异步编程 + DOM操作	现代 JavaScript 教程 ECMAScript 6 入门

2.2 高效学习法

盒子模型思维：所有元素皆盒子（margin/padding/border）
渐进式实战：每日1个小项目 → 每周1个综合案例
调试技巧：Chrome DevTools 断点调试 + 移动端模拟

2.3 精品资源库

🎮 交互学习： ▶ Flexbox 青蛙游戏（弹性布局通关） ▶ Grid 花园（网格布局实战）
📚 文档体系： ▶ ECMAScript 6 入门（阮一峰经典） ▶ 前端九部知识体系（中文渐进教程）
🚀 项目实战： ▶ 50 Projects in 50 Days（项目思维训练） ▶ Vue.js 挑战（框架预热）
在线编辑器:https://plnkr.co/edit

三、开发者效率工具箱

3.1 必备神器

🖋️ Markdown：语法五分钟精通

💻 VS Code：

// 推荐插件配置
{
  "必备插件": [
    "Prettier - 代码格式化",
    "Live Server - 实时预览",
    "GitLens - 代码历史追溯"
  ]
}

3.2 Git 版本控制

🎯 核心工作流：
1. git clone [url] 克隆仓库
2. git checkout -b feature 创建分支
3. git push origin feature 推送更改
📚 Git 飞行规则（故障应急手册）

四、避坑指南（Bonus）

盲目追求框架（先扎实原生JS）
重复造轮子（学会阅读源码）
忽视代码规范（ESLint + Prettier）

立即开启你的高效学习之旅吧！

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 插件推荐的最佳实践。

前端 on 404_@林达

AI-v0.dev AI UI 原型

适合谁

项目价值

技术方向

项目入口

Vue-blog 前端博客项目

适合谁

项目价值

技术方向

项目入口

手撸好看柱状图的记录

echarts-learn 数据可视化练习

适合谁

项目价值

技术方向

项目入口

初步接触可视化Echarts

什么是Echarts

它能做什么？

它的核心特点：

安装方式（前端项目）：

npm/yarn 安装：

直接在 HTML 中引用（CDN）：

其他类似图表库

如何写一个图表

图表步骤

图表配置

柱形图

雷达图

环形图

关系图

词云图

封装composable用于操作echarts生成

用nuxt3写echarts开发注意事项

SSR渲染问题

初步接触nuxt3

关键概念

导入功能的提升

Components 文件夹组件自动导入

Auto-imports 自动导入(响应式 API、生命周期)

Built-in Auto-imports 内置自动导入

Vue.js 路由

1. 通过pages/每个组件生成路由

2. <NuxtLink>标签进行路由跳转

3. Route Parameters 路由参数

4. Route Middleware 路由中间件

5. Route Validation 路由验证

Rendering Modes 渲染模式

关于服务端渲染和客户端渲染的一个bug，使用setInterval计时器,服务端报错500

1. 问题分析

2. 解决方案

什么是服务器渲染的，什么是客户端渲染的？

Universal Rendering 通用渲染

原理

效果

1. 服务器端渲染（SSR）

2. 静态站点生成（Static Site Generation, SSG）

3. 单页应用（Single Page Application, SPA）

Client-Side Rendering 客户端渲染

Deploying a Static Client-Rendered App部署静态客户端呈现的应用程序

Hybrid Rendering 混合渲染

Route Rules 路由规则

Edge-Side Rendering 边侧渲染

Nuxt的Server层服务

通过defineEventHandler()定义接口

server文件夹下定义接 名字channel.get.ts，默认get接口

使用useFetch()调用接口

我写过的项目的写法的记录

feidu 智慧社区数据大屏

适合谁

项目价值

技术方向

项目入口

初学Promise对象

初学Promise对象，异步基础

基础

三个状态（重要）

状态流向以及回调函数resolve和reject

消费者 .then、.catch

1. 通过`pages/`每个组件生成路由

2. `<NuxtLink>`标签进行路由跳转

通过`defineEventHandler()`定义接口

server文件夹下定义接名字`channel.get.ts`，默认get接口

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

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

1. 通过 `filter` 过滤函数

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

3. `for` 循环遍历判断

一使用方法

二传值问题（匹配功能）