Vue.js是一款流行的JavaScript框架，HBuilder是一款專為Vue.js開發者打造的IDE開發工具。在HBuilder中，你可以使用.vue文件來編寫Vue.js組件，并且在此文件中同時包含模板、腳本和樣式的代碼。

在一個.vue文件中，HTML模板存放在<template>標簽中，Vue.js的腳本邏輯存放在<script>標簽中，CSS樣式存放在<style>標簽中。以下是一個簡單的Vue.js組件的.vue文件代碼示例：

<template>
<div class="hello">
{{ message }}
</div>
</template>
<script>
export default {
data () {
return {
message: 'Hello, world!'
}
}
}
</script>
<style>
.hello {
font-size: 24px;
color: #333;
}
</style>

在上面的示例中，<template>標簽中定義了組件的模板，這個模板將會被渲染到頁面上。在<script>標簽中定義了Vue.js組件的腳本邏輯，包括數據、方法等。在<style>標簽中定義了組件的樣式。

在HBuilder中，你可以通過右鍵菜單或者頂部菜單欄中的“新建”按鈕來創建.vue文件，創建好文件之后，你可以在其中以HTML、CSS和JavaScript的形式編寫Vue.js組件的所有代碼。同時，HBuilder為Vue.js開發者提供了許多實用的功能，如代碼提示、代碼自動補全、語法檢查和調試等。在使用HBuilder進行Vue.js開發時，簡單易用的.vue文件讓開發變得輕松愉快。