莫循的AI编程博客

1、创建nuxt3项目2、填写项目名称这里我直接填了nuxt-app3、选择包管理器这里的包管理器我们选择pnpm4、选择是否创建git仓库选择完包管理器后，脚手架会自动下载依赖，git仓库我已经创建好了，这里我选择否，键盘直接输入n就能选择否5、选择需要添加的模块看自己项目情况选择添加的模块，按空格勾选/不勾选，按上下键选择模块6、打开项目目录选择完模块后，nuxt脚手架会自动下载对应依赖，等待下载完成后我们就可以进入项目目录启动项目了。

UnoCSS是一个高度可定制的、原子化CSS引擎，可以轻松集成到Nuxt3项目中。下面介绍如何在Nuxt3中安装和配置UnoCSS。

在 Vue3 的响应式宇宙中，`ref` 就像是一个神奇的包装盒，它能把普通的 JavaScript 值变成具有超能力的响应式数据。想象一下，你有一个数字变量，当它改变时，视图能自动更新——这就是 `ref` 的魔法所在。

嗨，大家好，我是莫循，今天给大家分析一下Vue中渲染函数的使用和原理。避免被面试官拷打（手动滑稽）

Vue3的一个重大更新点就是支持Composition API，而且也被业界称为hooks，那么Vue3的“Hooks”与React的Hooks有这么区别呢？

我们从一个基础的拖拽需求出发，逐步构建了一个功能丰富、考虑周全的 Vue 3 自定义指令。这个过程不仅涵盖了 DOM 操作、事件处理、坐标计算，还涉及到了性能优化、架构设计（如 `provide/inject`）以及工程化的实践。掌握了这些原理和技巧，你不仅能实现复杂的拖拽交互，更能将其思路应用到其他需要精细化 DOM 控制的场景中，比如可缩放元素、自定义滑块等等。Vue 的指令系统提供了一个强大的抽象层，让我们能够封装行为，创造出更具表现力和用户体验的界面。

全局注册指令通过app.directive()方法在整个应用可用，而局部注册仅在组件作用域内有效，两种方式在SSR渲染、Tree-shaking优化等方面有显著差异。TypeScript类型注解确保指令参数的类型校验，组合式API封装使指令具备响应式能力，同时支持逻辑复用和内存管理，符合现代前端工程化标准。权限控制指令通过Vuex/Pinia状态管理实现动态DOM操作，拖拽指令采用事件委托和坐标变换技术，同时处理PC端和移动端事件。如何在Vue3中实现更复杂的拖拽指令功能？基于架构考量的技术选型指南。

