当前位置: 首页 > news >正文

vue构建版本

在这里插入图片描述

  • 完整版:同时包含编译器和运行时的版本。

  • 编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码。

  • 运行时runtime:用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

  • UMD:UMD 版本可以通过 script 标签直接用在浏览器中。

  • CommonJS(common、cjs):CommonJS 版本用来配合老的打包工具比如 Browserify 或 webpack 1。这些打包工具的默认文件(pkg.main) 是只包含运行时的 CommonJS 版本 (vue.runtime.common.js)。

  • ES Module(esm):从 2.6 开始 Vue 会提供两个 ES Modules (ESM) 构建文件:

    1.为打包工具提供的 ESM:为诸如 webpack 2 或 Rollup 提供的现代打包工具。ESM 格式被设计为可以被静态分析,所以打包工具可以利用这一点来进行“tree-shaking”并将用不到的代码排除出最终的包。为这些打包工具提供的默认文件 (pkg.module) 是只有运行时的 ES Module 构建 (vue.runtime.esm.js)。
    2.为浏览器提供的 ESM (2.6+):用于在现代浏览器中通过 <script type="module"> 直接导入。

  • bundler(这个版本没有打包所有的代码,只会打包使用的代码,需要配合打包工具来使用,会让Vue体积更小)

  • browser(版本都包含esm,浏览器的原生模块化方式,可以直接通过<script type="module" />的方式来导入模块)

  • prod和min都是生产版本,对代码进行了压缩

  • vue.esm.browser.js: 是 Vue.js 的一个构建版本,针对浏览器环境而设计。这个构建版本采用了 ES Module (ESM) 的格式,使得你可以在支持 ES Module 的环境中直接使用 import 语句来导入Vue.js,例如在现代的前端开发工具链中,比如 webpack、Rollup 等。

  • vue.common.js 是 Vue.js 的一个构建版本,它主要用于在 CommonJS 环境中使用,可以在 Node.js环境中使用 Vue.js 来构建服务端渲染的应用程序,或者在使用一些构建工具如 Browserify 的情况下,在浏览器中使用CommonJS 模块加载 Vue.js。

通过 template 选项提供的模板将会在运行时即时编译。这仅在使用了包含模板编译器的 Vue 构建版本的情况下支持。文件名中带有 runtime 的 Vue 构建版本未包含模板编译器。

vue.global.js:是包含编译器和运行时的“完整”构建版本,因此它支持动态编译模板。
vue.runtime.global.js:只包含运行时,并且需要在构建步骤期间预编译模板。
其中,如果需要在客户端上编译模板 (即:将字符串传递给template 选项,或者使用元素的DOM内HTML 作为模板挂载到元素),将需要编译器,因此需要完整的构建版本
当使用Webpack的vue-loader时,*.vue 文件中的模板会在构建时预编译为JavaScript,在最终的捆绑包中并不需要编译器,因此可以只使用运行时构建版本。所以,如果直接在浏览器打开Vue的页面,可以直接采用script引入完整版本,如果采用构建工具例如Webpack进行构建,则可以使用import引入运行时版本

相关文章:

vue构建版本

完整版&#xff1a;同时包含编译器和运行时的版本。 编译器&#xff1a;用来将模板字符串编译成为 JavaScript 渲染函数的代码。 运行时runtime&#xff1a;用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。 UMD&#xff1a;UMD 版本可以…...

Docker挂载镜像到本地(日常记录)

Docker挂载镜像到本地 1、进入jar包文件夹 cd docker-publish/2、编写DockFile文件 #使用Jdk8环境作为基础镜像&#xff0c;如果镜像不在本地则会从DockerHub进行下载 #FROM openjdk:8-jdk-alpine FROM openjdk:11 #VOLUME 指定了临时文件目录为/tmp。其效果是在主机 /var/l…...

【Elasticsearch查询】精确查询

