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

目录
  • 一、Vue API自动导入
    • 1.1 配置unplugin-auto-import
    • 1.2 可能遇到ts,eslint不识别而导入报错的问题
    • 1.3 配置src/component目录下的组件自动引入
  • 二、按需引入UI组件库(antd,element-plus)
    • 2.1、按需引入element-plus
    • 2.2 ant-design-vue 按需引入
    • 2.3 自动导入 Element Plus Icon
  • 三、关于配置文件
  • 总结

一、Vue API自动导入

解决的问题:避免在每个vue组件中都重复性的去声明ref,reactive等。如下:

import {ref, reactive} from 'vue' // 配置自动导入,用来省略这句手动引入
const test = ref('aaaa')

1.1 配置unplugin-auto-import

具体配置:

安装vite插件:unplugin-auto-import

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      // 自动导入 Vue 相关函数,如:ref, reactive, toRef 等
      imports: ['vue'],
    }),
  ],
});

1.2 可能遇到ts,eslint不识别而导入报错的问题

1、typescript 报错:'reactive' is not defined.

原因:TS未识别到vue api,没有相应的模块声明文件

处理:在vite中配置并生成auto-imports.d.ts ,并在tsconfig.json中引入

// vite.config.js
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      // 自动导入 Vue 相关函数,如:ref, reactive, toRef 等
      imports: ['vue'],
      // 生成自动导入的TS声明文件
       dts: "/auto-import.d.ts",
    }),
  ],
});

tsconfig.json

{
	 "include": [
	    "src/**/*.d.ts",
	    "./*.d.ts",
	    "./auto-imports.d.ts" // 导入上一步生成的配置文件
	  ],
}

2、eslint不识别报错 error 'reactive' is not defined no-undef

原因:未配置自动导入相应的eslint规则
处理:通过autoimport中的配置生成对应.eslintrc-auto-import.json配置文件,并在.eslintrc中引入

// vite.config.js
{
	// ......
	 AutoImport({
      imports: ["vue"],
      resolvers: [ElementPlusResolver()],
      dts: "/auto-import.d.ts",
      eslintrc: {
        enabled: true,  // 1、改为true用于生成eslint配置。2、生成后改回false,避免重复生成消耗
      },
    }),
}
 extends: [
    //....此处活力之前配置.
    "./.eslintrc-auto-import.json",
  ],

1.3 配置src/component目录下的组件自动引入

在页面组件中,不用手动导入组件,直接使用组件的方式:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      // 自动导入 Vue 相关函数,如:ref, reactive, toRef 等
      imports: ['vue'],
    }),
	Components({
      // 指定自动导入的组件位置,默认是 src/components
       dirs: ['src/components','src/otherComponents'],
    }),
  ],
});

二、按需引入UI组件库(antd,element-plus)

2.1、按需引入element-plus

官方文档很清晰,用到unplugin-vue-components unplugin-auto-import这两款插件

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
    // 自动导入element相关函数,如:ElMessage, ElMessageBox..
      resolvers: [ElementPlusResolver()],
    }),
    Components({
    // 自动导入element相关组件
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

2.2 ant-design-vue 按需引入

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        AntDesignVueResolver(),
      ],
    }),
  ]
})

2.3 自动导入 Element Plus Icon

element-plus 图标是用 svg 渲染的,需要额外的导入方法。官方文档对于icons也有相应说明。

  • 安装额外插件:npm install -D unplugin-icons
  • 配置自动导入
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [
        // ....
        // 自动导入图标组件
        IconsResolver({
          prefix: 'Icon',
        }),
      ],
    }),
    Components({
      resolvers: [
 		// .....
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ['ep'], //@iconify-json/ep 是 Element Plus 的图标库,所以 IconsResolver 配置了 enabledCollections: ['ep']
        }),
      ],
    }),
    Icons({
      autoInstall: true,
    }),
  ],
});

注意:通过此方法自动引入后,使用icon时,请采用以下方式才生效。(添加i-eq作为icon前缀)

<el-icon :size="70" color="#409EFC" class="no-inherit">
 <i-ep-share />
</el-icon>

三、关于配置文件

