Rollup是一個Javascript模塊打包器，它將你的編寫的模塊打包成符合ES模塊規范的單個文件。Vue是一種流行的Javascript庫，它用于構建交互性的用戶界面。由于Vue是以模塊的形式進行編寫的，因此Rollup非常適合用于編譯Vue應用程序。

以下是編譯Vue應用程序所需的步驟：

// 安裝Rollup和相關插件npm install rollup rollup-plugin-vue rollup-plugin-babel @babel/preset-env --save-dev

Rollup使用插件來處理不同類型的模塊和轉換。我們需要安裝兩個插件“rollup-plugin-vue”和“rollup-plugin-babel”。

// 編寫rollup.config.js文件
import vue from 'rollup-plugin-vue';import babel from 'rollup-plugin-babel';
export default {  input: 'src/main.js',  output: {    file: 'dist/bundle.js',    format: 'es'  },  plugins: [    vue(),    babel({      presets: ['@babel/preset-env']    })  ]};

使用rollup.config.js文件配置Rollup以編譯Vue應用程序。在此配置中，我們通過“rollup-plugin-vue”插件處理Vue單文件組件，并使用“rollup-plugin-babel”插件轉換ES6及更高版本的代碼。

現在，我們可以編寫Vue單文件組件了。以下是一個示例組件：

<!-- HelloWorld.vue文件 -->
<template>  <div>    {{ msg }}  </div></template>
<script>  export default {    data() {      return {        msg: 'Hello World!'      }    }  };</script>
<style>  /* 樣式 */</style>

將Vue組件導入到應用程序的入口文件（main.js）中。以下是main.js文件的示例內容：

// main.jsx文件import HelloWorld from './components/HelloWorld.vue';
new Vue({  render: h =>h(HelloWorld)}).$mount('#app');

使用Rollup編譯Vue應用程序后，您將獲得一個用于在現代瀏覽器中運行的優化的Javascript代碼文件。使用此文件，您可以在網頁或Web應用程序中使用Vue框架。