vue3 app.config.globalProperties.$test 定义了全局变量，怎么使用

在Vue 3 中，`app.config.globalProperties.$test` 是一种用于设置全局属性的方式，通常在 Vue 应用初始化的时候通过 `createApp()` API 来定义。这个 `$test` 变量可以像普通变量一样在应用的所有组件内访问，因为它已经添加到了全局作用域中。

例如，如果你在创建 App 实例时这样配置：

const { createApp } = Vue;
const app = createApp(App);

// 定义全局变量 $test
app.config.globalProperties.$test = {
  name: 'Test Value',
  sayHello() {
    console.log('Hello from global variable');
  }
};

// 然后在任意组件中使用这个全局变量
export default {
  setup() {
    // 访问全局变量
    const testValue = this.$test.name; // 获取 name 属性值

    // 调用全局方法
    this.$test.sayHello(); // 执行 sayHello 函数

    return {};
  }
};

要使用这个全局变量，只需要在组件内的 `setup()` 或者模板文件 `<script setup>` 中通过 `this.$test` 进行引用即可。

相关问题

vue2 vue.config.js文件最全配置加每一行配置语句的注释注释

以下是一个包含注释的最全的 vue.config.js 文件配置：

module.exports = {
  // 项目部署的基础路径，配置如：/my-app/，则打包后所有资源路径都会加上这个前缀，可以配置为相对路径"./"
  publicPath: '/',

  // 输出文件目录，默认值为'dist'，生产环境构建文件的目录
  outputDir: 'dist',

  // 静态资源目录（js、css、img、fonts），相对于outputDir的路径
  assetsDir: 'static',

  // eslint-loader 是否在保存的时候检查，true为检查，false为不检查
  lintOnSave: true,

  // 是否使用包含运行时编译器的Vue核心的构建
  runtimeCompiler: false,

  // 生产环境sourceMap
  productionSourceMap: false,

  // webpack配置
  configureWebpack: {
    // 设置别名
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },

  // vue-loader配置
  chainWebpack: config => {
    // 移除 prefetch 插件
    config.plugins.delete('prefetch')

    // 添加新的svg-sprite-loader处理svgIcon
    config.module
      .rule('svgIcon')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()

    // 修改images loader，添加svg处理
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      .exclude.add(resolve('src/icons'))
      .end()

    // 对vue-cli内部的webpack配置进行更细粒度的修改
    // https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          // 生产环境配置
        }
      )
      .when(process.env.NODE_ENV === 'development',
        config => {
          // 开发环境配置
        }
      )
  },

  // CSS相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,

    // 开启 CSS source maps
    sourceMap: false,

    // css预设器配置项
    loaderOptions: {
      // sass-loader配置
      sass: {
        // 全局注入变量和mixin
        data: `
          @import "@/styles/variables.scss";
          @import "@/styles/mixin.scss";
        `
      }
    },

    // 启用 CSS modules for all css / pre-processor files.
    requireModuleExtension: false
  },

  // 开发服务配置
  devServer: {
    // 端口号
    port: 8000,

    // 启动时自动打开浏览器
    open: true,

    // 反向代理配置
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: { '^/api': '' }
      }
    }
  },

  // 第三方插件配置
  pluginOptions: {
    // ...
  }
}

function resolve(dir) {
  return path.join(__dirname, dir)
}