03 2025 档案
摘要：生成 JavaScript AST 我们要对整个模板的 AST 进行转换，转换为 JS AST。 我们目前的代码已经有了遍历模板 AST，并且针对不同的节点，做不同操作的能力。 我们首先需要知道 JS AST 长什么样子： function render(){ return null; } 上面的代
阅读全文
摘要：转换器 主要的目的是将模板的 AST 转换为 JS 的 AST，整个模板的编译过程如下： // Vue 的模板编译器 function compile(template) { // 1. 得到模板的 AST const ast = parse(template); // 2. 将模板 AST 转为
阅读全文
摘要：模板编译整体流程 首先我们看一下什么是编译？ 所谓编译（Compile），指的是将语言 A 翻译成语言 B，语言 A 就被称之为源码（source code），语言 B 就被称之为目标代码（target code），这个事情谁来做？编译器来做。编译器你也不用想得那么神秘，就是一段程序而已。 完整的编
阅读全文
摘要：pnpm + workspace 前置知识 思考🤔：什么是工作空间？ 答案：工作空间可以看作是一个共享的区域，所有用于工作的资源都可以从这个区域获取到。 生活中工作空间 在这个工作空间中，通常会包含与工作相关的所有工具和资源，比如办公桌、电脑、文具和文件柜等。这个工作空间是一个集中完成特定任务的地
阅读全文
摘要：Yarn Yarn 这个包管理器是在 2016 的时候由 Facebook、Google、Exponent 以及 Tilde 团队共同开发推出的。 当时 Yarn 的出现主要是为了解决 npm 在速度、安全性以及一致性方面的一些问题： 安装速度 确定性： 项目A > 直接依赖： libraryX（1
阅读全文
摘要：在企业应用开发中，很多时候我们要发布的包是私有的，npm上面倒是支持发布私有包，但是需要付费账号，因此更好的选择就是搭建私有服务器。 能够保证代码的私密性 因为是在局域网内部，因此下载速度更快 可以将发布的包做一些权限上设置，利于维护 Verdaccio Verdaccio 是企业开发中非常流行的用
阅读全文
摘要：要发布自己的包到 npm 上面，大致分为如下的步骤： 准备账号 配置 package.json 打包发布 准备账号 首先去 npm 官网注册一个账号：https://www.npmjs.com/ 注意在注册账号的时候，把邮箱也一并设置了，方便之后接收验证码。 账号注册完毕后，就可以在控制台通过 np
阅读全文
摘要：所谓包的说明文件，也就是 package.json，当我们使用 npm init 去初始化一个项目的时候，就会自动的生成一个package.json 文件。 关于 package.json，官网是有详细的配置项说明的：https://docs.npmjs.com/cli/v9/configuring
阅读全文
摘要：平时用的最多的指令可能就 3 个： npm init -y npm install xxx（npm i xxx） npm uninstall xxx（npm rm xxx） 所有的指令实际上可以在 npm 官网上面看到的：https://docs.npmjs.com/cli/v9/commands
阅读全文
摘要：自定义插件 在 PostCSS 官网，实际上已经介绍了如何去编写一个自定义插件：https://postcss.org/docs/writing-a-postcss-plugin 需要有一个模板 module.exports = (opts = {}) => { // Plugin creator
阅读全文
摘要：postcss-cli和配置文件 postcss-cli 配置文件 postcss-cli cli 是一组单词的缩写（command line interface），为你提供了一组在命令行中可以操作的命令来进行处理。 postcss-cli 通过给我们提供一些命令行的命令来简化 postcss 的使
阅读全文
摘要：If you work with SSR, you have probably seen a warning like this. This happens when the server-side rendered HTML and the client-side rendered HTML fr
阅读全文
摘要：Lazy hydration has been implemented as part of the Vue’s Async Component API. So before we get to lazy hydration, let’s take a quick look at async com
阅读全文
摘要：A template ref is a ref that connects to an element and allows you to manipulate the underlying HTML element using the DOM API. This is generally not
阅读全文
摘要：Code 📁 /src/App.vue <script setup lang="ts"> import { ref } from 'vue' const text = ref('') </script> <template> <ChildComponent v-model="text" /> <p
阅读全文
摘要：v-bind is a commonly used feature in Vue.js. It can be used to bind a reactive value to an attribute or the content of an element. <script setup lang=
阅读全文
摘要：Vue 3.3 brings an upgraded experience for using TypeScript with compiler macros such as: defineProps defineEmits defineSlots First, defineProps in its
阅读全文
摘要：In Vue 3.3, you can create generic components. Generic is an important feature in many statically typed languages, including TypeScript. It’s basicall
阅读全文
摘要：defineOptions Previously, if you were using script setup, and you wanted to define some options such as name or inheritAttrs for your component, you w
阅读全文
摘要：<style> v-bind is a new feature in Vue 3.2 that might remind you of v-bind:style, which is a classic Vue.js technique for binding some reactive value
阅读全文
摘要：Reactive props destructure is the highlight feature of Vue 3.5. It allows you to destructure props while maintaining their reactivity: const { foo } =
阅读全文
摘要：4.0更新说明 https://tailwindcss.com/blog/tailwindcss-v4 简化安装 v3安装步骤：https://v3.tailwindcss.com/docs/guides/vite#vue v4安装步骤：https://tailwindcss.com/docs/in
阅读全文
摘要：在 Tailwindcss 里面包含了大量的原子类，但是在实际开发中，我们并不是说所有的原子类都会用到，因此在最终构建 css 的时候我们应该将没有使用到的原子类进行删除操作，从而优化我们的构建产物。 tree shaking 这里在 tailwindcss 里面要进行 tree shaking 操
阅读全文
摘要：在 tailwindcss 里面，要开启夜间模式，非常非常简单，只需要使用 dark: 变体即可，dark: 后面跟上原子类，表示夜间模式下面需要应用的原子类。 例如： <body class="bg-gray-100 dark:bg-gray-900"></body> 在上面的代码中，如果是白天模
阅读全文
摘要：## 响应式断点 *Tailwind CSS* 默认提供了一组预设的断点，即屏幕尺寸范围，用于管理响应式样式。默认的断点包括： - *sm*: *640px* 及以上- *md*: *768px* 及以上- *lg*: *1024px* 及以上- *xl*: *1280px* 及以上- *2xl*:
阅读全文
摘要：在前面的学习中，我们发现很多时候一些标签所应用的原子类是一样的。例如： <div class="float-left text-center flex items-center bg-blue-100 block"></div> <div class="float-left text-center
阅读全文
摘要：TailwindCSS中是允许我们自定义插件和组件的。需要注意一下两者之间的区别，插件一般指的是实现某一个具体的功能，组件一般是指封装了一段公共的代码。 自定义插件 要创建一个自定义插件，非常的简单，只需要在 tailwindcss 的配置文件中配置 plugins 配置项，该配置项对应的是一个数组
阅读全文
摘要：自定义主题 在开始本小节的实战之前，我们先来介绍一下 Tailwind CSS 中如何自定义主题。 在 Tailwind CSS 中，虽然提供了大量预设样式，但有时您可能需要自定义样式以满足特定需求。Tailwind 提供了多种方法来自定义样式，包括扩展现有配置、添加新配置、编写自定义 CSS 和创
阅读全文
摘要：<template> <div> <input type="text" v-bind="$attrs" /> </div> </template> <script setup lang="ts" > // by default when you pass props to the component
阅读全文
摘要：export function singleton< T extends new (...args: any[]) => object >(classCtor: T): T { let instance!: InstanceType<T> const proxy = new Proxy(classC
阅读全文
摘要：The example case covers room numbers validation: it must start with an uppercase letter followed by three digits. z.custom allows the creation of a br
阅读全文
摘要：Instead of creating many small schemas, which can complicate maintenance, Zod allows for the extraction of specific parts of a schema using the concep
阅读全文
摘要：The Vendor Wrapper Pattern is about isolating a third-party (vendor) library behind your own abstraction. Instead of scattering vendor-specific API ca
阅读全文
摘要：optimization optimization这个配置项内部的很多优化策略都是在生产环境默认开启的，启用这些规则从一定程序上来讲可以显著减少 bundle 体积，优化代码生成，帮助长期缓存等。 optimization.minimize optimization.minimize指定 webpa
阅读全文
摘要：代码准备 由于需要演示webpack的一些优化处理，因此代码提前做了一些处理， 引入了vue-router路由，创建了几个view页面 引入了element-plus，axios，echarts，vue-echarts，@vueuse等组件丰富页面展示 引入了unplugin-vue-compone
阅读全文
摘要：esbuild自定义插件 插件开发其实就是基于原有的体系结构中进行扩展和自定义。 Esbuild 插件也不例外，通过 Esbuild 插件我们可以扩展 Esbuild 原有的路径解析、模块加载等方面的能力，并在 Esbuild 的构建过程中执行一系列自定义的逻辑。 esbuild 插件是一个带有na
阅读全文
浙公网安备 33010602011771号