vue编译为js的研究
# 前言
首先，思考下：
当我们在使用vue编写代码的时候，浏览器是如何识别的呢？进而联想到编辑器是如何识别的呢？更甚者我能可以思考其他各种类型的文件，平台是怎么识别的呢？
这些都是非常有趣的事情，其也必定存在着一种特定的内在运行逻辑，由此展开，发散思维，进一步了解编译原理相关的知识，对于我们探究这些问题都是极有帮助的。
本篇内容就先聚焦简单的一个点开始说起~
# 背景
我先说下项目背景：这是一个基于vue2开发的系统，目前有个报告管理模块，每条详情信息都包含各种列表、图表等，现在需要支持每条报告都支持下载导出为 html格式的一个文件，该html打开后的效果应该是和详情进去是一致的。
OK，问题来了，你打算如何实现？
- 只依靠前端实现
- 只依靠后端
- 前端提供
html+js形式的模板给后端同学，由后端在后台使用Chrome内核渲染完成（后端注入数据）
1和2留给大家思考，我们公司按照以往经历采用的是方案3，本文先基于方案3进行探究。
抛开其他问题不谈，思考如何快速的把vue文件转换为 html与js，并且可以在浏览器中正常渲染（手写html+js不在讨论范围😀）。
# 技术调研
Webpack+loader的方式：毕竟我们项目就是使用Webpack把vue编译成html、js的，可行性是有的@vue/component-compiler库：官方库，把vue编译为CommonJS（现在替换为了@vue/compiler-sfc），不过，并不影响我们进行编译研究
基本思路应该就是这样，我们主要需要的数据的也是3个部分：template、script、style
在分离出这3部分内容之后，就是后面的组合引用了，以及对于代码中涉及到的异步请求部分要如何处理。
# SSG是也~
其实按照后端同学的思路，我提供的模板应该是从上到下按顺序执行的，所有的数据会在最开始由后端注入到我们约定的变量对象上，前端的所有渲染应该以这里的数据为主。
- 客户端渲染 BSR (
Broswer Side Render)：只在浏览器上执行，通过Vue 和 React 构建的单页面应用SPA 都是采用这种方式渲染 - 静态页面生成 SSG (
Static Site Generation)：动态内容静态化，构建时渲染为html，针对博客这种，每位用户访问的相同页面内容都是一致的，Vuepress、Nextjs等 - 服务端渲染 SSR (
Server Side Render)：请求之后，获取数据执行渲染，后端返回给前端的是注入数据之后的 html 字符串，返回给前端在浏览器完成渲染，可根据不同用户返回不同内容
我再一想，这不是和SSR、SSG很像吗，顺着这个思路有没有合适的方案呢
# vue-loader 是什么
# @vue/component-compiler 工作原理
# 资料
上次更新: 2024/04/15, 14:35:14
