vue是一個非常流行的JavaScript框架，在使用vue的開發過程中，好的構建系統可以提高開發效率和代碼可維護性。而Grunt則是一個JavaScript任務管理工具，可以使你更輕松地完成JavaScript構建過程。

在使用vue時，我們可以使用Grunt來執行一些常見任務，例如編譯sass文件、打包JavaScript文件、壓縮圖片等。下面我們來看一個使用Grunt編譯vue應用的例子。

module.exports = function(grunt) {
// 項目配置
grunt.initConfig({
// 讀取package.json
pkg: grunt.file.readJSON('package.json'),
// 編譯sass文件
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'dist/styles.css': 'src/styles.scss'
}
}
},
// 打包JavaScript文件
browserify: {
dist: {
files: {
'dist/app.js': ['src/main.js']
}
}
},
// 壓縮圖片
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'src/images/',
src: ['**/*.{png,jpg,gif}'],
dest: 'dist/images/'
}]
}
},
// 監聽文件變化
watch: {
sass: {
files: ['src/**/*.scss'],
tasks: ['sass']
},
browserify: {
files: ['src/**/*.js', 'src/**/*.vue'],
tasks: ['browserify']
},
imagemin: {
files: ['src/images/**/*.{png,jpg,gif}'],
tasks: ['imagemin']
}
}
});
// 加載Grunt插件
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-watch');
// 注冊Grunt任務
grunt.registerTask('default', ['sass', 'browserify', 'imagemin', 'watch']);
};

在上面的示例中，我們使用了grunt-contrib-sass、grunt-browserify、grunt-contrib-imagemin和grunt-contrib-watch這些Grunt插件。其中，grunt-contrib-watch的作用是監聽文件變化并執行相應任務，這樣我們在開發時就可以實時預覽修改后的頁面。

當我們在命令行界面執行grunt命令時，它將會執行我們在Gruntfile.js文件中注冊的所有任務。在上面的示例中，我們注冊了一個名為default的任務，并將sass、browserify、imagemin和watch這四個任務作為default任務的依賴。

上面僅是一個示例，實際使用中我們可能需要根據自己的項目需求添加或修改相應的任務。不過，在理解了以上示例后，配置其他任務也就變得非常簡單了。