vue-cli3引入第三方的js依赖包并使用其方法

最新推荐文章于 2024-05-13 16:15:43 发布
最新推荐文章于 2024-05-13 16:15:43 发布
阅读量3.5k 收藏 4
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/i_am_a_div/article/details/107794614
版权

注意：引入第三方的包有两种，一种是做特殊要求必须如何引用的；一种是没有要求的

情况1：js包要求了如何引入的，按照其文档的方式引入和使用即可

1.1直接在indes.html按照要求引入
在这里插入图片描述

1.2使用方法
在这里插入图片描述

情况2：没有声明如何引入的

2.1直接在index.html下

<script src="<%= BASE_URL %>某某某包.js"></script>

需要注意的是，如果用到js包里面的方法，则需要将其函数方法暴露出来

在这里插入图片描述

2.2在组件内使用初始化方法,注意引入方式；

在这里插入图片描述

可参考链接：
https://blog.csdn.net/weixin_34006468/article/details/88687199?utm_medium=distribute.pc_feed_404.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase&depth_1-utm_source=distribute.pc_feed_404.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecas

https://www.cnblogs.com/aidixie/p/10649725.html

i_am_a_div_日积月累_
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
VUE引入第三方js包及调用方法讲解
10-17
今天小编就为大家分享一篇关于VUE引入第三方js包及调用方法讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
vue-cli3使用 DllPlugin 实现预编译提升构建速度
10-17
这种方法尤其适用于大型项目，其中有许多第三方库或自定义组件。需要注意的是，当预编译的库有更新时，你需要重新运行 `npm run dll` 来生成新的 DLL 文件。 总之，Vue CLI 3 结合 DllPlugin 可以有效地减少打包...
如何在Vue3.0+TypeScript中引入JQuery等第三方静态JS文件
包子大叔的笔记
07-05 6461
如何在Vue3.0+TypeScript中引入JQuery等第三方静态JS文件 把Js放入Public目录, 并在Index.html中添加引用 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont
2024年前端最新Vue 中如何引入第三方 JS 库_vue3 第三方js，今年前端面试必问的这些技术面
最新发布
2401_84618790的博客
05-13 553
前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。
vue-cli3项目通过vue如何引入第三方js包完成登陆功能
i_am_a_div的博客
08-21 1703
注意：本次登陆，前后端分离；前端通过引入第三方的js包，调用js包里的初始化方法和提交方法完成登陆； 流程1.引入第三方包 1.1在index.html文件下引入 流程2.完成初始化 问题2.1因为初始化的时候，必须传递后端分配的state，用作验证。 当时做了几种传递state的方式，方式1：前端到了login页面后先请求借口获取state的值，然后传递给初始化的state，发现行不通（确实初始化赋值上去了分配的state，但是登陆失败，后端说不支持）； 流程3.拦截跳转： 最后采取方式2：前端在
vue cli3 引用外部js方法
adenfeng的专栏
04-17 1万+
vue引用webVideoCtrl.js 1、在vue.config.js中添加 chainWebpack: config => { config.resolve.alias .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components')) .set...
Vue 组件中如何引入外部的js文件 的10种方法
一步一个脚印，踏实努力，向着目标前进
08-30 1万+
原型链扩展，将外部的JavaScript文件扩展到Vue实例的原型链上，适用于多个组件都需要使用外部JavaScript文件的情况。这种方法可以将外部JavaScript文件的方法和属性混入到所有的Vue组件中，使得所有的组件都可以使用这些方法和属性。标签中使用插件的方式异步引入外部的JavaScript文件，适用于需要按需加载外部JavaScript文件的情况。方法，异步引入外部的JavaScript文件，适用于需要按需加载外部JavaScript文件的情况。语句的路径指定具体的文件位置。
Vue-Cli项目优化操作的实现
10-16
综上所述，Vue-Cli项目优化主要包括路由懒加载、预加载和优先加载、启用GZip压缩以及对第三方库的CDN处理。通过这些策略，可以有效地减小项目体积，提升首屏加载速度，从而提供更好的用户体验。在实际开发中，应根据...
vue -cli.docx
04-16
- `node_modules`：存储所有项目依赖的第三方模块。 - `src`：主要的源代码目录，包括组件、路由、样式等。 - `static`：放置静态资源，如图片、字体文件等。 - `.babelrc`：Babel的配置文件，用于JavaScript语法...
vue-cli3+ts+webpack实现多入口多出口功能
10-16
这将确保第三方库被打包成单独的 chunk，而共用模块则会被提取到 `chunk-common` 中。 **五、打包与运行** 完成以上配置后，我们可以通过以下命令进行打包和开发： ```bash # 开发环境 vue-cli-service serve # ...
Vue cli 引入第三方JS和CSS的常用方法分享
10-18
下面小编就为大家分享一篇Vue cli 引入第三方JS和CSS的常用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
深入理解基于vue-cli的webpack打包优化实践及探索
10-16
使用 `splitChunks` 配置，我们可以实现代码分割，将项目中依赖的大块代码拆分成独立的 chunk，如 Vendor chunk（第三方库）、ECharts chunk（特定模块）等。这样，首次加载时仅加载必要的核心代码，其他部分在需要...
Vue 中如何引入第三方 JS 库
FREEDOM
09-14 8287
我们以 jQuery 为例，来讲解 一、绝对路径直接引入，全局可用 主入口页面 index.html 中用script标签引入： <script src="./static/jquery-1.12.4.js"></script> 这样，其实就已经可以在项目中使用 jQuery 了。 mounted () { console.log($) } 我们来看一下 调试器 截图： 可以看到，我们是可以正常打印出 jQuery 的。 由于我的项目开启了 ...
vue中html引入使用＜%= BASE_URL %＞变量
Xiang_Gong_Ya_的博客
08-28 3547
首先使用src相对路径引入。
Vue 项目中引入本地第三方 JS 库
不怕麻烦的鹿丸的博客
03-15 3913
ESLint 语法检测会报错： ESLint 语法检测不会报错 ESLint 语法检测不会报错 ESLint 语法检测会报错： 项目开启了 ESLint 语法检测的话，会报一个 error ：
Vue 中如何引入第三方 JS 库(1)，干货满满
m0_59117112的博客
03-18 1073
其他知识点面试webpack的原理webpack的loader和plugin的区别？怎么使用webpack对项目进行优化?防抖、节流浏览器的缓存机制描述一下二叉树, 并说明二叉树的几种遍历方式?项目类问题技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。
Vue3如何引用全局JS文件
热门推荐
weixin_53200369的博客
03-29 2万+
文章目录前言一、如何引用全局JS文件 前言 Vue3相较于之前的版本有了不少变化，如引用全局Js文件 一、如何引用全局JS文件 1、先创建一个JS文件放在Common 目录下,随意写一些内容,文件命名为util.js(命名随意) //方法体 function show(){ console.log("我是测试js"); } //导出 export default{ show:show } 2、在main.js中引用，这里Vue3和之前的版本就有所不同 之前Vue版本的引用： //引入js文件 i
引入vue3依赖库三种的方式
麦小洛
01-18 2164
方式一远程cdn -方式 二 把远程的vue.global.min.js拷贝到本地方式 方式三npm安装vue.js引入电脑全局就不需要再使用文件引用了
vue-cli3引入ts
05-24
要在Vue-cli 3中使用TypeScript，需要先安装TypeScript和Vue的TypeScript声明文件。 1. 安装TypeScript和Vue TypeScript声明文件： ``` npm install typescript vue-class-component vue-property-decorator --save-dev npm install @types/node @types/webpack @types/vue @types/vue-router @types/vuex --save-dev ``` 2. 在项目根目录下创建一个`tsconfig.json`文件，用于配置TypeScript编译器的选项： ``` { "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "moduleResolution": "node", "experimentalDecorators": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "noImplicitReturns": true, "noImplicitThis": true, "noImplicitAny": false, "suppressImplicitAnyIndexErrors": true, "sourceMap": true, "baseUrl": ".", "paths": { "@/*": [ "src/*" ] } }, "include": [ "src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts", "tests/**/*.tsx" ], "exclude": [ "node_modules" ] } ``` 这里的配置项可以根据你的需求进行调整。 3. 修改项目的入口文件`main.js`，将其改为`main.ts`，并且使用`Vue.extend`来定义Vue组件： ``` import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') ``` 4. 在`src`目录下创建一个`shims-tsx.d.ts`文件，用于声明Vue组件的类型： ``` declare global { namespace JSX { // tslint:disable no-empty-interface interface Element extends Vue.VNode {} // tslint:disable no-empty-interface interface ElementClass extends Vue {} interface IntrinsicElements { [elem: string]: any; } } } ``` 5. 在`src`目录下创建一个`shims-vue.d.ts`文件，用于声明Vue组件的类型： ``` declare module '*.vue' { import Vue from 'vue'; export default Vue; } ``` 6. 修改`package.json`文件，将`main.js`改为`main.ts`： ``` { "name": "my-app", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "vue": "^2.6.10", "vue-router": "^3.0.3", "vuex": "^3.0.1" }, "devDependencies": { "@types/node": "^10.12.18", "@types/vue": "^2.0.8", "@types/vue-router": "^3.0.2", "@types/vuex": "^3.0.0", "typescript": "^3.3.3333", "vue-class-component": "^6.0.0", "vue-property-decorator": "^7.0.0", "vue-template-compiler": "^2.6.10" }, "main": "src/main.ts", "browserslist": [ "> 1%", "last 2 versions" ] } ``` 7. 运行`npm run serve`命令来启动开发服务器，开始使用TypeScript进行Vue开发。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值