Vue3自動引入元件與元件庫的方法範例

2022-10-30 14:00:04

前言

在做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
        })
      ]
    })]
})