Vue3自動引入組件與組件庫的方法實例

Posted on by

前言

在做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自動引入組件 組件庫內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：