unplugin-auto-import会默认在要目录生成auto-imports.d.ts文件,unplugin-vue-components对应会在根目录生成components.d.ts文件,分别描述自动导入的 API、component。通过在tsconfig.json的include中引入对应配置文件,避免TS报错。

AutoImport({
  // ...
  // 配置文件生成位置,默认是根目录 /auto-imports.d.ts
  // dts: './auto-imports.d.ts',
}),
Components({
  // ...
  // 配置文件生成位置,默认是根目录 /components.d.ts
  // dts: './components.d.ts',
}),

总结

到此这篇关于Vue3+Vite项目按需自动导入配置以及一些常见问题修复的文章就介绍到这了,更多相关Vue3 Vite项目按需自动导入配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue3从0搭建Vite打包组件库使用详解

    目录 打包配置 声明文件 打包配置 本篇文章将介绍如何使用 vite 打包我们的组件库,同时告诉大家如何使用插件让打包后的文件自动生成声明文件(*.d.ts) vite 专门提供了库模式的打包方式,配置其实非常简单,首先全局安装 vite 以及@vitejs/plugin-vue pnpm add vite @vitejs/plugin-vue -D -w 在 components 文件下新建vite.config.ts配置文件 import { defineConfig } from "vit

  • vue3+vite项目中按需引入vant报错:Failed to resolve import的解决方案

    目录 问题描述 原因分析 解决方案 总结 问题描述 近日尝试使用vite+vue3+vant开发项目过程中,参考vant官网开发指南->快速上手->引入组件 按照上述配置好后,运行vite环境报错:Failed to resolve import 原因分析 根据报错信息,发现是vant的样式引入路径不对. 程序解析为:项目路径/node_modules/vant/lib/vant/es/组件/style 实际应该是:项目路径/node_modules/vant/lib/ vant/es/组件/

  • 使用Vite+Vue3+TypeScript 搭建开发脚手架的详细过程

    目录 Vite前端开发与构建工具 Vue3 与 Vue2区别 TypeScript 使用Vite创建脚手架 1.创建项目文件夹 2.选择Vue 3.选择TypeScript 4.完成后可以看到项目文件夹(my-vue-app) 配置文件引用别名 alias 修改 vite.config.ts 文件配置(此时:会报错 path 未定义,接下来定义path) 定义path,修改tsconfig.json 安装css处理器插件scss 配置全局scss样式(在src/assets 下创建style 文

  • Vue3中Vite和Vue-cli的特点与区别详解

    目录 1. 创建3.0项目 Vite 与 Vue-cli 是什么? Vue-cli 的特点: Vite 的特点: Vite 和 Vue-cli的区别: 总结: 1. 创建3.0项目 vue-cli : 安装并执行 npm init vue@latest 选择项目功能时: 除了第一项的项目名字外,其他可以暂时No cd title npm install npm run dev :运行 npm run build: 打包 (生成一个dist文件夹) vite: 使用vite 体验更快速 npm i

  • vue3使用Vite打包组件库从0搭建过程详解

    目录 手动搭建一个用于测试组件库组件 Vue3 项目 初始化 ts 搭建一个基于 vite 的 vue3 项目 安装插件 配置 vite.config.ts 新建入口 html 文件 app.vue 入口 main.ts 配置脚本启动项目 手动搭建一个用于测试组件库组件 Vue3 项目 本篇文章将在项目中引入 typescript,以及手动搭建一个用于测试组件库组件 Vue3 项目 因为我们是使用 Vite+Ts 开发的是 Vue3 组件库,所以我们需要安装 typescript.vue3,同时

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

    目录 一.Vue API自动导入 1.1 配置unplugin-auto-import 1.2 可能遇到ts,eslint不识别而导入报错的问题 1.3 配置src/component目录下的组件自动引入 二.按需引入UI组件库(antd,element-plus) 2.1.按需引入element-plus 2.2 ant-design-vue 按需引入 2.3 自动导入 Element Plus Icon 三.关于配置文件 总结 一.Vue API自动导入 解决的问题:避免在每个vue组件中都

  • 图文详解如何在vue3+vite项目中使用svg

    今天在vue3+vite项目练习中,在使用svg时,发现之前的写法不能用,之前的使用方法参考vue2中优雅的使用svg const req = require.context('./icons/svg', false, /\.svg$/) const requireAll = requireContent => requireContent.keys().map(requireContent) requireAll(req) 然后就各种资料查找,终于实现了,废话不多说,直接上代码: stept1

  • VUE3+vite项目中动态引入组件与异步组件的详细实例

    目录 一.全量注册,随用随取 1. 把项目中所有vue文件注册成异步组件. 2. 获取组件 3. 参考如下 二.使用@rollup/plugin-dynamic-import-vars插件 1.介绍 2.安装 3.使用 4.How it works 总结 一.全量注册,随用随取 1. 把项目中所有vue文件注册成异步组件. const app = createApp(App); function registerGlobalAsyncComponents(app: VueApp) { const

  • Vue3+Vite项目使用mockjs随机模拟数据

    在vite中使用mockjs进行模拟数据,需要借助新的依赖进行使用 一.安装mockjs yarn add mockjs -S 或 npm i mockjs -D 二.安装vite-plugin-mock npm i vite-plugin-mock -D 三.在src/mock/source文件夹下创建user.ts 在index.vue中放入以下内容: import { MockMethod } from 'vite-plugin-mock' export default [ { url:

  • vue3集成Element-plus实现按需自动引入组件的方法总结

    目录 1.第一种方式,使用全局引入 2.第二种方式,使用局部引入 3.按需自动引入element-plus  推荐 总结 element-plus正是element-ui针对于vue3开发的一个UI组件库, 它的使用方式和很多其他的组件库是一样的,其他类似于ant-design-vue.NaiveUI.VantUI都是差不多的:安装element-plus 首先下载element-plus npm install element-plus 1.第一种方式,使用全局引入 引入element-plu

  • Vue3+Element-plus项目自动导入报错的解决方案

    目录 前言 安装步骤 1.安装插件 2.vue.config.js 设置 3.npm run serve 出错 解决方案 1.问题原因 1.1 unimport 包报错 1.2 node.js 和 npm 版本过低 2.解决方法 2.1 降低 unplugin-auto-import 插件版本 2.2 升级 node.js 和 npm 版本 补充:element-plus自动按需导入及出错解决 总结 前言 在创建 Vue3 + Element-plus 项目时,根据 Element-plus 文

  • 利用Vite搭建Vue3+ElementUI-Plus项目的全过程

    目录 创建项目 初始化项目 添加依赖并运行 添加路由 添加依赖 添加路由配置文件 在main.js中添加路由 添加Home页面进行测试 添加ElementUI-Plus 安装element-plus依赖 引入element-plus依赖 引入Element Icon 添加依赖 修改element的主题颜色 总结 本文主要记录使用Vite搭建一个Vue3+ElementUI-Plus,以及集成Vue Router的过程.本次搭建过程的Nodejs版本为 V16.14.2 创建项目 初始化项目 使用

  • vue3.0路由自动导入的方法实例

    一.前提 我们使用的是require.context方法导入,在vite创建的项目内使用会报错"require not found",所以必须用webpack创建项目.或者有大能可以说说vite怎么解决这个问题. 二.规则 我们使用的规则是,搜索src/views/路径下的所有目录和子目录,搜索文件名叫做"index.vue"的文件,使用上级目录的名字作为组件名,进行注册.结构如下: 和公共组件注册一样,我们只注册index.vue组件,其他名称的组件不进行注册.

  • 一个基于vue3+ts+vite项目搭建初探

    目录 前言 环境准备 使用Vite快捷搭建 使用npm 使用yarn 安装依赖 启动项目 修改vite配置文件 找到根目录vite.config.ts文件打开 集成路由 集成Vuex 添加element ui 集成axios 集成Sass Vue3 使用 总结 前言 基于Vue3已经成为默认版本,目前的项目暂时还没有使用过vue3开发和最近有一个全新的新项目的基础下,使用vue3开发项目,必然是未来的一个趋势 下面记录一下怎么使用Vue3 + ts + vite 从0开始搭建一个项目 环境准备

随机推荐