@vue/编译-sfc

编译 Vue 单一文件组件的较低级别工具

注:截至3.2.13+,本套件作为主依赖物列入 vue 软件包,可以作为 vue/compiler-sfc。这意味着你不再需要明确安装此软件包并确保其版本与 vue''s. 只要用主线 vue/compiler-sfc 输入深度.

此软件包包含更低级的公用设备, 如果您正在为一个将 Vue 单一文件组件( SFCs) 编译成 JavaScript 的捆绑器或模块系统写入插件 / 转换, 您可以使用这些工具 。 它用于 装入器 财务报告和审定财务报表 @vitejs/ plugin-vue 页面存档备份,存于互联网档案馆。 。 。 .

API 密码

在将Vue SFCs纳入建设系统时,出于各种考虑,API是有意的低水平的:

• 脚本、模板和样式分别使用热模块替换( HMR)

  • 模板更新不应重设组件状态
  • 样式更新应在不重交组件的情况下进行

• 利用工具的插件系统进行预处理处理. 譬如说. <style lang="scss"> 应当由相应的网包加载器处理.

• 在某些情况下,SFC中每个区块的变压器不具有相同的执行上下文. 例如,当使用时 thread-loader 或其他平行配置,模板子装入器在 vue-loader 可能无法使用完整的SFC及其描述符.

一般的想法是生成一个外观模块来导入组件的单个块. 诀窍是模块以不同的查询字符串自导自出,使构建系统能够作为"虚拟"模块处理每个请求:

                                  +--------------------+
                                  |                    |
                                  |  script transform  |
                           +----->+                    |
                           |      +--------------------+
                           |
+--------------------+     |      +--------------------+
|                    |     |      |                    |
|  facade transform  +----------->+ template transform |
|                    |     |      |                    |
+--------------------+     |      +--------------------+
                           |
                           |      +--------------------+
                           +----->+                    |
                                  |  style transform   |
                                  |                    |
                                  +--------------------+

外观模块是这样的:

// main script
import script from '/project/foo.vue?vue&type=script'
// template compiled to render function
import { render } from '/project/foo.vue?vue&type=template&id=xxxxxx'
// css
import '/project/foo.vue?vue&type=style&index=0&id=xxxxxx'

// attach render function to script
script.render = render

// attach additional metadata
// some of these should be dev only
script.__file = 'example.vue'
script.__scopeId = 'xxxxxx'

// additional tooling-specific HMR handling code
// using __VUE_HMR_API__ global

export default script

高级别工作流程

1. 在外观变换中,用 parse API并基于描述符生成上述外观模块代码;

2. 在脚本转换中,使用 compileScript 用于处理脚本。 此处理功能如 <script setup> 和CSS可变注射. 或者,可以在外观模块中直接做到这一点(代码内嵌而不是导入),但需要重写 export default 到临时变量(a) rewriteDefault 为此提供了便利 API),因此可以附加到导出对象上.

3. 在模板转换中,使用 compileTemplate 以将原始模板编译成函数代码.

4. 在样式转换中,使用 compileStyle 来编译要处理的原始 CSS <style scoped>, (中文(简体) ), <style module> 和CSS可变注射.

这些API所需的选项可以通过查询字符串传递.

对于详细的API参考和选项,请检查来源类型定义. 关于这些API的实际使用,请检查 @vitejs/ plugin-vue 页面存档备份,存于互联网档案馆 或者说 装入器。 。 。 .