从vue2项目转向vue3项目时, 发现有很多东西都有了细微的变化, 所以就总结一下:

全局/局部插件的使用

全局插件

vue2写法

这个看看就好, 基本在写vue项目的人应该不陌生

//1. 在main.js中进行定义
import Vue from 'vue'
import video from "video.js"
Vue.prototype.$video = video

//2. 在使用的组件上, 直接通过this使用
this.$video

vue3写法1

//1. 在main.ts中进行定义
    import { createApp } from "vue";
    import App from "./App.vue";
    const app = createApp(App);
    app.config.globalProperties.$video = video
    
//2. 组件使用时
        import { defineComponent, getCurrentInstance } from 'vue'
        setup(){
            const { proxy } = getCurrentInstance()
            const video = proxy.$video
            //下面就可以使用video了
        }

vue3写法2

这个方法主要通过注入方式来实现的

//依赖注入方式
    const app = createApp(App)
    app.provide('$video', video);
    
    
//组件中使用
    import { inject} from "@vue/runtime-core";
    let video = inject('$video')

局部插件

局部没什么可说的,vue3和vue2一样的, 都是直接引入, 直接使用

//1. 在组件中
    import md5 from 'js-md5';
    //直接使用
    let newPwd = md5(newPwd);

全局/局部组件的使用

vue2和vue3也是十分类似的

vue2格式: Vue.component('loading',LoadingComponent)

所以下面主要看看vue3的:

全局组件

里面有两种方式, 自己喜欢就好

//1. 在main.js中引入定义
    import GlobalComponent from '@/components/global-component.vue'
    
    //写法1
    app.component('global-component', GlobalComponent)
    
    //写法2
    app.use(GlobalComponent)

//2. 在组件中直接使用
    <template>
      <global-component></global-component>
    </template>

局部组件

自己写的组件

//在组件中引入定义, 就可以直接使用了
<template>
  <global-component></global-component>
</template>

<script lang="ts">
    import { defineComponent } from 'vue';
    import GlobalComponent from '@/components/global-component.vue'  //引入
    export default defineComponent({
      components: { GlobalComponent },  //注册
      setup(props) {
        return { };
      },
    });
</ script>

npm安装的组件

如果组件是通过安装下载的. 基本步骤也是差不多, 看看就行了

//1. 安装
npm i vue-cropper

//2. 局部组件中使用
<script lang="ts">
    import { VueCropper } from "vue-cropper";
    import "vue-cropper/dist/index.css";	//如果有样式的, 需要引入
    export default defineComponent({
      components: { VueCropper },
      setup(props) {
        return { };
      },
    });
</ script>

//3. 全局的, 参考上面的即可, 都差不多的

vue3和vue2的全局(局部)插件和全局(局部)组件比较