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

简介: 在vue项目中如何实现自动导入API和组件

一、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>

浏览器查看

在这里插入图片描述

相关文章
|
3月前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
273 2
|
5天前
|
资源调度 JavaScript 前端开发
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
41 1
|
2月前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
2月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
2月前
|
前端开发 JavaScript API
探究 React Hooks:如何利用全新 API 优化组件逻辑复用与状态管理
本文深入探讨React Hooks的使用方法,通过全新API优化组件逻辑复用和状态管理,提升开发效率和代码可维护性。
|
3月前
|
缓存 JavaScript 前端开发
深入理解 Vue 3 的 Composition API 与新特性
本文详细探讨了 Vue 3 中的 Composition API,包括 setup 函数的使用、响应式数据管理(ref、reactive、toRefs 和 toRef)、侦听器(watch 和 watchEffect)以及计算属性(computed)。我们还介绍了自定义 Hooks 的创建与使用,分析了 Vue 2 与 Vue 3 在响应式系统上的重要区别,并概述了组件生命周期钩子、Fragments、Teleport 和 Suspense 等新特性。通过这些内容,读者将能更深入地理解 Vue 3 的设计理念及其在构建现代前端应用中的优势。
71 1
深入理解 Vue 3 的 Composition API 与新特性
|
2月前
|
JavaScript 前端开发 API
Vue 3新特性详解:Composition API的威力
【10月更文挑战第25天】Vue 3 引入的 Composition API 是一组用于组织和复用组件逻辑的新 API。相比 Options API,它提供了更灵活的结构,便于逻辑复用和代码组织,特别适合复杂组件。本文将探讨 Composition API 的优势,并通过示例代码展示其基本用法,帮助开发者更好地理解和应用这一强大工具。
48 2
|
3月前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
29 7
|
2月前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
3月前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
57 6