前端开发-前端技术分享

看着代码其实也不多，比较简单。登录接口完全实现了，但是还有比较重要的一步，如果拦截Nuxt 3是一个基于Vue 3的服务器端渲染（SSR）框架，它继承了Nuxt.js的核心概念，并利用Vue 3的最新特性，如组合式API（Composition API）和。Nuxt 3是一个开源的框架，使Web开发变得简单而强大，帮助开发者构建高性能的单页应用程序(SPA)，并提供完整的开发、生产、热更新和预渲染功能。

Zod作为一个现代的模式验证与类型推导工具，具有以下优势，使其成为前端进阶必备的工具：与TypeScript无缝集成：Zod允许在定义模式的同时自动生成TypeScript类型，无需重复定义数据结构。运行时验证：TypeScript只能在编译时检查类型，而Zod可以在运行时验证实际数据的正确性，避免潜在的错误。轻量且直观：相比其他工具（如Yup和AJV），Zod的API更加简洁，无需学习复杂的JSON Schema。功能强大：Zod支持嵌套结构、自定义验证、多种数据类型以及异步验证，几乎可以满足所

其实position: sticky 这个用户非常简单，就是使用一些开源组件的时间需要注意父元素的有没有设置overflow: auto|scroll|hidden，uni-table-scroll就设置，所以粘性/悬浮定位不能生效，也很容易被忽略掉。这个组件使用非常方便，使用的频率也非常的高，但是它淌有固定表单的功能，这个问题在一个项目困扰了我很久，找了官方issue，一直没有找到方案。框架中的一个组件，用于在应用中展示表格数据。在项目开发中，我们经常遇到需要固定某一部分重要数据，如表头、菜单等。

nuxt3-admin-template 是一款基于Nuxt3、Vue 3的新一代管理后台模板，旨在为开发者提供一个快速、易用的开发框架。无论你是前端新手还是资深开发者，nuxt3-admin-template 都能帮助你快速搭建起一个功能完善、性能优越的管理后台系统。

由出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xlsxlsxods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。

说栈溢出之前，我们先来一起学习下调用栈，为什么了什么是 javascript 调用栈javascript 引擎是利用栈的这种数据结构来管理执行上下文的。在执行上下文创建好后，javascript 引擎会将执行上下文数据压入栈中，通常把这种用来管理执行上下文件的栈称为执行上下文栈，又称调用栈。可以帮助了解 javascript 引擎的工作原理 更好的调试 javascript比如你在开发代码时，有时候可能会遇到栈溢出的错误，如下图所示：function runStack(n, resul

安装 vue 项目安装脚手架npm install -g @vue/cli创建项目vue create vue-demo安装步骤用例1：renders 组件// HelloWorld.vue<template> <div class="hello"> <h1>{{ msg }}</h1> </div></template><script>export d

介绍Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。官网

介绍Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。官网

其实要配置属于查模块专属命令并不复杂，只需在 package.json 里配置 bin 属性就可以了，下面我们通过一个列子来说明// package.json "bin": { "tracelib": "./bin/tracelib.js" },#!/usr/bin/env nodeconst fs = require('fs');const path = require('path');const package = require('../package.json');

webpack.dll.js'use strict'const path = require('path');const webpack = require('webpack');const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = { mode: 'production', entry: { vue: ['vue'], vueRouter: ['vue-rou

什么是 babel ? 在前端项目中他能做什么了？Babel 是一个工具链，主要用于在当前和旧的浏览器或环境中，将 ECMAScript 2015+ 代码转换为 JavaScript 向后兼容版本的代码。以下是 Babel 可以做的主要事情：转换语法 源代码转换(codemods)简而言之，在前端开发过程中，大家会用很多 es6 的新特性，比如箭头函数、class、解构、Promise、async / await等。这些新的特性，简洁的语法、强大的功能，就好比给前端程序员插上了一对自由自由翱翔翅

X6 图编辑引擎X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建 DAG 图、ER 图、流程图等应用。说明文档：https://x6.antv.vision/zh/docs/tutorial/about源码import React, { useEffect, useState } from 'react'import './index.scss'import { GithubOutlined, UserOutlin.

一、全局安装 vue-cli 脚手架，使用 vue init webpack-simple yyl-npm-practice 初始化项目初始化项目后 npm install ; npm run dev，项目就能跑起来了。下面我们来试着封装一个属于我们自己的公用组件 Button在 src 目录下新建一个 components 存放自定义组件// Button.vue<template> <button :class="classes" type="button" @cl

redux-saga是一个用于管理应用程序 Side Effect（副作用，例如异步获取数据，访问浏览器缓存等）的 library，它的目标是让副作用管理更容易，执行更高效，测试更简单，在处理故障时更容易。可以想像为，一个 saga 就像是应用程序中一个单独的线程，它独自负责处理副作用。redux-saga是一个 redux 中间件，意味着这个线程可以通过正常的 redux action 从主应用程序启动，暂停和取消，它能访问完整的 redux state，也可以 dispatch redux a...

动机随着 JavaScript 单页应用开发日趋复杂，JavaScript 需要管理比任何时候都要多的 state （状态）。 这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI 状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等。三大原则单一数据源整个应用的state被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个store中。State 是只读的唯一改变 state 的方法就...

一个前后端分离的项目，本地联调，跨域配置至关重要。传统设置浏览器跨域设置这里就不继续累赘了。网上很多教程都在 “package.json” 里边设置"proxy": { "/api": { "target": "http://localhost:3001" }}初接触的小伙伴，直接按这种方式都做了发现有问题，结果项目都起不来了。When specified, “proxy” in package. json must be a string.Instead, th

useMemo用来缓存数据，当组件内部某一部分渲染的数据（组件），需要通过计算而来，这个计算是依赖与特定的state、props数据，我们就用 useMemo 来缓存这个数据，以至于我们在修改她们没有依赖的数据源的情况下，多次调用这个计算函数，浪费计算资源。import React, { useState, useMemo } from 'react';function UserInfo(props) { const [ name, setName ] = useState('');

server 配置const Koa = require('koa');const Router = require('koa-router');const serve = require('koa-static');const path = require('path');const fs = require('fs');const backendApp = new Koa();const frontendApp = new Koa();const backendRoute...