Vue3自动引入组件与组件库的方法实例

更新时间：2022年10月29日 12:04:53 作者：海海呐

关于vue 组件还是非常好用的,真正掌握预计需要一段时间,下面这篇文章主要给大家介绍了关于Vue3自动引入组件与组件库的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

前言

在做vue3项目中时，每次使用都需要先进行引入，用ts的还好，会有爆红提示，如果是使用js开发的很多时候都会等到编译的时候才发现哪里哪里又没有引入，就会很浪费时间，偶然发现一款好用的组件可以帮助我们很好的解决这种问题。

首先下载

安装

yarn add unplugin-auto-import -D

引入

在vite.config.ts中

因为是插件所以在我们的plugins下写入我们导入的名字

imports

在我们的 AutoImport 下第一个属性 imports 代表着的就是我们那些文件需要自动导入

我们这里就写了vue vue-router pinia 在项目中使用的时候就可以不用我们手动导入直接使用了

这里注意我们的imports 是一个数组

dts

第二个属性就是我们的dts

dts为true就代表着会自动生成一个ts文件可以查看导入的信息。

include

这里include是可以匹配对应的文件

是一个数组里面写匹配的正则

引入

在引入的时候需要引入unplugin-auto-import下的vite

import AutoImport from 'unplugin-auto-import/vite'
 plugins: [vue(),Vuejsx(),
    AutoImport({
      include: [
        /\.[tj]sx?$/,
        /\.vue$/,
        /\.vue\?vue/,
      ],
      dts: true,
      imports: ['vue', 'vue-router', 'pinia']
    })]

然后在页面使用

会发现爆红，这里是因为在当前页面没有引用导致，（这就是这个组件使用ts的缺陷还没找到解决办法）不用管它直接运行项目

运行不会有报错

发现会在src同级目录下自动生成一个同级文件 auto-imports.d.ts

打开会发现里面有我们各种的导入

到这里我们的引入就完成了。

自动引入组件库

安装

yarn add unplugin-vue-components -D

下载ant-design测试

npm i --save ant-design-vue

在vite.config.ts中引入

import Components from 'unplugin-vue-components/vite'

在引入import { } from 'unplugin-vue-components/resolvers' ctry加鼠标进入resolvers.d.ts

里面有各大主流组件库的名字找到我们需要引入的组件库 ant -design（需要配置其他的组件库可找对应组件库名）

找到并引入 AntDesignVueResolver

import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

首先也需要在plugins中引入我们定义的名字 Components

Components（{}）

是一个对象

dts

第一个参数跟上面一样设置为true也是会自动生成一个d.ts的文件

dirs

第二个参数就是dirs就是配置你的目录，你可以设置src,或者src/componets或者你需要配置的地方的组件让他自动导入，其他的组件不管

extensions

扩展属性

['vue', 'jsx', 'tsx', 'ts', 'js'],

resolvers

最后这个resolvers就是我们的包自动导入

将我们上面引入的AntDesignVueResolver导进来进行配置

resolvers: [
AntDesignVueResolver({
})
]

 Components({
      dts: true,
      dirs: ['src/components'],
      extensions: ['vue', 'jsx', 'tsx', 'ts', 'js'],
      resolvers: [
        AntDesignVueResolver({
        })
      ]
    })

AntDesignVueResolver

importStyle

就是AntDesignVueResolver第一个参数可以设置我们的less预处理器

importLess

需要设置为true开启

这里的操作配置就相当于引入的包以less的方式导入，

这里支持less 就需要将less也在项目中配置

CSS配置less

下载less less-loader

yarn add less less-loader -D

在preprocessorOptions中配置less，因为是主要讲自动安装，这里配置就不详细讲了

  css: {
    // https://cn.vitejs.dev/config/#css-preprocessoroptions
    preprocessorOptions: {
      less: {
        modifyVars: {
          // 此处也可设置直角、边框色、字体大小等
          'primary-color': '#27ba9b'
        },
        javascriptEnabled: true,
        lessOptions: {
          javascriptEnabled: true
        },
      },
    },
  },

在app.vue中导入一个button

<script setup lang="ts">
const msg = ref<string>("");
</script>
 
