vue3全局组件-全局变量-base64-axios-封装

1. 前言

1. 之前的文章 前端支付 里面截图了部分代码,因为代码是vue3写的,有些写法部分人还不熟悉,经常咨询,这里简单说下2个重点

---

2. vue3全局变量的 定义

1. 这个全局变量主要值js逻辑的业务值,而不是页面组件
2. globalProperties定义全局变量
3. main.js直接上代码

import { createApp } from 'vue'
import App from './App.vue'
import {Toast} from "vant"
 import axios from './api/http'
import { Base64 } from 'js-base64';
const app = createApp(App)
// vue3自带这个配置
const prototype = app.config.globalProperties
// 原型上挂载就行
// 1. 挂载 业务组件
prototype.$toast = Toast
// 2. 挂载第三方依赖
prototype.$Base64 =Base64
// 3. 挂载请求
prototype.$axios = axios;

---

3. 页面使用全局变量

1. getCurrentInstance 获取全局变量
2. 直接上代码

import {getCurrentInstance} from "vue
const {proxy} = getCurrentInstance()

// 1. 业务组件的使用
proxy.$toast.success('支付成功')
// 2.  常用依赖的使用
proxy.$Base64.encode("666")
// 3. axios
 proxy.$axios({
  url:'',
 method:'',
 }）
 proxy.$axios.get()

---

4. 全局组件的注册

1. 页面显示的组件 main.js

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// app.component(组件名,组件)

//  比如ElementPlus icon的使用
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

2. 页面直接使用组件名就行了

---

5. main.js

1. 展示
   main.png
2. 仅做参考

---

参考资料

ElementPlus icon

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