Vue3+Vite项目按需自动导入配置以及一些常见问题修复

下面是针对“Vue3+Vite项目按需自动导入配置以及一些常见问题修复”的完整攻略：

一、Vite中的自动导入配置

1. 在项目中安装vite-plugin-components

在Vite中实现按需自动导入需要用到一个插件——vite-plugin-components。使用npm在项目中安装这个插件：

npm i vite-plugin-components -D

2. 在vite.config.js中配置自动导入

在vite.config.js中配置按需自动导入。可以设置需要导入的组件库、需要导入的组件、以及导入目录等信息。以下是一个示例：

import { defineConfig } from 'vite';
import Components from 'vite-plugin-components';

export default defineConfig({
  plugins: [
    Components({
      /* 设置需要导入的组件库 */
      /* `element-plus` 和 `ant-design-vue` 是例子 */
      libraries: [
        {
          name: 'element-plus',
          // 需要导入的组件
          // 支持 kebab-case、PascalCase 和 CamelCase
          components: [
            'ElButton',
            'ElSkeleton'
          ],
          // 组件库的路径
          // 默认路径为 `node_modules`，可以不写
          path: 'element-plus/lib'
        },
        {
          name: 'ant-design-vue',
          components: [
            'Button',
            'Input'
          ],
          path: 'ant-design-vue/es'
        }
      ],
      /* 设置导入目录 */
      /* 默认路径为 `src/components`，可以不写 */
      // 是不是优雅的导入方式？像这样写：
      // import { Hello } from '@components'
      // 而不是这样：
      // import Hello from '@/components/Hello'
      directoryAsNamespace: true
    })
  ]
});

这个配置实现了自动导入element-plus和ant-design-vue的Button和Input组件，路径为分别为element-plus/lib和ant-design-vue/es，导入目录为src/components。

二、常见问题修复

1. Vue3中涉及组件名的问题

Vue3中组件名需要使用defineComponent进行定义。如果用了大驼峰命名，例如MyComponent，在html中使用时需要用<my-component>进行引用。如果想要使用原来的形式<MyComponent>来引用组件，需要给组件增加name属性，并赋值为组件名：

import { defineComponent } from 'vue';
export default defineComponent({
  name: 'MyComponent',
  // ... 组件的其它属性和方法
});

2. Vue3中eventBus的更改

在Vue2中，通过eventBus实现组件间通信非常方便。但在Vue3中，eventBus已经被移除了。可以使用provide/inject、模块化store、props/$emit、组件Ref等方式进行组件间通信。其中，provide和inject是最简单易用的方式：

提供：

import { defineComponent, provide } from 'vue';
export default defineComponent({
  setup() {
    provide('count', 0);
  }
});

注入：

import { defineComponent, inject } from 'vue';
export default defineComponent({
  setup() {
    const count = inject('count');
    return { count };
  }
});

以上是关于“Vue3+Vite项目按需自动导入配置以及一些常见问题修复”的攻略。希望能对你有所帮助。