vue cli3.0 在html中集成本地的第三方插件

最新推荐文章于 2024-02-04 11:20:03 发布
最新推荐文章于 2024-02-04 11:20:03 发布
阅读量2k 收藏 3
点赞数 2
分类专栏： vue javasript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38267287/article/details/88790041
版权

首先在3.0之后的版本中，没有了static这个静态文件，而多了一个public文件夹，其中html就在此文件中。

废话不说了，直接进入正题，在public文件夹中新建static文件夹，然后放置你的第三方文件，然后在html文件中的head中放置你需要的第三方插件 具体路径如下

src="<%= BASE_URL %>./static/*.js"

如果需要引入css 原理一样     <%= BASE_URL %>./....

此时你的vue项目就可以用你的第三方插件了

 

找回逝去的
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue在html页面中引用插件的顺序,直接拿来用！Vue.js 第三方经常使用插件盘点 | CSDN 博文精选...
weixin_42521450的博客
06-04 399
做者 |张猛javascript责编 | 伍杏玲html出品 | CSDN 博客vue【CSDN 编者按】做者介绍几个Vue.js经常使用的插件和用法，简单实用，你能够直接拿来用！java Vue.js DevToolsnode用于开发调试Vue.js的一个必备插件。能够在Chrome中的扩展程序中直接安装，也能够本地文件的方式安装。webpack vue-lazyload 图片懒加载gi...
在HTML中使用vue、自定义组件、组件传值、第三方组件库
前端小菜鸡的博客
04-27 5063
1、在HTML中使用vue <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
静态HTML引入vue封装组件
java coder https://github.com/pmsyn/ https://gitee.com/pmsyn
02-01 864
静态HTML引入vue封装组件实现组件复用统一管理
Vue2嵌入HTML页面空白、互相传参、延迟加载等问题解决方案
朝花夕拾的博客
08-10 4144
html页面同样也要根据传递过来不同的参数 去调整自己的逻辑，首先知道html是如何接收到vue传来的消息的，window监听message即可接收postMessage发送来的消息。通过window.parent['vue里面绑定的名称']（需要传递的参数） 可以定义一个对象来传参 这种方法就可以调用到vue里面的方法啦！html页面接收时是通过message统一接收的，针对发送多个消息的情况下， 我们这里做下区分，将html页面通过iframe的方式嵌入进来之后，发现页面是空白的，不显示任何元素，
Vue中嵌入原生HTML页面的方法
最新发布
weixin_59525879的博客
02-04 2760
创建一个单文件组件（.vue文件）并将原生HTML代码嵌入其中。在你的Vue项目中，创建一个新的.vue文件，例如。这样，当你运行你的Vue应用时，你就可以在你的页面上看到嵌入的原生HTML代码。在该文件中，使用template标签来包裹你的原生HTML代码。
vue cli 3.0 使用全过程解析
08-27
同时，本文还会对每个步骤进行详细的解释，以帮助读者更好地理解 Vue CLI 3.0 的使用。 一、安装 Vue CLI ---------------- 要使用 Vue CLI，首先需要安装它。可以使用 npm 安装 Vue CLI v3.0，命令如下： `npm ...
vue cli 3.0通用打包配置代码,不分一二级目录
10-14
这实际上等同于在原始的 Webpack 配置中设置 `output.path`，但 Vue CLI 3.0 把这个过程简化了，使得开发者可以更容易地进行调整。 对于某些特殊需求，如果 Vue CLI 3.0 提供的配置选项不能满足，我们还可以使用 `...
vue-cli3.0配置及使用注意事项详解
01-21
这次给大家带来vue-cli3.0配置详解，使用vue-cli3.0配置的注意事项有哪些，下面就是实战案例，一起来看一下。 新建项目 # 安装 npm install -g @vue/cli # 新建项目 vue create my-project # 项目启动 npm run ...
使用 Vue cli 3.0 构建自定义组件库的方法
10-17
Vue CLI 3.0 是一个强大的工具，用于快速搭建基于 Vue.js 的项目。它提供了开箱即用的脚手架，简化了项目的初始化和构建流程。这篇文章将介绍如何使用 Vue CLI 3.0 构建自定义的组件库，帮助开发者创建自己的 UI 库...
Vue基础-文本显示，v-html插入html代码
cxu123321的博客
10-21 2511
Vue基础-文本显示，v-html插入html代码 1. 显示内容 {{}} <div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app', //el是选择元素的挂载节点，这里#是加父节点id data: { //赋值 message: 'Hello Vue.js!' } }) </scr...
基于Vue + Webpack简单聊天室
06-06
基于Vue + Webpack构建的简单chat示例，聊天记录保存在localStorge。简单演示了Vue的基础特性和webpack配置。
VUE3（二十六）基于wangeditor自定义富文本插件
camellia的博客
04-21 4885
项目中需要使用到wangeditor，这里封装一个自定义组件，便于后期使用。 首先，官方文档： https://www.wangeditor.com/ 1：安装 npm i wangeditor --save 2：组件代码 Wangeditor.vue <template> <div ref='editor' ></div> <!-- <button @click='syncHTML'>同步内容</button> &
vue-cli3配置多页面入口
hellojoy的博客
05-19 4287
https://www.cnblogs.com/fqh123/p/11981646.html 假如要单独将登陆页面当成一个项目入口文件： 第一步：创建一个登陆页面的文件 　　在项目public文件夹下创建一个login.html，其实就是将index.html复制一份，将title改一下： 　　 第二步：在src文件夹下创建一个login文件夹，分别创建login.main.js、login.router.js、login.vue三个文件 　　 ...
vue引入第三方html,vue.js如何引入第三方模块？
weixin_36379084的博客
06-18 1319
vue.js如何引入第三方模块？下面本篇文章给大家介绍一下Vue中正确引入第三方模块的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。vue.js如何引入第三方模块？方法一：配置 webpack ProvidePlugin 全局引入假设要使用到 jquery，那么可以通过配置 webpack 的 ProvidePlugin 的插件来全局引入：https://webpack.j...
使用 vue-3-socket.io 插件以及node.js实现实时聊天（3）
weixin_52872413的博客
11-02 1068
这一章将为你讲述一些在服务器（以宝塔面板举例）上配置node项目和一些细节，让你在生产环境也能正常使用聊天功能。
使用 vue-3-socket.io 插件以及node.js实现实时聊天（1）
weixin_52872413的博客
10-29 2754
这篇文章使用选项式API的写法，以实现群聊和私聊为主。
怎样引用html页面插件,浅析html webpack plugin插件的使用教程
weixin_34530164的博客
06-03 201
使用html-webpack-plugin插件来启动页面 可将html页面放入内存 以提升页面的加载速度并且还能自动设置index.html页面中JS文件引入的路径使用前提：项目中安装了Webpack使用步骤：步骤一、在项目的根目录下输入cnpm i html-webpack-plugin -D 将html-webpack-plugin插件安装到开发依赖其作用是根据指定的模板页面在内存中生成相应的...
开发vue插件
nunumaymax的博客
09-08 3418
vue 项目开发过程中，经常用到插件，比如原生插件 vue-router、vuex，还有 element-ui 提供的 notify、message 等等。这些插件让我们的开发变得更简单高效。那么 vue 插件是怎么开发的呢？vue 插件的本质；Vue.extend() 全局方法；如何手动挂载 Vue 实例；Vue.use() 的原理；如何打包成 umd 格式；什么是 Vue插件？它和 Vue组件 有什么区别？“插件通常用来为 Vue 添加全局功能。”“组件。
VUE3 插件的开发和使用
m0_49515138的博客
02-07 5516
传统的 Webpack 可以用来构建 npm 包文件，但按照目前更主流的技术选项，编译结果更干净更迷的当属 Rollup ，但 Rollup 需要配置很多插件功能，这对于刚接触包开发的开发者来说学习成本比较高，而 Vite 的出现则解决了这个难题，因为 Vite 的底层是基于 Rollup 来完成构建，上层则简化了很多配置上的问题，因此接下来将使用 Vite 来带领开发者入门 npm 包的开发。的新声明 (.d.ts) 文件 ts(7016)
卸载vuecli3_vue-cli3.0升级失败，vue-cli卸载不掉，万能解决办法
06-06
您可以尝试以下步骤来卸载vuecli3或vue-cli： 1. 打开命令行工具，并使用管理员权限运行它。 2. 输入以下命令来检查您已经安装的vue-cli版本： ``` vue --version ``` 3. 如果您已经安装了vue-cli 3.x版本，您...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值