快捷導(dǎo)航

Vue3+Vite項(xiàng)目按需自動(dòng)導(dǎo)入配置以及一些常見問題修復(fù)

更新時(shí)間：2023年02月08日 10:52:24 作者：Sophie_U

Vite是一種新型前端構(gòu)建工具,能夠顯著提升前端開發(fā)體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于Vue3+Vite項(xiàng)目按需自動(dòng)導(dǎo)入配置以及一些常見問題修復(fù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、Vue API自動(dòng)導(dǎo)入

解決的問題：避免在每個(gè)vue組件中都重復(fù)性的去聲明ref,reactive等。如下：

import {ref, reactive} from 'vue' // 配置自動(dòng)導(dǎo)入，用來省略這句手動(dòng)引入 
const test = ref('aaaa')

1.1 配置unplugin-auto-import

具體配置：

安裝vite插件：unplugin-auto-import

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      // 自動(dòng)導(dǎo)入 Vue 相關(guān)函數(shù)，如：ref, reactive, toRef 等
      imports: ['vue'],
    }),
  ],
});

1.2 可能遇到ts,eslint不識(shí)別而導(dǎo)入報(bào)錯(cuò)的問題

1、typescript 報(bào)錯(cuò)：'reactive' is not defined.

原因：TS未識(shí)別到vue api,沒有相應(yīng)的模塊聲明文件

處理：在vite中配置并生成auto-imports.d.ts ，并在tsconfig.json中引入

// vite.config.js
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      // 自動(dòng)導(dǎo)入 Vue 相關(guān)函數(shù)，如：ref, reactive, toRef 等
      imports: ['vue'],
      // 生成自動(dòng)導(dǎo)入的TS聲明文件
       dts: "/auto-import.d.ts", 
    }),
  ],
});

tsconfig.json

{
	 "include": [
	    "src/**/*.d.ts",
	    "./*.d.ts",
	    "./auto-imports.d.ts" // 導(dǎo)入上一步生成的配置文件
	  ],
}

2、eslint不識(shí)別報(bào)錯(cuò) error 'reactive' is not defined no-undef

原因：未配置自動(dòng)導(dǎo)入相應(yīng)的eslint規(guī)則
處理：通過autoimport中的配置生成對(duì)應(yīng).eslintrc-auto-import.json配置文件，并在.eslintrc中引入

// vite.config.js  
{
	// ......
	 AutoImport({
      imports: ["vue"],
      resolvers: [ElementPlusResolver()],
      dts: "/auto-import.d.ts",
      eslintrc: {
        enabled: true,  // 1、改為true用于生成eslint配置。2、生成后改回false，避免重復(fù)生成消耗
      },
    }),
}

 extends: [
    //....此處活力之前配置.
    "./.eslintrc-auto-import.json",
  ],

1.3 配置src/component目錄下的組件自動(dòng)引入

在頁面組件中，不用手動(dòng)導(dǎo)入組件，直接使用組件的方式：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      // 自動(dòng)導(dǎo)入 Vue 相關(guān)函數(shù)，如：ref, reactive, toRef 等
      imports: ['vue'],
    }),
	Components({
      // 指定自動(dòng)導(dǎo)入的組件位置，默認(rèn)是 src/components
       dirs: ['src/components','src/otherComponents'],
    }),
  ],
});

二、按需引入U(xiǎn)I組件庫（antd,element-plus）

2.1、按需引入element-plus

官方文檔很清晰，用到unplugin-vue-components 和 unplugin-auto-import這兩款插件

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
    // 自動(dòng)導(dǎo)入element相關(guān)函數(shù)，如：ElMessage, ElMessageBox..
      resolvers: [ElementPlusResolver()],
    }),
    Components({
    // 自動(dòng)導(dǎo)入element相關(guān)組件
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

2.2 ant-design-vue 按需引入

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        AntDesignVueResolver(),
      ],
    }),
  ]
})

2.3 自動(dòng)導(dǎo)入 Element Plus Icon

element-plus 圖標(biāo)是用 svg 渲染的，需要額外的導(dǎo)入方法。官方文檔對(duì)于icons也有相應(yīng)說明。

安裝額外插件：npm install -D unplugin-icons
配置自動(dòng)導(dǎo)入

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [
        // ....
        // 自動(dòng)導(dǎo)入圖標(biāo)組件
        IconsResolver({
          prefix: 'Icon',
        }),
      ],
    }),
    Components({
      resolvers: [
 		// .....
        // 自動(dòng)注冊(cè)圖標(biāo)組件
        IconsResolver({
          enabledCollections: ['ep'], //@iconify-json/ep 是 Element Plus 的圖標(biāo)庫，所以 IconsResolver 配置了 enabledCollections: ['ep']
        }),
      ],
    }),
    Icons({
      autoInstall: true,
    }),
  ],
});

注意：通過此方法自動(dòng)引入后，使用icon時(shí)，請(qǐng)采用以下方式才生效。（添加i-eq作為icon前綴）

<el-icon :size="70" color="#409EFC" class="no-inherit">
 <i-ep-share />
</el-icon>

三、關(guān)于配置文件

unplugin-auto-import會(huì)默認(rèn)在要目錄生成auto-imports.d.ts文件，unplugin-vue-components對(duì)應(yīng)會(huì)在根目錄生成components.d.ts文件，分別描述自動(dòng)導(dǎo)入的 API、component。通過在tsconfig.json的include中引入對(duì)應(yīng)配置文件，避免TS報(bào)錯(cuò)。

AutoImport({
  // ...
  // 配置文件生成位置，默認(rèn)是根目錄 /auto-imports.d.ts
  // dts: './auto-imports.d.ts',
}),
Components({
  // ...
  // 配置文件生成位置，默認(rèn)是根目錄 /components.d.ts
  // dts: './components.d.ts',
}),

總結(jié)

到此這篇關(guān)于Vue3+Vite項(xiàng)目按需自動(dòng)導(dǎo)入配置以及一些常見問題修復(fù)的文章就介紹到這了,更多相關(guān)Vue3 Vite項(xiàng)目按需自動(dòng)導(dǎo)入配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: