Vue3+Vite4+Naive-UI 项目自动导入API和组件

Posted 2022-12-16 天界程序员

一、Vue3常用API导入

安装依赖

	pnpm i -D unplugin-auto-import

进行Vite配置

文件名：vite.config.ts

import  defineConfig  from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig(
  plugins: [
    vue(),
    AutoImport(
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue'],
    ),
  ],
)

可能会出现TypeScript-eslint监测不识别的问题

typescript 报错：'ref' is not defined.

解决方案

1、运行项目

pnpm dev

此时，插件unplugin-auto-import会在项目的根目录生成一个文件：auto-imports.d.ts

2、将生成的TypeScript声明文件引入Vite和tsconfig

文件名：vite.config.ts

import  defineConfig  from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig(
  plugins: [
    vue(),
    AutoImport(
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue'],
      dts: './auto-imports.d.ts', // 此处引入自动生成的声明文件
    ),
  ],
)

文件名：tsconfig.json

"include": [
	"src/**/*.ts",
  "src/**/*.d.ts", 
  "src/**/*.tsx", 
  "src/**/*.vue",
  "./auto-imports.d.ts" 
  ],

此时eslint可能会报错no-unref

需要插件unplugin-auto-import生成对应的.eslintrc-auto-import.json规则文件引入到.eslintrc.cjs中生效。

1、配置vite文件

文件名：vite.config.ts

import  defineConfig  from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig(
  plugins: [
    vue(),
    AutoImport(
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue'],
      dts: './auto-imports.d.ts', // 此处引入自动生成的声明文件
      eslintrc: 
        enabled: true, // 1、true时生成eslint配置文件，2、生成后改为false，避免重复消耗
      ,
    ),
  ],
)

此处设置eslinrc.enabled的值为true，后面运行项目会生成对应的文件。

2、运行项目，以此来生成文件：

pnpm dev

此时在项目的根目录已经生成了文件：.eslintrc-auto-import.json

3、在eslintrc配置文件中引入刚刚自动生成的配置规则

文件名：.eslintrc.cjs

extends: [
    'plugin:json/recommended',
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/prettier',
    './.eslintrc-auto-import.json'
  ],

测试效果

<script setup lang="ts">

const test = ref('测试vueAPI')
console.log(test.value)

</script>

这里的sfc页面不需要从vue模块里面单独导出ref来使用，直接使用即可。

浏览器控制台：

 测试vueAPI                                 Test.vue:10

此时浏览器也打印出了对应的值，且没有报错。

---

二、自动引入NaiveUI组件

安装依赖

pnpm i -D unplugin-vue-components

配置Vite文件

文件名：vite.config.ts

import  defineConfig  from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import  NaiveUiResolver  from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig(
  plugins: [
    vue(),
    AutoImport(
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: [
        'vue',
        
          'naive-ui': [
            'useDialog',
            'useMessage',
            'useNotification',
            'useLoadingBar',
          ],
        ,
      ],
      dts: './auto-imports.d.ts',
      eslintrc: 
        enabled: false, // 1、true时生成eslint配置文件，2、生成后改为false，避免重复消耗
      ,
    ),
    Components(
      resolvers: [NaiveUiResolver()],
    ),
  ],
)

查看效果

<template>
  <!-- <div class="h-50 bg-pink-500 w-50">111</div> -->
  <n-button type="primary">naive-ui</n-button>
  <n-button type="warning">naive-warning</n-button>
</template>

<script setup lang="ts">

const test = ref('测试vueAPI')
console.log(test.value)

</script>

浏览器查看