如何使用 Vue CLI 在 Vue 组件中定义和使用全局变量?

如何使用 Vue CLI 在 Vue 组件中定义和使用全局变量?

通过 vue cli 定义和使用全局变量

在使用 Vue CLI 创建项目后,可以定义一个全局变量并将其用于 Vue 组件。具体步骤如下:

1. 定义全局变量

以 test2.js 为文件名创建脚本文件,并将以下代码复制到其中:

/*globals abc_test:true*/abc_test = {    a1() {        alert("12");    },};

2. 配置 Vue CLI

立即学习“前端免费学习笔记(深入)”;

在 vue.config.js 文件中,添加以下配置:

module.exports = {    assetsDir: 'static',};

这将指定静态资源应位于 static 目录中。

3. 引入全局变量

在 index.html 文件中,在

标签内引入 test.js 脚本:


4. 在 Vue 组件中使用全局变量

在 Vue 组件中,例如 Test.vue,从 /static/js/test.js 导入所需的模块,然后使用全局变量:

  

{{ msg }}

{{ text }}
import { tb } from '/static/js/test.js';export default { name: 'Test', props: { msg: String, }, data() { return { text: "哈哈哈", }; }, methods: { test() { tb.abc_test.a1(); }, },};

以上就是如何使用 Vue CLI 在 Vue 组件中定义和使用全局变量?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1556305.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月22日 01:55:48
下一篇 2025年12月18日 11:53:50

相关推荐

发表回复

登录后才能评论
关注微信