如何在 Vue3 中启用和设置 AutoImport?

Vue3 的 `@vue/compiler-sfc` 模块引入了自动导入（AutoImport）功能，这允许你在 `.vue` 文件中使用诸如 `import` 和 `ref` 等声明时省略路径前缀。要启用和配置这个特性，你需要安装一些依赖并配置你的项目。

1. **安装依赖**:
首先，在你的项目中安装 `@vue/cli-plugin-vuex` 和 `@vue/compiler-sfc` 或者直接使用 `@vue/compiler-sfc` 如果你正在使用更轻量级的脚手架：

   npm install @vue/cli-plugin-vuex @vue/compiler-sfc --save-dev

或者如果你已经有一个现有的项目，并且只想要 `@vue/compiler-sfc`，可以单独安装它：

   npm install --save-dev @vue/compiler-sfc

2. **配置`vue.config.js`**:
在根目录下打开或创建 `vue.config.js` 文件，然后添加或更新 `transpileOptions` 对象，开启 `autoImport` 特性：

   module.exports = {
     transpileOptions: {
       experimentalAutoImports: true,
     },
     // ... 其他配置项...
   };

3. **启用`@vue/cli-plugin-vuex`特有的配置**:
如果你计划使用 Vuex，还需要在 `plugins` 中配置 `@vue/cli-plugin-vuex`：

   plugins: [
     ['@vue/cli-plugin-vuex', { importMode: 'default' }],
     // ...
   ],

4. **验证**:
重启你的开发服务器，然后检查 `.vue` 文件，你应该能看到 `import` 和 `ref` 等声明会自动补全路径。