1. electron-vite相关的问题汇总

https://github.com/alex8088/electron-vite
https://cn.electron-vite.org/

vite本地开发第三方库样式冲突解决方案

问题描述

在使用vite开发vue项目时，
同时使用了 elementui-plus和 element-plus-x,
然后 在开发环境 里面有一些 element-plus-x 的特殊样式会污染elementui-plus的原有样式。

Vite 是如何实现快速开发的？它的原理是什么？

Vite的快速开发体验是通过以下原理实现的：

使用原生ES模块化，无需预打包。
利用服务端渲染（SSR）将源代码转换为浏览器可识别的模块。
在开发模式下，按需编译和提供模块，实现快速的冷启动和热模块替换（HMR）。

Webpack 的四个核心概念是什么？

列举并简述 Webpack 的四大核心配置项。
概念 描述
entry 入口文件，指定 Webpack 开始构建的位置
output 输出路径与文件名配置
loader 处理非 JS 文件（如 CSS、图片、TypeScript）
plugin 扩展 Webpack 功能（如压缩、优化、注入变量）

Vue 3 面试题集

基础概念

1. Vue 3 相比 Vue 2 有哪些重大变化？

答案：

• 性能提升：Vue 3 重写了虚拟 DOM 实现，渲染性能提升约 1.3~2 倍，内存占用减少约 50%
• Composition API：新增组合式 API，提供更灵活的逻辑组织和复用方式
• TypeScript 支持：Vue 3 是用 TypeScript 重写的，提供了更好的类型推断
• Teleport 组件：允许将组件的内容传送到 DOM 的其他位置
• Fragments：组件可以有多个根节点
• Suspense：处理异步组件的新特性
• 响应式系统升级：使用 ES6 的 Proxy 代替 Object.defineProperty，解决了 Vue 2 中的数组和对象响应式问题
• 全局 API 改为应用实例调用：减少了全局污染
• 更好的 Tree-shaking 支持：减小打包体积

编写 Webpack 插件可以帮助你在 Webpack 构建过程中添加自定义行为。Webpack 插件是一个具有 apply 方法的 JavaScript 对象。这个 apply 方法会在 Webpack 编译器实例上被调用，并且你可以通过这个方法来访问 Webpack 的编译器对象，从而在特定的编译阶段插入自定义逻辑。 下面是一个简单的步骤指南和示例代码，帮助你编写一个基本的 Webpack 插件。
步骤指南
创建插件对象：创建一个 JavaScript 对象，并定义一个 apply 方法。
访问编译器对象：在 apply 方法中，通过参数访问 Webpack 编译器对象。
绑定钩子：使用编译器对象提供的钩子来绑定你的插件逻辑。
导出插件：将你的插件对象导出，以便在 Webpack 配置中使用。
示例代码
假设我们要编写一个简单的插件，在 Webpack 构建完成后输出一条消息到控制台。
创建插件文件 首先，创建一个文件 MyWebpackPlugin.js，内容如下：

目录结构

Vue 3的源码采用monorepo的方式组织，使用pnpm进行包管理，主要包含以下核心模块：

• reactivity: 响应式系统
• runtime-core: 与平台无关的运行时核心
• runtime-dom: 浏览器平台特定的运行时
• compiler-core: 与平台无关的编译器核心
• compiler-dom: 浏览器平台特定的编译器实现
• compiler-sfc: 单文件组件(.vue文件)编译器
• shared: 共享工具函数
• vue: 完整版本，包含运行时和编译器