sun
在個人網站的前端開發中，Vue.js是一個非常流行的JavaScript框架，它提供了高效且可組合的View層邏輯和資料綁定功能。然而，隨著專案的規模擴大，我們可能會遇到許多第三方UI元件庫或內建的Vue元件，這些元件通常以不同的格式分發，如npm包、單獨的檔案或是CDN資源。為了更方便地使用和管理這些元件，「unplugin-vue-components」這個插件應運而生。以下將詳細介紹如何安裝和使用這款插件來提升我們的開發效率。
安裝 unplugin-vue-components
首先，您需要在您的專案中安裝 `@unocss/preset-mini` 和 `unplugin-vue-components`。您可以使用 npm 命令進行安裝:
npm install @unocss/preset-mini unplugin-vue-components -D
或者，如果您偏好 yarn，您可以這樣做:
yarn add @unocss/preset-mini unplugin-vue-components --dev
在 Vite 中配置插件
接下來，您需要將 `unplugin-vue-components` 添加到您的 Vite 的 `plugins` 設定中。以下是您可以在 `vite.config.ts` 中使用的範例設定:
// vite.config.ts
import { defineConfig } from 'vite';
import UnoCSS from '@unocss/vite';
import Components, { presets } from 'unplugin-vue-components';
import { VitePreset } from '@unocss/preset-mini';
export default defineConfig({
plugins: [
UnoCSS(), // UnoCSS plugin
Components({
direcotry: ['node_modules', 'src/components'], // 搜尋元件的路徑清單
deep: true, // 是否深入子目錄找尋元件
globalName: 'SFCs', // 全域變數名稱 (預設為 "components")
resolvers: [
presets.elementPlus(), // Element Plus 元件解析器
presets.windicss(), // Windi CSS 元件解析器
presets.antDesign({ alias: 'Antd' }), // Ant Design of Vue 元件解析器
],
}),
],
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "~@/styles/variables.scss" as var;`,
},
},
},
});
在上述設定中，我們指定了兩個搜索元件的路徑：`node_modules` 和 `src/components`。`deep` 選項設置爲 `true` 表示插件會遞歸遍歷子目錄來查找組件。`globalName` 是可選的，用於設置全局變量名稱。`resolvers` 數組包含了一些預設解析器，這些解析器可以幫助我們正確加載像 Element Plus、Windi CSS 和 Ant Design 等流行庫中的組件。
在 Rollup 中配置插件
如果你在使用 Rollup 而不是 Vite，你可以按照以下的步驟來配置 `unplugin-vue-components`:
1. 安裝插件：
npm i unplugin-vue-components -D
2. 配置 Rollup：
在你的 `rollup.config.js` 文件中加入以下配置：
import resolve from 'rollup-plugin-resolve';
import commonjs from 'rollup-plugin-commonjs';
import builtins from 'rollup-plugin-node-builtins';
import progress from 'rollup-plugin-progress';
import replace from 'rollup-plugin-replace';
import typescript from '@rollup/plugin-typescript';
import dts from 'rollup-plugin-dts';
import svelte from 'rollup-plugin-svelte';
import css from 'rollup-plugin-css-only';
import postcss from 'postcss';
import autoprefixer from 'autoprefixer';
import pkg from './package.json';
import copy from 'rollup-plugin-copy';
import { terser } from 'rollup-plugin-terser';
import json from '@rollup/plugin-json';
import nodePolyfills from 'rollup-plugin-node-polyfills';
import visualizer from 'rollup-plugin-visualizer';
const production = !process.env.ROLLUP_WATCH;
const plugins = [
resolve(),
commonjs(),
builtins(),
progress({ clearLine: false }),
replace({
__VERSION__: JSON.stringify(pkg.version),
}),
typescript({
exclude: ['docs/**/*.tsx', 'test/**/*.ts'],
}),
json(),
nodePolyfills(),
svelte({
compilerOptions: {
hydratable: true,
},
}),
css({ output: 'bundle.css' }),
postcss({
plugins: [
autoprefixer({ overrideBrowserslist: ['last 4 versions'] }),
],
}),
copy({
targets: [
{ src: 'static', dest: 'dist' },
{ src: 'public', dest: 'dist' },
],
}),
visualizer({ filename: 'stats/summary.html' }),
];
if (production) {
plugins.push(terser());
}
function serve() {
let startedServer = null;
return {
writeBundle() {
if (startedServer == null) {
startedServer = require('http').createServer((req, res) => {
res.end(`<script src="/build/bundle.js"></script>\n`);
}).listen(3000);
console.log('> Serving on http://localhost:3000');
}
},
close() {
if (startedServer != null) {
startedServer.close();
startedServer = null;
}
},
};
}
export default [
// Browser bundle with sourcemap and type declarations for external use
{
input: 'main.js',
output: {
sourcemap: true,
format: 'esm',
dir: 'dist/es',
},
plugins: [
...plugins,
serve(),
],
},
// Browser UMD bundle without sourcemaps or type declarations
// For bundlers like Webpack / Parcel to consume
{
input: 'main.js',
output: {
name: 'App',
file: pkg.browser,
format: 'umd',
sourcemap: !production,
},
plugins: [
...plugins,
replace({ __DEV__: JSON.stringify(!production) }),
],
},
// TypeScript definitions
{
input: 'types/index.d.ts',
output: { file: pkg.module + '.d.ts', format: 'es' },
plugins: [dts()],
},
];
3. 使用插件：
在你的 `main.js` 或其他入口點引入 `unplugin-vue-components`：
// main.js
import components from 'unplugin-vue-components/vite';
import { presetUno } from '@unocss/preset-uno';
import { presetElementPlus } from 'unplugin-vue-components/presets';
export const createApp = () => {
const app = createApp(App);
app.use(store);
app.mount('#app');
// Use the plugin
app.use(components({
direcotry: ['node_modules', 'src/components'], // 搜尋元件的路徑清單
deep: true, // 是否深入子目錄找尋元件
globalName: 'SFCs', // 全域變數名稱 (預設為 "components")
resolvers: [
presetUno(), // UnoCSS 元件解析器
presetElementPlus(), // Element Plus 元件解析器
],
}));
return app;
};
總結
透過「unplugin-vue-components」插件，我們可以輕鬆地在Vue.js應用程式中整合各種第三方元件庫以及自訂的元件，無需擔心不同格式的元件如何正確加載的問題。這大大簡化了前端開發的工作流程，提升了開發效率。無論是在小型還是大型專案中，該插件都是一個強大的助手。
