欢迎来到皮皮网官网
1.Vue项目的码搭部署
2.vue-router源码学习 - install与<router-view>
3.Vue源码（一）—— new vue()
4.学习vue源码（9）手写代码生成器
5.跟着文章读一篇，人人都能了解Vue3 系列（一）（从0构建pnpm项目，建教 跑通内部渲染流程）
6.vue3源码学习--编译阶段汇总
Vue项目的程交部署
近期我完成了一个基于Vue的记账项目，下面我将分享我的码搭远程部署过程。
一、建教本地预览
源代码编写完成后，程交党建 源码首先将其上传至GitHub，码搭例如：git@github.com:Xin-hai/haiqing-1.git。建教这个仓库称为源代码仓库，程交其中dist目录默认不会上传。码搭根据Vue CLI部署指南，建教需要进行本地预览，程交确保yarn build打包后的码搭dist目录正确无误。在终端执行官方推荐的建教命令，启动HTTP服务器访问dist目录。程交
由于我使用yarn进行包管理，因此使用yarn命令进行安装。在新的预览地址中，我比较了文件，发现打包后的css和js文件体积比yarn serve得到未打包的体积更小。检查完dist目录打包无误后，可以关闭预览。
二、GitHub Pages手动推送更新
新建一个远程仓库地址用于存放dist目录的相关代码，这个仓库仅用于网页展示，如git@github.com:Xin-hai/haiqing-1-website.git。此仓库最好与源代码仓库名称相似，vpay 源码下载例如在后面加上-website。
在vue.config.js中设置正确的publicPath。找到vue.config.js并添加如下代码，将'/my-project/'修改为新建的仓库地址名'/haiqing-1-website/'。
在项目目录上创建deploy.sh并按照官方写入相关代码。我使用的是yarn，进行了一点小的修改。主要修改的是git push -f git@github.com:Xin-hai/haiqing-1-website.git master:gh-pages这句代码，其中的haiqing-1-website是前面新建的存放dist的仓库，也是用于网页展示的仓库。
在终端运行sh deploy.sh即可自动部署。代码会上传到haiqing-1-website仓库的gh-pages分支上，此分支会自动开启GitHub的pages功能，稍等片刻就能看到网页链接。注意，源代码仓库不会自动更新，需要自己git push相关代码。
三、码云部署
为了优化访问速度，我使用了码云gitee。同样，在码云上新建好仓库后，复制ssh地址，将deploy.sh中的git push -f git@github.com:/.github.io.git master修改为码云的。
在gitee的服务选项中查看Gitee pages功能。
------------------------------------------..补充
在经历一个星期的家校通app源码实名认证之后，我的码云终于可以使用Gitee page功能了。在推送时，除了修改deploy.sh为如下，还需要将vue.config.js中的仓库地址改为码云中的远程仓库地址如下。
注意，gitee需要手动更新，每次git push后需要手动更新才能看到效果。
最后，是我最近做的海青记账的GitHub源代码仓库和Gitee源代码仓库，欢迎大家体验和提出建议。
vue-router源码学习 - install与<router-view>
本文深入解析Vue-router的install过程和部分逻辑。首先，探讨Vue-router的注册机制，即Vue.use(VueRouter)时的执行关键代码。利用Vue.mixin功能，混入beforeCreate钩子，确保所有组件在初始化阶段定义好_router和_routerRoot。this.$options展示组件构造时传递的选项信息。根组件执行beforeCreate时，_routerRoot指向根组件，而非根组件的执行则不同。全局混入后，定义$router和$route变量，并注册两个组件。
接下来，聚焦渲染流程的旅行日记源码核心。主要负责渲染匹配到的路由组件。上篇中介绍的嵌套路由机制在匹配RouteRecord后，使用Route，其matched字段包含匹配的RouteRecord及其所有祖先RouteRecord。多个层级的页面中，每个router-view需知道自己的层级，通过源码内容实现。每个router-view标记自身，便于确定层级，在找到对应层级组件后进行渲染。
至此，渲染过程简化流程清晰呈现，但Vue-router的复杂性意味着仍有更多细节待探索。后续文章将继续深入，逐步解析更多功能。
Vue源码（一）—— new vue()
探究Vue源码的奥秘，始于Vue实例化过程。在src/core目录下的index.js文件，承载了Vue实例化的核心逻辑。初探此源码，面对未知，不妨大胆猜想，随后一一验证。
深入分析，我们发现一个简单粗暴的Vue Class定义，随后一系列init、开发手册 源码mixin方法用于初始化关键功能。通过代码，确认此入口确实导出一个Vue功能类。进一步探索，核心在于initGlobalAPI，它揭示Vue全局属性，包括官方说明的全局属性。详细代码部分因篇幅限制，仅展示关键代码段。
关注全局变量，如$isServer、$ssrContext，它们在ssr文档中有详细说明。这些变量与Head管理紧密相关，用于SSR环境下的特殊操作。至此，入口文件解析完成。
深入Vue class实现，我们揭示其内核，包括Vue的生命周期管理。此部分解析将揭示Vue实例如何运作，以及其生命周期各阶段的重要性。了解这些，有助于我们更深入地掌握Vue的使用与优化。
学习vue源码（9）手写代码生成器
深入学习 vue 源码的系列文章中，我们探讨了模板编译的解析器与优化器部分。在本文中，我们将聚焦于代码生成器的实现原理与操作流程，以实现从 AST（抽象语法树）到 render 函数代码字符串的转换。
代码生成器在模板编译流程中承担着至关重要的角色，其核心任务是将由解析器和优化器处理得到的 AST 转换为可执行的 render 函数代码字符串。这一过程主要通过调用一系列预定义的函数（如 _c、_v、_s）来构建动态代码片段，从而实现模板的动态渲染。
具体而言，代码生成器依据 AST 结构，递归地生成代码片段。对于一个简单的模板，代码生成器会调用 _c 来创建元素，_v 来创建文本节点，而 _s 则用于返回字符串值。这些函数的调用构建了 render 函数的核心逻辑，实现了模板的动态渲染。
解析器负责将模板字符串转换为 AST，例如将上述简单的模板转换为对应的 AST 结构。通过调用代码生成器，可以将 AST 转换为可执行的 render 函数代码字符串。生成后的代码字符串中包含了 _c、_v、_s 等函数调用，这些函数对应着动态创建元素、文本节点以及返回字符串值的操作。
理解代码生成器的关键在于，它如何根据 AST 结构构建渲染函数代码。这一过程涉及到对 AST 中元素、文本和属性的遍历与处理，通过调用特定的生成函数（如 genData 和 genChildren）来构建数据和子节点，最终生成完整的 render 函数代码字符串。
在实现细节中，代码生成器会针对 AST 中的不同节点类型，采用不同的处理逻辑。例如，对于没有属性的节点（el.plain 为 true），代码生成器无需执行数据生成逻辑（genData），而直接跳过该步骤。这种处理方式优化了代码生成效率，确保了渲染函数代码的简洁与高效。
综上所述，代码生成器在模板编译流程中起到了关键作用，通过将 AST 转换为可执行的 render 函数代码，实现了模板的动态渲染。这一过程涉及对 AST 的递归遍历、函数调用构建以及特定逻辑的实现，构成了 vue 模板编译的核心机制。深入理解代码生成器的实现原理有助于开发者更好地掌握 vue 模板编译的底层机制，为开发高质量、高效的应用打下坚实的基础。
跟着文章读一篇，人人都能了解Vue3 系列（一）（从0构建pnpm项目， 跑通内部渲染流程）
让我们开始构建一个简单的Vue3项目，从零开始，重点是pnpm管理和内部渲染流程的实现。首先，创建一个名为"simple-mini-vue3"的新项目，推荐使用pnpm作为依赖管理工具。
在项目结构中，创建一个pnpm-workspace.yaml文件，配置工作空间，确保所有源码存储在packages文件夹中，包间相互关联通过workspace协议。同时，添加.shamefully-hoist配置以避免不必要的幽灵依赖问题。详细解释见pnpm官方文档，这里不深入探讨。
在根目录下，新建packages和runtime-core文件夹，进入runtime-core并执行npm init初始化package.json。稍后会逐步解释package.json的配置。此时，项目基本骨架已搭建完成。
我们的目标是使项目运行起来，通过在HTML中引入编写好的JS或TS代码，在浏览器中直接查看效果。为此，我们将使用esbuild进行开发打包。在项目根目录下创建scripts文件夹，用于存放与项目构建相关的脚本，不包含在源码包中。
在scripts文件夹的dev.js中编写打包脚本，使用浏览器ESM原生支持，实现项目实时编译和预览。在package.json中添加开发运行脚本，以便一键执行打包任务。
通过以上步骤，你将成功搭建并运行一个基于pnpm的Vue3项目，可以直接在浏览器中查看源码编写的实时效果。每个配置和脚本的细节将逐一解析，让你更加深入地理解项目构建流程。
vue3源码学习--编译阶段汇总
从vue-loader开始，我们逐步探索vue/compiler-core包的源码，完成了编译阶段的解析（忽略了compiler-ssr部分）。 涉及的包包括：vue-loader：基于webpack的入口
vueLoaderPlugin：处理核心操作
@vue/compiler-sfc：处理script、template和style
compiler-dom：处理template，与compiler-core协同工作
compiler-core：处理template的核心部分
vue-loader首先安装vueLoaderPlugin，主要负责匹配资源并调用相应方法。script部分通过@vue/compiler-sfc的compileScript处理，其他如template和style则根据其类型调用相应处理函数。 编译流程中，script通过babel将JavaScript转换为AST节点，然后进行处理。template则通过compiler-dom和compiler-core转换为浏览器可识别的JavaScript代码。CSS变量和scopeId也是在这个阶段进行处理的。 在dev模式下，render function会被分离出来以支持热模块替换（HMR），而prod模式下，这些代码会被整合到setup函数中，以提高代码效率。 最后，总结整个编译阶段，对Vue源码有了深入理解，不再是神秘的魔法，而是清晰的流程。希望这些内容对您有所帮助，祝大家新春快乐！
