快捷導(dǎo)航

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

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

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

前言

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

首先下載

安裝

yarn add unplugin-auto-import -D

引入

在vite.config.ts中

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

imports

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

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

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

dts

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

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

include

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

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

引入

在引入的時(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']
    })]

然后在頁面使用

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

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

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

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

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

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

安裝

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加鼠標(biāo)進(jìn)入resolvers.d.ts

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

找到并引入 AntDesignVueResolver

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

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

Components（{}）

是一個(gè)對象

dts

第一個(gè)參數(shù)跟上面一樣設(shè)置為true也是會自動(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)來進(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開啟

這里的操作配置就相當(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沒有引入也可以在頁面中使用，就是因?yàn)樵赾omponents.d.ts中已經(jīng)自動(dòng)導(dǎo)入了。

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

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

最后附上完整代碼

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