05 项目配置(上) - udo-bit/naive_admin_pro GitHub Wiki

目标

  1. 配置依赖库
  2. 配置自动导入插件

依赖库配置

首先我们需要安装一下我们需要用到的UI库和工具库：naive-ui、vueuse。 然后我们还需要安装一些按需加载的插件：unplugin-auto-import、unplugin-vue-components。 路由库：vue-router 状态管理库：pinia 多语言：vue-i18n 开启vue的响应式语法糖

安装

pnpm add naive-ui unplugin-auto-import unplugin-vue-components -D
pnpm add @vueuse/core vue-router pinia vue-i18n

配置

首先我们需要在根目录下创建一个types的文件夹，用于存放我们的类型文件。 将src/vite-env.d.ts移动到types文件夹中，并改名为env.d.ts 接下来配置一下vite.config.ts中的插件：

{
  plugins:[
    
    vue({
      // 响应式语法糖
      reactivityTransform: true,
    }),
    AutoImport({
      // 配置需要自动导入的库
      imports: [
        'vue',
        'vue/macros',
        'vue-router',
        'vue-i18n',
        '@vueuse/core',
        'pinia',
        {
          'naive-ui': [
            'useDialog',
            'useMessage',
            'useNotification',
            'useLoadingBar',
          ],
        },
      ],
      // 生成到的地址
      dts: 'types/auto-imports.d.ts',
      // 配置本地需要自动导入的库
      dirs: [
        // pinia状态管理目录
        'src/stores',
        // 自定义组合式api目录
        'src/composables',
      ],
    }),
    Components({
      // 导入naiveui的配置项目
      resolvers: [NaiveUiResolver()],
      // 生成类型的地址
      dts: 'types/components.d.ts',
    }),
  ]
}

完成配置启动项目进行测试。

我们测试一下自动导入的函数和组件的自动导入能不能正常使用。

我们发现自动导入组件可以正常使用但是没有代码提示， image.png 我们看到types/components.d.ts的目录中发现，插件使用的是@vue/runtime-core来实现的类型，那么我们在开发环境下也安装一下：

pnpm add @vue/runtime-core -D

image.png 启动项目可以正常提示了。

当我们测试使用的时候发现函数没有自动导入的提示，我们看一下tsconfig.json中，在include中加上

{
 "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue","types/**/*.d.ts"],
}

"types/**/*.d.ts"我们再来试一下。可以正常使用了。