Rollup 是一款 JavaScript 的打包工具，可以將多個 JS 文件打包成一個文件，它可以很好地與現代前端框架一起使用，例如 Vue。

Vue 是一個流行的前端框架，用于構建用戶界面，具有輕量、高效、易學等特點。Vue 組件是 Vue 元素的組合，并提供了可復用的代碼塊和模塊化開發。使用 Rollup 打包 Vue 組件可以減少文件大小，提高代碼執行效率。

import vue from 'rollup-plugin-vue';
import babel from 'rollup-plugin-babel';
export default {
input: 'src/main.vue', // main.vue 為組件入口文件
output: {
file: 'dist/bundle.js',
format: 'iife',
name: 'MyComponent'
},
plugins: [
vue(),
babel({
exclude: 'node_modules/**'
})
]
};

使用 Rollup 打包 Vue 組件，需要在配置文件中添加 rollup-plugin-vue 和 rollup-plugin-babel 插件。

rollup-plugin-vue 支持在 Rollup 中使用 .vue 文件，將其轉成 ES6 模塊輸出，支持 Template 與 Style 標簽以及 babel 轉義。

rollup-plugin-babel 將 ES6 代碼轉為 ES5 代碼，以支持不支持 ES6 語法的瀏覽器。

打包完成后，通過在 HTML 頁面中引入打包后的 bundle.js，就可以使用組件了。