文章目录 复合查询constant_score querybool querydis_max queryfunction_score queryboosting query单层嵌套双层嵌套 词项查询term query&#xff08;词项查询&#xff09;数字的精确查询文本的精确查询查询优化 terms query&#xff08;多词项查询&#xff09;terms_set que…...

小狐狸chat2.7.2免授权修复版可用版

小狐狸chat2.7.2免授权修复版可用版 在网络上面找了好几个版本不能使用&#xff0c;今天发布这个仔细测试正常使用 主要功能&#xff1a;独立版无限多开支持分销会员充值自己APP打包小程序万能创作MJ绘图多个国内接口 国外很火的ChatGPT&#xff0c;这是一种基于人工智能技术…...

通过QScrollArea寻找最后一个弹簧并且设置弹簧大小

项目原因&#xff0c;最近需要通过QScrollArea寻找其中最后一个弹簧并且设置大小和策略&#xff0c;因为无法直接调用UI指针&#xff0c;所以只能用代码寻找。 直接上代码&#xff1a; if (m_scrollArea){int iScrollWidth m_labelSelectedTitle->width();m_scrollArea-&g…...

為什麼使用海外動態代理IP進行網路爬蟲?

網路爬蟲作為獲取網路數據的重要工具&#xff0c;其重要性不言而喻。但隨著網站反爬策略的日益嚴格&#xff0c;爬蟲任務變得愈發困難&#xff0c;不過海外動態代理IP可以很好地解決這一問題。本文將詳細闡釋動態代理IP在爬蟲中的應用&#xff0c;以及如何使用動態代理IP提升爬…...

LeetCode 热题100 刷题笔记

一&#xff1a;哈希表 一般哈希表都是用来快速判断一个元素是否出现集合里。 直白来讲其实数组就是一张哈希表&#xff0c;哈希表中关键码就是数组的索引下标&#xff0c;然后通过下标直接访问数组中的元素。 1.两数之和 题目链接&#xff1a;. - 力扣&#xff08;LeetCode…...

veridata安装

GoldenGate Veridata是GoldenGate中用于比较数据库间数据同步效果的一个对比软件。Veridata基于Web&#xff0c;支持大据量的数据对比&#xff0c;能够在不停止数据同步的情况下就可以比较数据。 1、安装veridata前我们都会先安装 middleware infrastructure 这时我们会添加几个…...

面试笔记系列三之spring基础知识点整理及常见面试题

目录 如何实现一个IOC容器? 说说你对Spring 的理解&#xff1f; 你觉得Spring的核心是什么&#xff1f; 说一下使用spring的优势&#xff1f; Spring是如何简化开发的&#xff1f; IOC 运行时序 prepareRefresh() 初始化上下文环境 obtainFreshBeanFactory() 创建并…...

面试笔记系列四之SpringBoot+SpringCloud+计算机网络基础知识点整理及常见面试题

目录 Spring Boot 什么是 Spring Boot&#xff1f; Spring Boot 有哪些优点&#xff1f; SpringBootApplication注解 Spring Boot 的启动流程 Spring Boot属性加载顺序 springboot自动配置原理是什么&#xff1f;&#xff08;*&#xff09; 如何理解springboot中的start…...

Kernel[Device Tree] - 1. 设备树的由来

内核代码中&#xff0c;arch文件夹下&#xff0c;是各个架构相关的代码&#xff0c;arm也在里面。 arm子文件夹下&#xff0c;有mach-xxx的目录&#xff0c;就是针对各个芯片类型的&#xff0c;比如mach-imx就是imx系列的芯片。 再里面就是具体的芯片或SOC&#xff0c;比如ma…...

第十四天-网络爬虫基础

目录 1.什么是爬虫 2.网络协议 OSI七层参考模型 TCP/IP模型 1.应用层 2.传输层 3.网络层 3.HTTP协议 1.介绍 2.http版本&#xff1a; 3.请求格式 4.请求方法 5.HTTP响应 状态码&#xff1a; 6.http如何连接 4.Python requests模块 1.安装 2.使用get/post 3.响…...

