vue3定义全局组件

前言

vue3 全局组件需在 main.js 中定义，参考官网中的 2 个例子，实操如下。若需构建 vue 项目，请移步 vite构建vue3项目。
目录如下

注册全局组件

// main.js
import { createApp } from 'vue'
import App from './App.vue'

// createApp 函数创建一个应用实例
const app = createApp(App)
// 定义全局组件
app.component('alert-box', {
  template: `
  <div class="demo-alert-box">
  <strong>Error!</strong>
  <slot></slot>
  </div>
  `
})

app.component('blog-post', {
  props: ['postTitle'],
  template: `
  <h3>{{ postTitle }}</h3>
  `
})
// mount 函数返回根组件实例
const vm = app.mount('#app')

console.warn('app', app, vm);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

使用全局组件

// HelloWorld.vue
<template>
  <h1>{{ msg }}</h1>

  <p>
    <a href="https://vitejs.dev/guide/features.html" target="_blank">
      Vite Documentation
    </a>
    |
    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
  </p>

  <button @click="state.count++">count is: {{ state.count }}</button>
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
  <table>
    <tr v-is="'blog-post'" post-title="表格行的标题"></tr>
  </table>
  <alert-box>
    Something bad happened.
  </alert-box>
  <blog-post post-title="hello!"></blog-post>
</template>

<script setup>
import { defineProps, reactive } from 'vue'

defineProps({
  msg: String
})

const state = reactive({ count: 0 })
</script>

<style scoped>
a {
  color: #42b983;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

结果全局组件未生效，且控制台打印出警告：

[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias “vue” to “vue/dist/vue.esm-bundler.js”.

此处的警告在官网中已经有明确的原因描述
运行时 + 编译器 vs. 仅运行时

使用构建工具

由于 main.js 中全局组件都是使用 html 字符串传递到 template 选项，此时就是 运行时 + 编译器，需要完整的构建版本，故需在 vite.config.js 中配置 vue 构建版本为 vue.esm-bundler.js。

配置 vue 构建版本

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      'vue':  'vue/dist/vue.esm-bundler.js' 
    },
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13

效果如下：

总结

• vue3 使用构建工具，默认仅运行时