VUE3常用插件

element-plus

 安装
    npm install element-plus --save


    引入
    // main.js中：
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'

    createApp(App).use(ElementPlus).mount('#app')


    volar支持
    // 新建jsconfig.js
    {
      "compilerOptions": {
        "types": ["element-plus/global"]
      }
    }

mitt

安装

npm install mitt --save

使用:创建EventBus.js

// 1.创建EventBus.js,一般在utils下


// 2.EventBus.js
import mitt from "mitt";
const Mit = mitt()
export default Mit


// 3.在需要使用的文件中,发送
<script setup>
import bus from './util/EventBus'

const emit = () => {
  bus.emit('ceshi', 1)
}
</script>
<template>
  <el-button @click="emit">App中的按钮</el-button>
</template>


// 4.接收
<script setup>
 onMounted(() => {
  bus.on("ceshi", (e) => {
    console.log(e, "e")
  })
})
</script>

使用:全局挂载(不推荐)

不推荐原因:全局挂载后,会报错不存在$bus,无法直接使用

因为在app.config.globalProperties上挂载的$bus，要进行ComponentCustomProperties接口扩展才能获得类型识别
ComponentCustomProperties接口是vue3提供的增强组件实例类型以支持自定义全局属性,通过TypeScript模块扩展来扩展的

[Mitt - 掘金 (juejin.cn)](https://juejin.cn/post/7169148020653555742)

pinia

安装

npm i pinia
npm i pinia-plugin-persistedstate

引入，配置

1.新建store/pinia.js
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia


2.main.js中引入
import pinia from './store/pinia'
app.use(ElementPlus).use(pinia).mount('#app')