查看: 99|回复: 1

Vue项目引用JS文件的三种方式:全局jQuery、组件模块导入与内部引用

[复制链接]
发表于 3 小时前 | 显示全部楼层 |阅读模式
在Vue开发中,经常需要在组件或全局范围内引用JavaScript文件或第三方库,比如jQuery。本文基于Vue CLI + webpack环境,介绍三种常见的实践方式:全局注入、组件外部模块导入和单组件内部直接引用。

【方式一:全局注入jQuery(webpack配置)】
此方式适用于整个项目都需要使用jQuery的场景,通过webpack的ProvidePlugin自动挂载,避免每个组件手动import。

步骤:
1. 安装jQuery依赖:
  1. npm install jquery --save
复制代码
--save参数会将jQuery写入package.json的dependencies,确保部署时包含此模块。

2. 修改webpack基础配置文件(webpack.base.conf.js),在顶部引入webpack模块:
  1. var webpack = require("webpack")
复制代码

3. 在module.exports中添加plugins配置:
  1. plugins: [
  2.   new webpack.optimize.CommonsChunkPlugin('common.js'),
  3.   new webpack.ProvidePlugin({
  4.     jQuery: "jquery",
  5.     $: "jquery"
  6.   })
  7. ]
复制代码
其中CommonsChunkPlugin用于提取公共模块,ProvidePlugin将jQuery暴露为全局变量,所有模块无需import即可直接使用$符号。

4. (可选)在main.js中显式引入jQuery:
  1. import $ from 'jquery'
复制代码
实际上,完成第3步后即可在组件中直接使用$,main.js中的import语句不是必须的。

5. 重启开发服务器(npm run dev),之后所有.vue文件和其他模块中都可以直接用$或jQuery调用jQuery方法。

【方式二:组件内引用外部JS模块(ES6导入/导出)】
当某个自定义JS文件只在特定组件中使用时,推荐采用模块化的方式引入。

项目目录示例:
  1. src/
  2. ├── components/
  3. │   └── Content.vue
  4. └── js/
  5.     └── test.js
复制代码

test.js内容:
  1. function myfun() {
  2.   console.log('Success')
  3. }
  4. export { // 很关键:必须使用export暴露接口
  5.   myfun
  6. }
复制代码

Content.vue中的写法:
  1. <template>
  2. <div>
  3.   <input ref='test' id="test">
  4.   <button @click='diyfun'>Click</button>
  5. </div>
  6. </template>
  7. <script>
  8. import { myfun } from '../js/test.js' // 注意路径正确
  9. export default {
  10.   data () {
  11.     return {
  12.       testvalue: ''
  13.     }
  14.   },
  15.   methods: {
  16.     diyfun: function() {
  17.       myfun();
  18.     }
  19.   }
  20. }
  21. </script>
复制代码
使用ES6模块语法,在script标签顶部通过import引入函数,然后在methods中调用即可。注意test.js必须使用export导出,否则组件无法解析。

【方式三:单组件内部直接引用jQuery】
如果只是个别组件需要jQuery,而不想全局配置,可以在该组件内单独import。

1. 同样需要先安装jQuery依赖:
  1. npm install jquery --save
复制代码

2. 在需要使用jQuery的.vue文件中,直接导入:
  1. <script>
  2. import $ from 'jquery'
  3. export default {
  4.   mounted: function() {
  5.     console.log($)
  6.   }
  7. }
  8. </script>
复制代码
注意:若在组件的生命周期外(例如export default的顶层)调用console.log($),可能会因为执行时序问题导致黄色警告。将$的调用放在mounted钩子中即可避免,这也符合Vue的组件生命周期规范。

【总结】
- 全局需求(如jQuery、Lodash等通用库)建议使用方式一,通过Webpack插件注入,减少重复import。
- 自定义功能模块推荐方式二,利用ES6模块化实现高内聚、低耦合。
- 偶尔使用的库则可以采用方式三,灵活且不影响全局作用域。
这三种方式覆盖了Vue项目引用JS文件的常见场景,开发者可根据实际项目结构选择最合适的方案。
回复

使用道具 举报

发表于 2 小时前 | 显示全部楼层

Re: Vue项目引用JS文件的三种方式:全局jQuery、组件模块导入与内部引用

感谢楼主分享这么实用的总结!三种方式覆盖了从全局到局部的不同需求,思路非常清晰。我尤其喜欢方式一用ProvidePlugin自动挂载的做法,可以省去每个组件重复import的麻烦;方式二的模块化导出示范也很标准,适合封装复用逻辑。对于方式三,楼主提醒在mounted里调用$以避免警告这点很关键,实际开发中确实容易忽略时序问题。个人补充一点小经验:如果项目使用Vue 3 + Vite,方式一可能需要改用vite插件的方式全局注入,但核心思想是一样的。平时你在项目中更常用哪种方式?有没有遇到什么值得注意的坑?
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

指导单位

江苏省公安厅

江苏省通信管理局

浙江省台州刑侦支队

DEFCON GROUP 86025

Hacking Group 021A

旗下站点

态势感知中心

应急响应中心

红盟安全

联系我们

官方QQ群:112851260

官方邮箱:security#ihonker.org(#改成@)

官方核心成员

关注微信公众号

Archiver|手机版|小黑屋| ( 沪ICP备2021026908号 )

GMT+8, 2026-6-12 21:02 , Processed in 0.027316 second(s), 18 queries , Gzip On, Redis On.

Powered by ihonker.com

Copyright © 2015-现在.

  • 返回顶部