vue 引入普通js

最新推荐文章于 2025-07-28 16:22:23 发布

原创最新推荐文章于 2025-07-28 16:22:23 发布 · 6.6k 阅读

1 ·

CC 4.0 BY-SA版权

随记专栏收录该内容

100 篇文章

订阅专栏

地址：https://www.jb51.net/article/150517.htm

在mounted里面动态的添加：

mounted(){
    const s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = 'http://cstaticdun.126.net/load.min.js';
    document.body.appendChild(s);
},

但是js必须放在static文件下，不然会报错

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

YingMuMonkey

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue引入js

qq_33304139的博客

08-27

699

1.引入自己定义的 js 如下存在这样一个两个方法的js文件下面这个js文件分为两部分，主要为方法部分，和导出部分即export部分，只有这样才能被其他vue组件所调用 1.1 js代码如下 //定义的常量 const config = { baseurl:'http://172.16.114.5:8088/MGT2' } //定义的方法 function getTest2() { var elm=document.getElementById("text"); elm.innerHTML="

vue中引入js脚本块或者js文件 js函数 js方法

global_coding的博客

05-23

2134

vue中引入js脚本块或者js文件 js函数 js方法

参与评论您还未登录，请先登录后发表或查看评论

vue如何引入普通的js、css等等。一步到胃

灵魂和肉体总要有一个在路上

11-07

527

看到网上一大堆傻逼的方案，害的我安装差点把各种东西差点把项目搞崩了。最直接的方式就是在入口的index.html文件中引入，对所有组件生效，无需安装任何加载器

vue3使用require和import方式引入js

热门推荐

tenc1239的博客

07-11

1万+

vue 导入自定义js文件中的变量方法

vue组件内部引入外部js文件的方法

10-15

这种方式最大的优点是外部资源被封装成了Vue组件，可以像使用普通组件一样简单地引入和复用，也支持通过Vue的属性、事件等方式与外部脚本交互。此外，通过封装，可以更好地管理依赖关系和生命周期。 ### 总结在...

详解Vue项目引入CreateJS的方法（亲测可用）

10-16

例如，EaselJS的js文件存放在lib文件夹内，有普通和压缩版本的js文件，以及NEXT版本，以适应不同的开发需求。同时，可以通过CreateJS的官方GitHub页面获取最新的版本信息，以及在官网找到各个库的API文档和使用示例...

vue项目，普通js文件添加全局变量

youhebuke225的博客

04-26

1339

最好的实践是避免在全局作用域中定义变量，因为这可能会导致不可预测的行为和难以调试的问题。尽可能使用模块导出或 Vuex 来管理你的状态。如果你确实需要全局变量，确保它们被适当地命名和文档化，以减少潜在的冲突和误解。

vue中注册自定义的全局js方法

10-15

在Vue框架中，我们经常需要在多个组件间共享通用的JavaScript方法。为了方便地在各个组件中使用这些方法，我们可以通过创建全局的js方法并将其注册到Vue中来实现。接下来，我们将详细探讨如何在Vue中注册自定义的...

html 页面引入 vue 组件之 http-vue-loader.js

kuroshiro的博客

09-05

2047

Vue 单文件组件加载器 http-vue-loader.js 使用

Vue如何基于es6导入外部js文件

10-15

主要介绍了Vue如何基于es6导入外部js文件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

vue项目中在外部js文件中直接调用vue实例的方法比如说this

10-17

主要介绍了vue项目中在外部js文件中直接调用vue实例的方法比如说this,需要的朋友可以参考下

在Vue中全局引入JS文件的方法

qq_45687669的博客

07-18

1976

被引入的js文件位置需要放在public/路径下面。

vue 如何引入js文件

weixin_54259790的博客

05-14

885

vue 如何引入js文件如这个文件，我怎么在main.js中引入呢就是这样：这两种方法都可以让我们看看效果第一种 main.js 中引入 permission.js 效果：第二种： main.js permission.js 效果：

如何在Vue框架下使用普通html中的js代码

m0_54713489的博客

11-09

2300

对于很多像笔者一样的新手前端开发者，在编写前端代码的时候，大多是边学边写的状态。在做一些个人的、非商业的项目时，我们也许会经常去到各类前端设计网站获取灵感和素材（e.g. https://codepen.io/）。然而在Vue架构下，素材网站的普通的js代码并不能像html一样简单粘贴，网上相关解决办法也比较少，笔者进行相关探索后总结经验如下。如何在Vue框架下使用普通html中的js代码：举个例子

Vue小技巧，如何导入普通JS文件

weixin_30480583的博客

06-12

1363

最近在开发一个展示3D模型的WEB程序，在工程中使用了VUE和ThreeJS库。Three.js本身是支持CommonJS的，但我们还用到了OBJLoader模块，此模块不支持CommonJS，改成CommonJS比较麻烦（真相是懒综合症发作）。这样的话，只有用常规的html引入js文件的方式来解决这个问题。为了阐述方便，本文使用一个简单例子来展示整个解决方案。这就本文所用到的例子工程，我们在...

.vue文件_vue如何导入外部js文件

weixin_39573136的博客

11-22

303

