这里选取我们开发中常见的几个版本进行说明。
(.runtime)和(.pro)表示可选项,分别指特定的运行时版本和生产版本。
这里就清楚了为什么webpack对vue代码打包时,查看运行的控制台会出现下面一段警告信息:
// 默认引入的是 vue.runtime.esm-bundler.js 版本 import { createApp } from 'vue'; // 修改为 vue.esm-bundler 版本 import { createApp } from 'vue/dist/vue.esm-bundler';
对应着 runtime+compiler 和 runtime-only。
在Vue的开发过程中我们有三种方式来编写DOM元素:
三种方式的模板如何处理:
而方式一和方式三的template都需要有 特定的代码 来对其进行解析:
因此Vue在选择版本的时候分为 运行时+编译器 vs 仅运行时
运行时+编译器 包含了对template模板的编译代码,更加完整,但是也更大一些;
仅运行时 没有包含对template版本的编译代码,相对更小一些。
针对以上警告,参阅https://github.com/vuejs/core/blob/main/packages/vue/README.md
贴出对于webpack构建工具的配置示例:
SFC:single-file components (单文件组件)
plugin1:Vetur——从Vue2开发就一直在使用的,支持Vue的插件。
plugin2:Volar——官方推荐的插件(后续会基于Volar开发官方的VSCode插件)。