Linux系统安装

Linux系统安装 安装包链接 链接&#xff1a;https://pan.baidu.com/s/1FdP7TH90UvKUQuiL2yeGCA 提取码&#xff1a;c49n安装包内容 虚拟机执行文件 详细安装教程 虚拟机密钥 Ubuntu 安装步骤 先点击虚拟机的.EXE文件安装&#xff0c;打开安装教程&#xff0c;有详细的说明。...

springboot-基础-thymeleaf配置+YAML语法

备份笔记。所有代码都是2019年测试通过的&#xff0c;如有问题请自行搜索解决&#xff01; 目录 配置thymeleafthymeleaf举例参数设置yaml基础知识YAML语法报错&#xff1a;Expecting a Mapping node but got 其他语法 spring boot不推荐使用jsp。thymeleaf是一个XML/XHTML/HTM…...

深入理解分库、分表、分库分表

前言 分库分表&#xff0c;是企业里面比较常见的针对高并发、数据量大的场景下的一种技术优化方案&#xff0c;所谓"分库分表"&#xff0c;根本就不是一件事儿&#xff0c;而是三件事儿&#xff0c;他们要解决的问题也都不一样&#xff0c;这三个事儿分别是"只…...

Oracle中序列

1. Sequence 定义 在Oracle中可以用SEQUENCE生成自增字段。Sequence序列是Oracle中用于生成数字序列的对象&#xff0c;可以创建一个唯一的数字作为主键。 2. 为什么要用 Sequence 你可能有疑问为什么要使用序列&#xff1f; 不能使用一个存储主键的表并每次递增吗&#xf…...

蓝牙耳机和笔记本电脑配对连接上了,播放设备里没有显示蓝牙耳机这个设备,选不了输出设备

环境&#xff1a; WIN10 杂牌蓝牙耳机6s 问题描述&#xff1a; 蓝牙耳机和笔记本电脑配对连接上了&#xff0c;播放设备里没有显示蓝牙耳机这个设备&#xff0c;选不了输出设备 解决方案&#xff1a; 1.打开设备和打印机&#xff0c;找到这个设备 2.选中这个设备&#…...

Cadence Allegro PCB设计88问解析(三十四) 之 Allegro 中 DDR等长处理

一个学习信号完整性仿真的layout工程师 在进行PCB设计时 &#xff0c;会遇到一些单端的信号要做等长处理&#xff0c;比如DDR的数据线&#xff0c;交换机之间的数据线之类的。这时需要我们建立match group&#xff0c;来做等长。下面简单介绍在Allegro中怎么做等长&#xff1a;…...

向爬虫而生---Redis 探究篇2<redis集群(1)>

前言: 经常会遇到这样的事,redis运行一段时间以后,就会出现迟钝和卡壳! 这时候,说明已经到了瓶颈期了,需要用到redis集群了! 那么,弄明白集群的几个概念是必要的,我用案例来讲,,, 正文: 当需要处理大量数据或提供高可用性和性能时&#xff0c;Redis集群是一种常见的解决方案。…...

[云原生] 二进制安装K8S(上)搭建单机matser、etcd集群和node节点

一、单机matser预部署设计 目前Kubernetes最新版本是v1.25&#xff0c;但大部分公司一般不会使用最新版本。 目前公司使用比较多的&#xff1a;老版本是v1.15&#xff0c;因为v1.16改变了很多API接口版本&#xff0c;国内目前使用比较多的是v1.18、v1.20。 组件部署&#xff…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

STM32---外部32.768K晶振(LSE)无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...

tauri项目,如何在rust端读取电脑环境变量

如果想在前端通过调用来获取环境变量的值&#xff0c;可以通过标准的依赖&#xff1a; std::env::var(name).ok() 想在前端通过调用来获取&#xff0c;可以写一个command函数&#xff1a; #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...