什么？这个年代了，你竟然不会组件注册

vue2中进行组件注册

局部注册

// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import Hmheader from './components/HmHeader'
​
export default {
    // 局部注册
    conponents: {
        '组件名'： 组件对象，
        HmHeader:HmHeader
}
// 之后就可以在组件父组件内部直接使用即可

全局注册

在main.js中注册

import 组件名 from '.vue文件路径'
​
Vue.component('组件名', {
  // 组件的选项和逻辑
})
// 之后就就可以在任何组件内使用这个组件

vue3中进行组件注册

全局注册

我们可以使用 Vue 应用实例的 app.component() 方法，让组件在当前 Vue 应用中全局可用。

在main.js中

import { createApp } from 'vue'
​
const app = createApp({})
​
app.component(
  // 注册的名字
  'MyComponent',
  // 组件的实现
  {
    /* ... */
  }
)

局部注册

在使用 <script setup> 的单文件组件中，导入的组件可以直接在模板中使用，无需注册：

<script setup>
import ComponentA from './ComponentA.vue'
</script>
​
<template>
  <ComponentA />
</template>

自动注册

通过插件进行辅助

安装：

pnpm add unplugin-vue-components -D

修改配置文件(vue3+ts项目)：

vite.config.ts

（这里面自动引入了vant,我们还需要在main.ts中引入vant的css样式文件）

（下面的配置进行自动引入只在components文件夹内的组件生效）

import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
​
export default defineConfig({
  // 下面配置的就是vant组件库和components文件夹内的组件自动引入
  plugins: [
    // 解析单文件组件的插件
    vue(),
    // 自动导入的插件，解析器可以是 vant element and-vue 
    Components({
      // 关闭自动生成类型声明文件
      dts: false,
      // 使用vant解析器
      // 原因：Toast Confirm 这类组件的样式还是需要单独引入，样式全局引入了，关闭自动引入
      resolvers: [VantResolver({ importStyle: false })]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

使用vscode编写小程序

uni-app的项目使用的是vue3+ts，所以在代码中全局注册和局部注册组件的代码跟vue3的一致，到我们使用uni进行开发的时候，需要设置uni内的组件自动注册可以设置一下代码：

pages.json中进行配置

注意需要将这部分代码与其他代码独立也就是在同一个层级

下面的代码中的配置"^Xtx(.*)": "@/components/Xtx$1.vue"仿照un-官网进行编辑，如果你组件需要自定义，可以进行修改。

{
  // 组件自动引入规则
  "easycom": {
    // 是否开启自动扫描 @/components/$1/$1.vue 组件
    "autoscan": true,
    // 以正则方式自定义组件匹配规则
    "custom": {
      // uni-ui 规则如下配置
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
      // 以 Xtx 开头的组件，在 components 目录中查找
      "^Xtx(.*)": "@/components/Xtx$1.vue"
    }
  }
}