快捷導(dǎo)航

Vue3自動(dòng)引入組件與組件庫(kù)的方法實(shí)例

更新時(shí)間：2022年10月29日 12:04:53 作者：海海吶

關(guān)于vue?組件還是非常好用的,真正掌握預(yù)計(jì)需要一段時(shí)間,下面這篇文章主要給大家介紹了關(guān)于Vue3自動(dòng)引入組件與組件庫(kù)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在做vue3項(xiàng)目中時(shí)，每次使用都需要先進(jìn)行引入，用ts的還好，會(huì)有爆紅提示，如果是使用js開(kāi)發(fā)的很多時(shí)候都會(huì)等到編譯的時(shí)候才發(fā)現(xiàn)哪里哪里又沒(méi)有引入，就會(huì)很浪費(fèi)時(shí)間，偶然發(fā)現(xiàn)一款好用的組件可以幫助我們很好的解決這種問(wèn)題。

首先下載

安裝

yarn add unplugin-auto-import -D

引入

在vite.config.ts中

因?yàn)槭遣寮?所以在我們的plugins下寫(xiě)入我們導(dǎo)入的名字

imports

在我們的 AutoImport 下第一個(gè)屬性 imports 代表著的就是我們那些文件需要自動(dòng)導(dǎo)入

我們這里就寫(xiě)了vue vue-router pinia 在項(xiàng)目中使用的時(shí)候就可以不用我們手動(dòng)導(dǎo)入直接使用了

這里注意我們的imports 是一個(gè)數(shù)組

dts

第二個(gè)屬性就是我們的dts

dts為true就代表著會(huì)自動(dòng)生成一個(gè)ts文件可以查看導(dǎo)入的信息。

include

這里include是可以匹配對(duì)應(yīng)的文件

是一個(gè)數(shù)組里面寫(xiě)匹配的正則

引入

在引入的時(shí)候需要引入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']
    })]

然后在頁(yè)面使用

會(huì)發(fā)現(xiàn)爆紅，這里是因?yàn)樵诋?dāng)前頁(yè)面沒(méi)有引用導(dǎo)致，（這就是這個(gè)組件使用ts的缺陷還沒(méi)找到解決辦法）不用管它直接運(yùn)行項(xiàng)目

運(yùn)行不會(huì)有報(bào)錯(cuò)

發(fā)現(xiàn)會(huì)在src同級(jí)目錄下自動(dòng)生成一個(gè)同級(jí)文件 auto-imports.d.ts

打開(kāi)會(huì)發(fā)現(xiàn)里面有我們各種的導(dǎo)入

到這里我們的引入就完成了。

自動(dòng)引入組件庫(kù)

安裝

yarn add unplugin-vue-components -D

下載ant-design測(cè)試

npm i --save ant-design-vue

在vite.config.ts中引入

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

在引入import { } from 'unplugin-vue-components/resolvers' ctry加鼠標(biāo)進(jìn)入resolvers.d.ts

里面有各大主流組件庫(kù)的名字找到我們需要引入的組件庫(kù) ant -design（需要配置其他的組件庫(kù)可找對(duì)應(yīng)組件庫(kù)名）

找到并引入 AntDesignVueResolver

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

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

Components（{}）

是一個(gè)對(duì)象

dts

第一個(gè)參數(shù)跟上面一樣設(shè)置為true也是會(huì)自動(dòng)生成一個(gè)d.ts的文件

dirs

第二個(gè)參數(shù)就是dirs就是配置你的目錄，你可以設(shè)置src,或者src/componets或者你需要配置的地方的組件讓他自動(dòng)導(dǎo)入，其他的組件不管

extensions

擴(kuò)展屬性

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

resolvers

最后這個(gè)resolvers就是我們的包自動(dòng)導(dǎo)入

將我們上面引入的AntDesignVueResolver導(dǎo)進(jìn)來(lái)進(jìn)行配置

resolvers: [
AntDesignVueResolver({
})
]

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

AntDesignVueResolver

importStyle

就是AntDesignVueResolver第一個(gè)參數(shù) 可以設(shè)置我們的less預(yù)處理器

importLess

需要設(shè)置為true開(kāi)啟

這里的操作配置就相當(dāng)于引入的包以less的方式導(dǎo)入，

這里支持less 就需要將less也在項(xiàng)目中配置

CSS配置less

下載less less-loader

yarn add less less-loader -D

在preprocessorOptions中配置less，因?yàn)槭侵饕v自動(dòng)安裝，這里配置就不詳細(xì)講了

  css: {
    // https://cn.vitejs.dev/config/#css-preprocessoroptions
    preprocessorOptions: {
      less: {
        modifyVars: {
          // 此處也可設(shè)置直角、邊框色、字體大小等
          'primary-color': '#27ba9b'
        },
        javascriptEnabled: true,
        lessOptions: {
          javascriptEnabled: true
        },
      },
    },
  },

在app.vue中導(dǎo)入一個(gè)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>

運(yùn)行

自動(dòng)生成components.d.ts文件

里面就是組件幫助我們自動(dòng)創(chuàng)建的，這里創(chuàng)建的子組件也不需要引入即可使用

可以發(fā)現(xiàn)我們的HellowWord沒(méi)有引入也可以在頁(yè)面中使用，就是因?yàn)樵赾omponents.d.ts中已經(jīng)自動(dòng)導(dǎo)入了。

看到這里有沒(méi)有馬上在項(xiàng)目中使用的想法呢？

好啦，到這里我們的Vue3自動(dòng)引入組件，組件庫(kù)就完成了。

最后附上完整代碼

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: {
          // 此處也可設(shè)置直角、邊框色、字體大小等
          '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
        })
      ]
    })]
})