.vue 组件打包成 .js

news2024/12/23 20:18:53

.vue 组件打包成 .js

*** 所有的内容 cli 官网都有 ***
*** https://cli.vuejs.org/zh/guide/build-targets.html ***

所有的内容 cli 官网都有:
https://cli.vuejs.org/zh/guide/build-targets.html

  1. 准备 几个 .vue 组件文件
import Main from './components/Main.vue'
import Home from './views/Home.vue'
import About from './views/About.vue'
import _Vue from 'vue'

[Main,Home,About].map(item=>{
  item.install = Vue => {
    if (!Vue) {
      window.Vue = Vue = _Vue
    }
    Vue.component(item.name, item)
  }
})
export {
  Main,Home,About
}


  1. vue.config.js 中新增: css: { extract: false }
    提取出来的 CSS 文件 (可以通过在 vue.config.js 中设置 css: { extract: false } 强制内联)
  2. package.json 中新增 命令
"lib": "vue-cli-service build --target lib --inline-vue --name myLib src/index.js"
  1. npm run lib 打包后dist里面有demo ,可用于参考
  2. 使用 index.html 入口文件中 引入 myLib.umd.min.js
  3. 组件中
    在这里插入图片描述
  4. 如果 vue.config.js 中新增了属性
  configureWebpack: config => {
    return {
      output: {
        libraryExport: 'default' // 默认为 undefined,将会导出整个(命名空间)对象
      },
    }
  },

那么 index.js 文件就要改写为:

import Main from './components/Main.vue'
import Home from './views/Home.vue'
import About from './views/About.vue'
import _Vue from 'vue'

[Main,Home,About].map(item=>{
  item.install = Vue => {
    if (!Vue) {
      window.Vue = Vue = _Vue
    }
    Vue.component(item.name, item)
  }
})
export default { // 这里有修改
  Main,Home,About
}

使用方法不变
9. 如果不想生成 source map 文件,可以在 vue.config.js 中新增