也许大家都是使用习惯了es5的写法喜欢直接用《Script》标签倒入js文件，但是很是可惜，这写法。在es6，或则说vue环境下不支持真的写法是怎样？首先。我们要改造我们要映入的外部js文件，改成下面这个格式。主要是红色方块内部代码，我们需要将我们的模块“抛出”，让人能获取到代码：function realconsole(){ alert("hello.thanks use me"); ...

vue引入clonedeep

03-10

<think>好的，我现在需要帮助用户了解如何在Vue中引入和使用lodash的cloneDeep方法。首先，我得回想一下用户的问题：他们想知道如何引入clonedeep，可能涉及到深拷贝的需求。首先，我应该确定用户是否了解lodash这个库。可能用户知道，但需要确认安装步骤。于是，第一步应该是安装lodash或者lodash.clonedeep。这里要分情况，如果用户需要整个lodash库，或者只想要克隆深的部分，可以推荐单独安装，减少包体积。然后，考虑到用户使用Vue，可能在组件或Vue实例的方法中使用。需要说明如何在Vue组件中引入cloneDeep。比如，通过import语句，或者全局引入。同时，可能需要提到按需引入的好处，比如优化打包体积。接下来，用户可能需要示例代码。这时候应该提供一个简单的例子，比如在data中有一个对象，然后在方法中使用cloneDeep进行深拷贝，并说明这样做的结果。需要确保代码正确，比如使用正确的语法，比如methods里的函数，如何调用cloneDeep。另外，要注意可能遇到的常见问题。比如，如果用户没有正确安装lodash，或者错误地引入方法，导致cloneDeep不是函数。这时候需要提示检查安装和引入方式。此外，深拷贝的性能问题，如果对象很大，可能会有性能影响，需要提醒用户注意。还需要考虑是否有其他深拷贝的方法，比如原生的JSON.parse(JSON.stringify())，但指出其局限性，比如无法处理函数、循环引用等，而cloneDeep可以更好地处理这些情况。这样用户能理解为什么选择lodash的方法。可能用户是在Vue 2或Vue 3中使用，但大部分情况下引入方式相同，除非使用Composition API，但基本用法应该一致。不过如果用户遇到问题，可能需要进一步说明不同环境下的配置。最后，总结一下步骤：安装、引入、使用示例、注意事项。这样用户能清晰地跟随步骤操作。同时，确保语言简洁，避免技术术语过多，但又要准确。现在需要检查是否有遗漏的点。比如，是否提到Tree-shaking优化，如果使用lodash/cloneDeep的方式是否需要特定的Babel插件？但可能用户只是想快速使用，所以先给出基本用法，高级优化可以后续说明。另外，是否需要提醒用户关于深拷贝的必要性？比如在修改对象时希望不影响原始数据，这时候深拷贝的重要性。但可能用户已经了解，所以作为背景信息简要提及即可。确保所有步骤正确，代码示例无误，特别是使用$符号包裹的LaTeX部分是否符合要求，但在这个问题中可能用不到数学公式，所以可能不需要。不过需要检查是否有其他格式要求，比如行内代码用反引号，独立代码块用三个反引号，结构清晰。总结：回答的结构应该是先介绍cloneDeep的作用，然后安装步骤，再是在Vue组件中的引入和使用示例，最后注意事项和常见问题。这样用户能一步步跟着操作，解决问题。</think>在 Vue 中引入 `lodash.clonedeep` 主要用于实现深拷贝（Deep Copy），解决对象/数组嵌套引用时的拷贝问题。以下是详细步骤和注意事项： --- ### 1. **安装 lodash.clonedeep** ```bash # 安装完整 lodash 库 npm install lodash # 或仅安装 cloneDeep 模块（推荐） npm install lodash.clonedeep ``` --- ### 2. **在 Vue 组件中引入** ```javascript // 方式1：引入完整 lodash import _ from 'lodash'; const cloned = _.cloneDeep(originalObj); // 方式2：按需引入 cloneDeep（推荐） import cloneDeep from 'lodash.clonedeep'; // 或使用路径语法（需确认包名） import { cloneDeep } from 'lodash-es'; ``` --- ### 3. **使用示例** ```javascript export default { data() { return { original: { a: 1, nested: { b: 2 } } }; }, methods: { deepCopy() { // 深拷贝操作 const cloned = cloneDeep(this.original); cloned.nested.b = 100; // 修改拷贝对象不会影响原对象 console.log(this.original.nested.b); // 输出 2 } } }; ``` --- ### 4. **注意事项** - **引用类型问题** 直接赋值 (`const obj2 = obj1`) 会共享内存地址，`cloneDeep` 可彻底断开引用。 - **性能优化** 深拷贝对大型对象有性能开销，建议仅在必要时使用。 - **特殊数据类型** `cloneDeep` 支持函数、`Date`、`RegExp` 等类型的拷贝，而 `JSON.parse(JSON.stringify())` 无法处理这些情况。 --- ### 5. **替代方案对比** | 方法 | 优点 | 缺点 | |------|------|------| | `cloneDeep` | 支持复杂类型、安全 | 需引入外部库 | | `JSON.parse(JSON.stringify())` | 原生支持 | 丢失函数、`undefined`、循环引用报错 | --- ### 6. **常见问题** - **报错 `cloneDeep is not a function`** 检查引入路径是否正确，或重新安装 lodash。 - **Vue 3 响应式对象** 若拷贝 Vue 的响应式对象（如 `reactive`），需先转普通对象： ```javascript import { toRaw } from 'vue'; const rawObj = toRaw(reactiveObj); const cloned = cloneDeep(rawObj); ``` --- 通过合理使用 `cloneDeep`，可避免因引用共享导致的数据意外修改问题。