vue3+vite开发组件库如何通过script标签引入

最新推荐文章于 2024-06-28 09:32:18 发布
最新推荐文章于 2024-06-28 09:32:18 发布
阅读量817 收藏
点赞数
文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yysshhyy/article/details/129835759
版权

可参考这个链接
不同的是，这个只能通过import引入，并不能通过script标签引入打包后的js文件

因为vue3与vue2的不同导致vue2与vue3注册全局组件的方式不同，vue3只能通过这种方式定义一个全局的方法，并在需要使用的工程中，调用这个方法，将vue对象传递过来，上面的图片是组件库的图片，下面的图片是工程中引入这个组件库，相当于注册了全局组件

 

 

yysshhyy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2.（vue3.x+vite）组件注册并调用
地图之家
09-22 828
2.（vue3.x+vite）组件注册并调用
npm【一】---vue3+vite+ts 发布、更新自定义组件到npm仓库
weixin_43966973的博客
04-26 223
本示例使用npm7+ 版本。
vue3中的各种引入及其使用
七月❤的博客
02-01 4177
【代码】vue3中的各种引入及其使用。
vite 自动导入
loading.....
04-04 3903
在使用 vue3 组合式API 编写页面时，需要手动引入很多 vue 、vue-router … 等方法 例如： import { onMounted, reactive, ref, toRef } from 'vue'; import { useRoute, useRouter } from 'vue-router' 可以使用 unplugin-auto-import 插件通过在 vite 中配置来告别手动导入 安装 yarn add unplugin-auto-import 配置 // vite.c
vue3+ts+vite项目中使用spreadjs，通过script标签引入spreadjs可以提高打包速度
最新发布
徐同保的专栏
06-28 437
vue3+ts+vite项目中使用spreadjs，通过script标签引入spreadjs可以提高打包速度
vue3学习笔记（1）script引入vue3实现简单应用
gtd54789的博客
04-23 4321
目录一、脚本引入简单使用二、双向绑定的基本表现 一、脚本引入简单使用 script引入 <!-- vue3脚本地址为:https://unpkg.com/vue@3.2.31/dist/vue.global.js --> <script src="https://unpkg.com/vue@3.2.31/dist/vue.global.js"></script> 简单使用实现数据渲染 <body> <!-- 添加html结构 -->
Rollup 打包 Vue3 组件
m0_37602317的博客
12-06 4545
Rollup 打包 Vue3 组件库 安装 Rollup npm install --global rollup 安装 @vue-cli npm install -g @vue/cli 初始化一个 vue3 项目 vue create my-components-lib 在 src/components/ 创建一个测试组件 // MyComponent/index.ts import { App } from 'vue' import MyComponent from './MyComponent.v
vue3中一些组件的使用方法
lc257的博客
06-08 1150
vue3一些组件的使用方法，和配置转发
vue3+vite+ts封装svg组件
Zhang_wang_yun的博客
07-21 570
在开发项目的时候经常会用到svg矢量图,而且我们使用SVG以后，页面上加载的不再是图片资源。这对页面性能来说是个很大的提升，而且我们SVG文件比img要小的很多，放在项目中几乎不占用资源。
vue+vite开发谷歌插件
04-29
在本文中，我们将深入探讨如何使用Vue.js和Vite框架来开发谷歌浏览器插件。Vue.js是一个流行的前端JavaScript框架，以其轻量级、易用性和灵活性而受到开发者喜爱。Vite，由Vue.js作者尤雨溪创建，是一个现代化的前端...
9.（vue3.x+vite）组件间通信方式之EventBus
GIS之家家长
09-18 155
9.（vue3.x+vite）组件间通信方式之EventBus
vite排除外部依赖，使用script标签引入
少油少盐不要辣
07-13 1303
【代码】vite排除外部依赖，使用script标签引入。
vue3组件里面引入了外部文件和接口怎么办，打包并没有将外部文件和接口打包进去...
weixin_35754676的博客
01-03 351
如果你在 Vue 组件中引入了外部文件或者接口，并且在打包之后发现没有将这些内容打包进去，那么可能是你的打包配置有问题。 对于 Vue 组件中引入的外部文件，如果你使用的是 Webpack 打包工具，可以在 Webpack 的配置文件中使用 file-loader 来解决这个问题。首先，你需要安装 file-loader： npminstall --save-dev file-loader ...
vue3和vue3.2的的script的写法
06-03 417
定义的变量要return出去才能用。
vue3将一个全局脚本添加在index.html中，在vue3页面中直接使用
油墨香^-^的博客
05-31 199
在大型应用中，建议使用模块系统（ES6 modules，CommonJS）管理你的代码。举个例子： 下面是一段随机生成二级域名的代码,先随机取出一个主域名，然后再根据主域名随机生成4个二级域名，存储在浏览器缓存中，并且设置过期时间。但是问题是，每次我们修改这个配置的时候，都要重新编译一遍项目。中的全局脚本和 Vue 组件文件的模块作用域是隔离的。文件中，并在 Vue 页面中使用，你需要将该脚本写入。标签内，同时，将结果放在全局对象上，例如。然后，在 Vue 组件中，你可以通过。
index页面通过＜script＞引入根目录下的js文件后，vite打包项目后，项目中无js文件解决方法
qq_51196135的博客
07-28 2096
打包无法打入根目录下的js文件，解决代码！
vue3 Vite + typescript 使用别名引入文件
黄彪博客
06-09 530
工程中解析vue文件有两部分，一个是typescript 解析文件，一个是vite打包会去找文件。
vue3 + vite 环境变量配置
agua001的博客
01-29 4296
1、设置开发环境启动命令使用的环境变量 “dev”: “vite --mode development”, 在package.json文件中： { "name": "test", "version": "0.0.0", "scripts": { "dev": "vite --mode development", "build": "vite build", "preview": "vite preview" }, "dependencies": { "a
vue3+vite+js动态设置meta标签
04-22
在Vue3中使用vite构建工具，你可以通过以下步骤动态设置meta标签： 1. 安装vue-meta插件： 通过npm安装vue-meta插件，可以方便地管理Vue的meta信息。 ``` npm i vue-meta ``` 2. 在Vue3的main.js文件中引入插件：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值