vue3 引用 umd 组件

在Vue 3中，可以使用UMD组件。UMD是通用模块定义的缩写，是一种兼容AMD和CommonJS规范的模块格式，可以在浏览器和Node.js环境下运行。UMD组件是一个自包含的JavaScript文件，可以通过script标签引入到HTML文件中，然后直接在Vue应用程序中使用。

在Vue 3中，UMD组件的使用方式与Vue 2类似。你需要先引入UMD组件，然后再将其注册为Vue组件。示例代码如下：

<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue-router@next"></script>

<!-- 引入UMD组件 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
  // 将UMD组件注册为Vue插件
  Vue.use(VueRouter)

  const router = new VueRouter({
    routes: [
      { path: '/', component: Home },
      { path: '/about', component: About }
    ]
  })

  const app = Vue.createApp({})
  app.component('my-component', {
    template: '<div>{{ message }}</div>',
    data() {
      return {
        message: 'Hello, Vue!'
      }
    }
  })
  app.use(router)
  app.mount('#app')
</script>

以上示例中，我们先通过script标签引入了Vue、Vue Router和Axios的UMD组件，然后将其注册为Vue插件。接着，在Vue应用程序中，我们定义了一个名为“my-component”的组件，并将其挂载到了#app元素上。最后，我们还使用了Vue Router来实现路由功能。