登录
首页 >  文章 >  前端

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

时间：2024-10-27 11:37:04 291浏览 收藏

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《如何使用 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 文件中，在 <head> 标签内引入 test.js 脚本：

<script type="text/javascript" src="/static/js/test.js"></script>

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

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

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    {{ text }}
    <button @click="test()">aaa</button>
  </div>
</template>

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

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>