<template>
  <input type="text" v-model="msg" />
  {{ msg }}
  <a-button type="primary">Primary Button</a-button>
</template>

运行

自动生成components.d.ts文件

里面就是组件帮助我们自动创建的，这里创建的子组件也不需要引入即可使用

可以发现我们的HellowWord没有引入也可以在页面中使用，就是因为在components.d.ts中已经自动导入了。

看到这里有没有马上在项目中使用的想法呢？

好啦，到这里我们的Vue3自动引入组件，组件库就完成了。

最后附上完整代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Vuejsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
server:{
    open:true,
    port:8080,
    host:'localhost',
    headers: {
    'Access-Control-Allow-Origin':'*',
},
// 配置代理
 
  },
  css: {
    // https://cn.vitejs.dev/config/#css-preprocessoroptions
    preprocessorOptions: {
      less: {
        modifyVars: {
          // 此处也可设置直角、边框色、字体大小等
          'primary-color': '#27ba9b'
        },
        javascriptEnabled: true,
        lessOptions: {
          javascriptEnabled: true
        },
      },
    },
  },
plugins: [vue(),Vuejsx(),
    AutoImport({
      include: [
        /\.[tj]sx?$/,
        /\.vue$/,
        /\.vue\?vue/,
      ],
      dts: true,
      imports: ['vue', 'vue-router', 'pinia']
    }),
    Components({
      dts: true,
      dirs: ['src/components'],
      extensions: ['vue', 'jsx', 'tsx', 'ts', 'js'],
      resolvers: [
        AntDesignVueResolver({
          importStyle: 'less',
          importLess: true
        })
      ]
    })]
})

总结

到此这篇关于Vue3自动引入组件与组件库的文章就介绍到这了,更多相关Vue3自动引入组件组件库内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

一文详细分析Vue3中的emit用法(子传父)
Emit是Vue3中另一种常见的组件间传值方式,它通过在子组件中触发事件并将数据通过事件参数传递给父组件来实现数据传递,这篇文章主要给大家介绍了关于详细分析Vue3中emit用法(子传父)的相关资料,需要的朋友可以参考下
2024-05-05
mpvue中配置vuex并持久化到本地Storage图文教程解析
这篇文章主要介绍了mpvue中配置vuex并持久化到本地Storage的教程详解,# 配置vuex和在vue中相同，只是mpvue有一个坑，就是不能直接在new Vue的时候传入store。本文分步骤给大家介绍的非常详细，需要的朋友参考下吧
2018-03-03
vue中 this.$set的用法详解
这篇文章主要介绍了vue中 this.$set的用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
intellij idea+vue前端调试配置图文教程
在Vue项目开发过程中,当遇到应用逻辑出现错误,但又无法准确定位的时候,知晓Vue项目调试技巧至关重要,debug是必备技能,这篇文章主要给大家介绍了关于intellij idea+vue前端调试配置的相关资料,需要的朋友可以参考下
2024-09-09
vue模板语法-插值详解
这篇文章主要介绍了vue模板语法-插值，非常不错，具有参考借鉴价值，需要的朋友参考下
2017-03-03
vue-cli安装使用流程步骤详解
这篇文章主要介绍了 vue-cli安装使用流程,本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-11-11
详解如何实现一个简单的 vuex
本篇文章主要介绍了如何实现一个简单的 vuex，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
Vue实现图片预览功能的详细指南
在现代 web 应用程序中,图片预览功能提升了用户体验,使用户可以在上传图片之前查看图片内容,本文将详细介绍如何在 Vue.js 应用中实现图片预览功能,包括基本实现、进阶功能、与 Element UI 的集成、常见优化技巧以及与其他库的结合使用,需要的朋友可以参考下
2024-09-09
Vue使用watch同时监听多个值的实现方法示例
这篇文章主要为大家介绍了Vue中使用watch同时监听多个值的实现方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
vuejs响应用户事件（如点击事件）
本篇文章主要介绍了vuejs响应用户事件（如点击），通过vuejs响应用户事件的技巧，具有一定的参考价值，有兴趣的小伙伴们可以参考一下。
2017-03-03