皮皮网

1.systemjs+compiler-sfc 实现浏览器端渲染 .vue 文件
2.使用Vue.js开发Chrome浏览器插件：从零到一
3.[Vue源码系列-5]vue3初始化流程原理
4.Vue3核心源码解析 (一) ： 源码目录结构

systemjs+compiler-sfc 实现浏览器端渲染 .vue 文件

       本文旨在介绍如何使用 systemjs + compiler-sfc 实现在浏览器端渲染 .vue 文件的浏览器解决方案，解决在不引入构建工具的源码页源情况下迁移传统多页面应用至 Vue3 的难题。

       在接手新公司后台管理项目前端开发时，取网由于项目早期使用了 jQuery + Bootstrap 构建的浏览器多页面应用，与 Vue3 的源码页源组件化与双向数据绑定功能存在不匹配之处，因而萌生了将项目迁移到 Vue3 的取网假飞机源码想法。目标包括逐步实现新页面的浏览器 Vue3 开发，兼容旧系统发布流程，源码页源最终将整个系统切换至 Vue3 并引入 Vite 支持新特性和 ESLint。取网

       迁移过程中，浏览器面临的源码页源主要挑战是如何在不引入打包构建工具的情况下，实现 .vue 文件在浏览器端的取网解析与执行。通过分析 Vite 源码，浏览器苹果分屏器源码发现 systemjs 可以解决引入 .vue 文件和识别 esm 中的源码页源 import 和 export 的问题。systemjs 作为一个可扩展的取网基于标准模块加载器，能够将 esm 模块转换为 System.register 格式，以在不支持原生模块的旧浏览器中运行。

       具体实现步骤包括：直接通过 esm 引入 .vue 文件，测试加载 .vue 文件，并通过 systemjs 实现 esm 的导入导出识别。接着，使用 @vue/compiler-sfc 进行 .vue 文件的解析，将 template、script、style 分别拆分、简单jsp项目源码编译，生成 esm 格式的脚本文件。此过程需注意转换后的 style 需要特殊处理，通常直接生成 CSSStyleSheet 对象并插入文档，但正确的做法应是在组件构建完成后生效。

       为了支持 esm 并处理内部的 .vue 文件导入，引入 systemjs-babel 作为转换工具。需注意 systemjs-vue-0.0.1.js 脚本应先于 systemjs-babel.js 脚本引入，确保 .vue 文件先被解析为 esm 格式。

       最终，通过此方案成功实现了浏览器端渲染 .vue 文件的目标，解决了传统多页面应用向 Vue3 迁移过程中的chrome怎么替换源码核心挑战，为后续的项目升级打下了坚实的基础。

使用Vue.js开发Chrome浏览器插件：从零到一

       使用Vue.js开发Chrome浏览器插件：从零到一

       在本篇博客，我们将探讨如何使用Vue.js框架构建Chrome浏览器插件。

       **步骤1：准备工作

**

       确保已安装Node.js和Vue CLI。通过终端运行以下命令安装Vue CLI：

       bash

       npm install -g @vue/cli

       **步骤2：创建Vue.js项目

**

       使用Vue CLI创建新项目，终端执行命令：

       bash

       vue create chrome-extension-vue-example

       手动配置，勾选`Babel`和`Linter / Formatter`选项。

       **步骤3：构建配置

**

       在`vue.config.js`中添加Webpack配置，使用`CopyWebpackPlugin`将`manifest.json`和`public`文件夹内容复制到打包目录。

       **项目结构

**

       

       **构建后结构

**

       

       **package.json

**

       js

       { ...}

       **步骤4：清单文件

**

       创建`manifest.json`，定义插件基本信息，如名称、丫丫陕西麻将源码版本和图标等。

       **步骤5：创建弹出页面

**

       编写`popup.html`和Vue组件`App.vue`，实现插件的弹出页面。

       **步骤6：构建content-script

**

       在`content-script.js`中使用Vue渲染页面，注入到浏览器页面。

       **步骤7：构建和加载插件

**

       执行命令构建插件，将构建文件加载到Chrome浏览器。

       项目源码： github.com/ordersheet/c...

       这篇博客介绍了从零开始使用Vue.js开发Chrome浏览器插件的完整流程，希望对您有所帮助，祝您开发愉快！

[Vue源码系列-5]vue3初始化流程原理

       在Vue3的模块结构中，runtime-dom模块专门负责解决浏览器运行时的DOM操作，提供了丰富的DOM属性和节点操作接口。

       patchProp功能针对不同属性提供特定的patch操作，确保对DOM元素属性的修改在浏览器中的表现准确无误。

       runtime-dom的modules文件夹下包含各种patch的实现原理，这些patch操作负责处理不同场景下DOM元素的更新。

       在nodeOps模块中，所有与节点相关的操作方法得到妥善存储，为后续DOM操作提供了便捷的入口。

       runtimeDom模块中声明了createApp函数，用户通过调用此函数，即可启动Vue3应用的渲染流程。

       同时，runtime-core作为与平台无关的通用代码，主要负责定义API和核心逻辑，其下包含renderer.ts和apiCreateApp.ts等关键文件，这些文件承载着Vue3渲染器的核心功能和应用创建的逻辑。

Vue3核心源码解析 (一) ： 源码目录结构

       通过软件框架源码阅读，深入理解框架运行机制，API设计、原理及流程成为开发者进阶的关键。Vue 3源码相较于Vue 2版本的改进明显，采用Monorepo目录结构，引入TypeScript作为开发语言，新增特性和优化显著。

       启动Vue3源码，最新版本为V3.3.0-alpha.5。下载后进入core文件夹，使用Yarn进行构建。安装依赖后，执行npm run dev启动调试模式，可直观查看完整的源代码目录结构。

       核心模块包括compiler-core、compiler-dom、runtime-core、runtime-dom。compiler模块在编译阶段负责将.vue文件转译成浏览器可识别的.js文件，runtime模块则负责程序运行时的处理。reactivity目录内是响应式机制的源码，遵循Monorepo规范，每个子模块独立编译打包，通过require引入。

       构建Vue 3版本可使用命令，构建结果保存在core\packages\vue\dist目录下。选择性构建可通过命令实现，具体参数配置在core/rollup.config.js中查看。对于客户端编译模板，需构建完整版本，而使用Webpack的vue-loader时，.vue文件中的模板在构建时预编译，无需额外编译器。浏览器直接打开页面时采用完整版本，构建工具如Webpack引入运行时版本。Vue的构建脚本源码位于core/scripts下。