利用实用工具类型（Utility Types）从现有类型派生新类型条件类型与映射类型${string${${string?: never;模块化组织类型，避免全局污染。深度应用泛型与工具类型，提升代码复用率。严格类型检查配置，确保项目安全性。自动化类型生成，减少手动维护成本。统一团队规范，保障协作一致性。

在大型项目中，通过分层管理、模块化设计和类型安全，可以高效组织和管理 Vue 3 Hooks。将 Hooks 分为核心层、领域层、UI 层和共享层；使用 TypeScript 确保类型安全；通过工具和规范提升代码质量。

【代码】MySQL 基础使用指南-MySQL登录与远程登录。

MySQL是一个关系型数据库管理系统，由瑞典MySQL AB公司开发，MySQL AB公司被Sun公司收购，Sun公司又被Oracle公司收购，目前属于Oracle公司。MySQL是目前最流行的关系型数据库管理系统，在WEB应用方面MySQL是最好的RDBMS应用软件之一。国内淘宝网站就使用的是MySQL集群。MySQL特点。

组合式API（Composition API）是Vue3的核心特性，它通过逻辑功能聚合和高复用性解决了复杂组件的代码组织问题。功能聚合：将同一功能的响应式数据、计算属性、方法等集中管理逻辑复用：通过自定义Hook实现跨组件逻辑复用类型支持：完美支持TypeScript类型推断渐进式：可与选项式API混合使用return {count,double,increment,reset// 组件使用</script>

0 基础速成 AI 编程指南。

在跨端开发日益成为主流的今天，如何高效构建规范、可维护的企业级应用？本文以UniApp+Vue3+* *TypeScript**为核心技术栈，手把手带你从零搭建高标准的跨平台项目。通过本文，你将系统掌握：无论你是初探UniApp生态，还是希望升级现有项目的工程化水平，本文都将提供从环境搭建到生产部署的全链路指南，助你打造高性能、高规范、跨端兼容的现代Web应用。代码即规范，开箱即用，开启高效开发之旅！Gitee开源地址： https://gitee.com/moxunjinmu/uniapp-vue3-te

在跨端开发日益成为主流的今天，如何高效构建规范、可维护的企业级应用？本文以UniApp+Vue3+* *TypeScript**为核心技术栈，手把手带你从零搭建高标准的跨平台项目。通过本文，你将系统掌握：无论你是初探UniApp生态，还是希望升级现有项目的工程化水平，本文都将提供从环境搭建到生产部署的全链路指南，助你打造高性能、高规范、跨端兼容的现代Web应用。代码即规范，开箱即用，开启高效开发之旅！Gitee开源地址： https://gitee.com/moxunjinmu/uniapp-vue3-te

nvm（Node Version Manager）是一个用于管理Node.js版本的命令行工具。通过nvm，你可以在同一台机器上安装和切换多个Node.js版本，非常适合开发和测试在不同Node.js版本上运行的应用程序。

设计HTTP缓存策略就像调配一道复杂的菜肴，需要平衡多种因素：性能与时效性、带宽节约与内容更新、用户体验与服务器负载。没有放之四海而皆准的配方，只有适合特定场景的最佳实践。作为架构师，我们的任务不是追求完美的缓存策略，而是在各种约束条件下找到最佳平衡点。就像一位优秀的指挥家，知道何时该让哪些乐器发声，何时该保持沉默，从而奏出最和谐的乐章。缓存设计不是一次性工作，而是需要随着应用的发展而不断调整和优化的持续过程。通过监控、分析和迭代，我们可以不断完善缓存策略，为用户提供更快、更流畅的网络体验。

本文详解 Vue3 国际化开发全流程：从安装 vue-i18n@next 到配置多语言文件（JSON/YAML），结合 i18n-Ally 插件实现高效翻译管理。

在 SCSS（Sass 的一种语法）中，`@mixin` 指令用于定义可以在整个样式表中重复使用的样式代码块。这里的 `@mixin test($block)` 定义了一个名为 `test` 的 mixin，接受一个参数 `$block`。...定义了一个接受单个参数的 mixin。使用$namespace和$block构造了一个类选择器。@content指令用于在mixin调用时包含样式内容。全局配置变量可省去每次定义命名空间。

sass使用技巧与问题解决方案

Sass即将对嵌套规则后的声明规范做出调整，以更好地匹配CSS规范。这意味着在Sass的新版本中，如果在嵌套规则后放置声明，其声明规范将有所变化。

在 SCSS (Sass 的一个语法) 中，lighten()函数用于调整颜色的亮度。然而，随着 Sass 语言的不断发展，一些旧函数被标记为弃用，以鼓励使用更现代、更灵活的 API。lighten()函数就是其中之一。

在 Sass 中，@import 和 @use 都用于模块化代码，但二者有显著区别。以下是主要差异和具体案例说明：

这里我踩了一个坑找半天的问题，原因是sass升级到1.85之后 定义变量前加上 - 就是表示变量私有，即使使用@use导出。今天创建vue3项目，迁移老项目代码，使用sass的时候发现@import语法已经废弃，官方推荐使用@use替换。这里去掉test前的-，就可以正常访问变量。在新的scss文件里也是访问不到的。

在打开的开发者界面后浏览器页面上显示了devtools的调试窗口，找了半天怎么关闭，最后发现是因为创建的时候自动安装了 devtools的插件，不需要的可以删除此插件或者隐藏。今天创建了一个新的vue3项目使用 npm create vue@latest 创建方式。

vue3获取子组件真实dom元素和子组件属性方法。

Target version not match, you can specify the target version in vueCompilerOptions.target in tsconfig.json / jsconfig.json. (expected "target": 2.7)

Vue3-生命周期vue2与vue3生命周期对比在setup组合式api中使用生命周期同时在配置项和setup中使用生命周期的调用顺序vue2与vue3生命周期对比左边是vue3右边是vue2，对比两图我们发现vue创建方式由new Vue()， 更改为 Vue.createApp(oprions).mount(el)。在vue3中先将配置项传入，一切准备就绪后再开始创建实例。生命周期 beforeDestroy改为 beforeUnmount生命周期 destroyed改为 unmounte

vue3学习Vue3-vite与cli方式创建项目Vue3-Watch监听使用Vue3-Watch监听RefImpl对象的说明Vue3-WatchEffect

vue3Watch监听RefImpl对象的说明watch监听RefImpl对象watch监听RefImpl对象<script>import { ref, reactive, watch } from "vue";export default { name: "Demo", setup() { // 数据 let sum = ref(0); let msg = ref("你好啊"); let person = ref({ name: "张

Vue3-WatchEffectwatchEffect函数的使用watchEffect函数的使用watchEffect函数自动监听回调函数里使用到的 响应式对象不用指明监听的对象，回调使用到哪个对象就监听哪个对象与watch监听对比既要指明监视的属性，也要指明回调函数与computed计算属性对比computed注重结果，也就是返回值watchEffect注重逻辑，也就是回调执行的过程(报销流程，axios请求等)<template> <

VUE3的watch监听使用watch介绍watch监听的不同情况1 监听单个refimpl数据2 监听多个refimpl数据3 监听proxy数据4 监听proxy数据的某个属性5 监听proxy数据的某些属性总结watch介绍vue中watch用来监听数据的响应式变化.获取数据变化前后的值watch的完整入参watch(监听的数据，副作用函数，配置对象)watch(data, (newData, oldData) => {}, {immediate: true, deep: true})

vue3创建项目一 vite方式创建1.1 vite创建命令1.2 填写项目名称1.3 选择架构框架1.4 选择vue版本1.5 项目结构1.6 修改vite配置文件二 cli方式创建vue3项目2.1 cli创建命令2.2 选择模板多节点报错问题解决方案一 vite方式创建1.1 vite创建命令npm init vite@latest# 或者yarn create vite1.2 填写项目名称1.3 选择架构框架1.4 选择vue版本这里我选择了ts版本选择完后就开始创建vu

第一章：权衡的艺术1.1 命令式和声明式1.2 性能与可维护的权衡1.3 虚拟DOM的性能到底如何采用原生innerHTML属性创建页面。采用虚拟DOM方式创建页面innerHTML与虚拟DOM方式更新页面对比1.4 运行时和编译时纯运行时：只有在运行程序时才有效。运行时+编译时：运行程序时才开始编译代码。编译时：编译完代码才能运行程序。选择分析1.1 命令式和声明式命令式：关注过程：代码描述的“做事的过程”。声明式：关注结果：代码描述的是“做事的结果”。例如：实现以下内容获取id为app的di