全局组件和全局方法的使用

全局样式

（1）assets下新建index.css

☞ src => assets => styles => index.css

可以建立其他css在这里统一管理

/*1重置样式表*/
@import './reset.css';

/*自定义动画库*/
@import './animove.css';

（2）引入

☞ 在main.ts里面引入样式main.css

import './assets/index.css' //引入主要样式

（3）定义进度条样式

/*自定义进度条颜色*/
#nprogress .bar {   
  background:red !important;  /*  自定义颜色*/
}

（4）效果如下

全局组件

全局组件使用

👉 registerComponents.ts文件

// 全局组件部分注册
import RightToolbar from '@/components/RightToolbar.vue';  // 组件--右侧搜索

export function registerComponents(app) {
  app.component('RightToolbar', RightToolbar);  // 注册组件
}

👉 main.ts文件中引入

import { registerComponents } from './utils/registerComponents';
registerComponents(app);

创建全局插件

☞ src下面新建plugins=> index.js 文件，用于注册全局组件

index.js 文件内容如下：

import modal from './modal'
export default function installPlugins(app){
  // 模态框对象
  app.config.globalProperties.$modal = modal
}

☞ modal.js 文件内容如下：

import { ElMessage, ElMessageBox, ElNotification, ElLoading } from 'element-plus'
export default {
  // 弹出提示
  msgBox(content) {
    ElMessageBox.alert(content, "系统提示")
  },
  // 错误提示
  msgBoxError(content) {
    ElMessageBox.alert(content, "系统提示", { type: 'error' })
  },
  // 成功提示
  msgBoxSuccess(content) {
    ElMessageBox.alert(content, "系统提示", { type: 'success' })
  },
  // 警告提示
  msgBoxWarning(content) {
    ElMessageBox.alert(content, "系统提示", { type: 'warning' })
  },
}

全局方法

接下来我们将项目的全局方法全部封装到一个文件夹中，方便管理

src/utils/vueGlobal.js

在这里引入所有的Vue的文件和方法

全局函数封装

全局引入一些常用的 Vue 函数（如 useRouter、ref、reactive、toRefs、onMounted）

在src=> utils文件夹中创建一个vueGlobal.js，用于注册全局方法

⚪ main.ts中引入vueGlobal.js

import VueGlobal from '@/utils/vueGlobal.js'  // 导入插件

// 使用插件
app.use(VueGlobal)

然后我们完成一下对于这个全局定义的封装，这里首先是element-plus的封装

//  全局方法引入
import { ref, reactive, toRefs, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElNotification } from 'element-plus'
export default {
  install(app) {
    // 全局注册常用的 Vue 函数
    app.config.globalProperties.$ref = ref
    app.config.globalProperties.$ElNotification = ElNotification
  }
}

⚪ 使用

☞ vue2写法

之前我们在vue2之中我们使用的时候会按照这种写法进行使用

$ElNotification('xxx')

☞ vue3写法

在vue3 setup 组合式API之中我们可以通过 getCurrentInstance() 来获取实例

// 引入 getCurrentInstance
import { getCurrentInstance } from 'vue'

// 调用
const { proxy } = getCurrentInstance()

//使用
proxy.$ElNotification('xxx')

全局注册vue方法

☞ 根目录引入

import VueGlobal from '@/utils/vueGlobal.js'  // 导入全局vue方法
app.use(VueGlobal) // 使用vue方法

// vueGlobal.js 
//  全局方法引入
import { ref, reactive, toRefs, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { parseTime } from '@/utils/methods.ts'
export default {
  install(app) {
    // 全局注册常用的 Vue 函数
    app.config.globalProperties.$ref = ref
    app.config.globalProperties.$reactive = reactive
    app.config.globalProperties.$toRefs = toRefs
    app.config.globalProperties.$useRouter = useRouter
    app.config.globalProperties.$parseTime = parseTime
    app.config.globalProperties.$onMounted = onMounted
  }
}

☞ 使用

比如说我们呢在页面之中使用路由

// 之前我们使用类似于这样
import {useRouter} from 'vue-router'
const router=useRouter();


//现在我们使用 
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance() // 获取当前实例
const router=proxy.$useRouter();

全局注册其他方法

☞ 根目录引入

import VueGlobal from '@/utils/vueGlobal.js'  // 导入全局vue方法
app.use(VueGlobal) // 使用

//  全局方法引入
import { parseTime } from '@/utils/methods.ts'
export default {
  install(app) {
    // 全局注册常用的 Vue 函数
    app.config.globalProperties.$parseTime = parseTime
  }
}

☞ 使用

在页面之中使用

import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance() // 获取当前实例
const router=proxy.$parseTime(xxx);