module.exports = {
  configureWebpack: config => {
    return {
      output: {
        libraryExport: 'default' // 默认为 undefined,将会导出整个(命名空间)对象
      },
      devtool: 'none' // (none)(省略 devtool 选项) - 不生成 source map。webpack官网查询
    }
  },
  css: { extract: false },
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/404402.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MySQL InnoDB存储引擎锁与事务实现原理解析(未完成)

InnoDB MySQL存储引擎是基于表的,也就是说每张表可以选择不同的存储引擎。 InnoDB存储引擎的表是索引组织的,也就是数据即索引。 存储引擎文件 InnoDB引擎会包含RedoLog重做日志文件和TableSpace表空间文件。 表空间文件 默认表空间文件&#xff08…

Win32 ListBox控件

Win32 ListBox控件 创建ListBox控件 创建窗口函数 HWND CrateWindowEx(DWORD dwExStyle , // 窗口的扩展风格,基本没用LPCTSTR lpClassName, // 已经注册的窗口类名称LPCTSTR lpWindowName, // 窗口标题栏的名字DWORD dwStyle, // 窗口的基本风格int x, // 左上角水平坐标int …

HashMap ConcurrentHashMap介绍

目录 HashMap 数据结构 重要成员变量 Jdk7-扩容死锁分析 单线程扩容 多线程扩容 Jdk8-扩容 ConcurrentHashMap 数据结构 并发安全控制 源码原理分析 重要成员变量 协助扩容helpTransfer 扩容transfer 总结 CopyOnWrite机制 源码原理 HashMap 数据结构 数组…

【题解】百度2020校招Web前端工程师笔试卷(第一批):单选题、多选题

题目来源 若有错误请指正! 单选 1 分页存储管理将进程的逻辑地址空间分成若干个页,并为各页加以编号,从0开始,若某一计算机主存按字节编址,逻辑地址和物理地址都是32位,页表项大小为4字节,若…

01.Java的安装

1.JDK&JREJDK : Java SE Development Kit--Java开发工具JRE : Java Runtime Environment--Java运行环境Java编程,需要安装JDK;如果仅仅是运行一款Java程序则只需要运行JREJava的安装包分为两类:一类是JRE--是一个独立的Java运行环境; 一类…

卷积神经网络中的padding理解

前言 在进行卷积神经网络中,经常用到padding,padding在卷积神经网络中起到什么样的作用呢,又是如何发挥作用的呢?本文就此谈下自己看法。 代码中的显示 model.add(Conv2D(filters 32,kernel_size [3,3],strides [1,1],padd…

基于SpringCloud的微服务架构学习笔记(2)注册中心Eureka和负载均衡Ribbon

1. 7 Eureka注册中心 1.7.1 远程调用的问题 地址信息获取:服务消费者如何获取服务提供者的地址信息(不能每次都写死): URL:http://localhost:8081/user/"order.getUserId()多选一:如果有多个服务提供…

HBase存储结构、基本架构和shell操作

文章目录一、HBase简介1.1、HBase定义1.2、HBase的存储结构1.3、HBase基本架构二、HBase Shell操作2.1、基本操作2.2、namespace2.3、DDL2.4、DML一、HBase简介 1.1、HBase定义 HBase是一个开源的分布式NoSQL数据库,它是Apache Hadoop项目的一部分,使用…

代码随想录算法训练营 day56 | 动态规划 647. 回文子串 516.最长回文子序列

day56647 回文子串1.确定dp数组(dp table)以及下标的含义2.确定递推公式3,dp数组如何初始化4.确定遍历顺序5.举例推导dp数组516 最长回文子序列1.确定dp数组(dp table)以及下标的含义2.确定递推公式3.dp数组如何初始化…

【H2实践】之 SpringBoot 整合

目标 本文紧接上篇【H2实践】之认识 H2,上篇简单介绍了 H2 及其使用,本文继上篇,探索 H2 与 SpringBoot 的整合。 主要实现目标: 1、SpringBoot 连接 H2 内存数据库,并对数据库进行管理。 2、访问 H2 Console 客户端…

Pytest 自动化测试框架

Pytest和Unittest测试框架的区别? 如何区分这两者,很简单unittest作为官方的测试框架,在测试方面更加基础,并且可以再次基础上进行二次开发,同时在用法上格式会更加复杂;而pytest框架作为第三方框架&#x…

52癫痫发作预测的有效双自注意力残差网络

Effective dual self-attentional residual networks for epileptic seizure prediction 摘要 癫痫发作预测作为慢性脑疾病中最具挑战性的数据分析任务之一,引起了众多研究者的广泛关注。癫痫发作预测,可以在许多方面大大提高患者的生活质量&#xff0…

springboot项目配置序列化,反序列化器

介绍本文介绍在项目中时间类型、枚举类型的序列化和反序列化自定义的处理类,也可以使用注解。建议枚举都实现一个统一的接口,方便处理。我这定义了一个Dict接口。枚举类型注解处理这种方式比较灵活,可以让枚举按照自己的方式序列化&#xff0…

三种通用方法——惠普电脑硬盘数据恢复

随着当今数字时代的到来,人们对于计算机硬盘上存储的数据越来越重视。然而,电脑硬盘也时常会发生数据丢失的情况,这时候就需要进行数据恢复。惠普电脑是市面上比较常见的品牌之一,因此本文将从惠普电脑硬盘数据恢复的角度出发&…

【你不知道的事】JavaScript 中用一种更先进的方式进行深拷贝:structuredClone

你是否知道,JavaScript中有一种原生的方法来做对象的深拷贝? 本文我们要介绍的是 structuredClone 函数,它是内置在 JavaScript 运行时中的: const calendarEvent {title: "Builder.io Conf",date: new Date(123),attendees: ["Steve…

EXCEL技能点3-常用技能1

1 引用格式 公式中引用单元格或者区域时,引用的类型可分为以下三种: 绝对引用 相对引用 混合引用 在Excel里,每个单元格都有一个编码,就像人的身份证一样,在Excel里是按照行列进行编码,例如A1就是第一列的第一行。 那么我们想要引…

QEMU启动x86-Linux内核

目录QEMU简介linux启动流程我的环境安装QEMU软件包安装源码安装编译linux内核编译busybox制作initramfs使用QEMU启动linux内核简化命令参考QEMU简介 QEMU(quick emulator)是一个通用的、开源的硬件模拟器,可以模拟不同硬件架构(如…

Docker入门 第四部分

Docker 的优势 Docker 相比于传统虚拟化方式具有更多的优势: Docker 启动快速属于秒级别。虚拟机通常需要几分钟去启动。 Docker 需要的资源更少。Docker 在操作系统级别进行虚拟化,Docker 容器和内核交互,几乎没有性能损耗,性能…

Windows安装Hadoop

当初搭建Hadoop、Hive、HBase、Flink等这些没有截图写文,今为分享特重装。下载Hadoop下载地址:https://mirrors.tuna.tsinghua.edu.cn/apache/hadoop/以管理员身份运行cmd切换到所在目录执行start winrar x -y hadoop-3.3.4.tar.gz,解压。配置…

刚刚和ChatGPT聊了聊隐私计算

开放隐私计算ChatGPT最近太火了,作为一个背后有庞大数据支撑,而且还在不断进化的人工智能,每个人都想和它聊一聊。我们也不例外,于是刚刚和它聊了聊隐私计算那些事儿。先来几个行业问题,毕竟它背后有所有行业新闻、论文…