在Vue中，一個組件通常是定義在一個.vue文件中的。.vue文件可以包含三部分：模板(template)、腳本(script)和樣式(style)。其中模板部分是HTML代碼，腳本部分是JavaScript代碼，而樣式部分則是CSS代碼。在Vue中，使用單文件組件(Single-File Component)的方式可以更好地組織代碼，提高代碼的可讀性。

在.vue文件中，通過template標簽定義模板部分的HTML代碼，通過script標簽定義腳本部分的JavaScript代碼，通過style標簽定義樣式部分的CSS代碼。需要注意的是，腳本部分的代碼必須導出一個Vue組件，通常可以使用export default語法實現。

<template>
<div>
<h1>Hello, Vue!</h1>
</div>
</template>
<script>
export default {
name: 'HelloVue'
}
</script>
<style>
h1 {
color: red;
}
</style>

在使用Vue CLI創建項目時，會默認安裝一些必要的模塊和插件，包括vue-loader、css-loader和babel-loader等。這些插件可以使得我們在開發時可以編寫類似于常規HTML、JavaScript和CSS的代碼，而在打包時會自動轉換成瀏覽器可執行的代碼。

在使用Vue CLI創建項目之后，可以通過vue serve命令來啟動本地開發服務器，通過vue build命令來打包項目。這些命令可以在package.json文件中的scripts字段中進行配置。

"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}

需要注意的是，在代碼中使用$emit來觸發一個自定義事件時，需要使用kebab-case命名法。也就是說，事件名稱中必須使用短橫線-作為分隔符。例如：

// 子組件中觸發事件
this.$emit('my-event', data)
// 父組件中監聽事件
<child-component @my-event="handleMyEvent"></child-component>

在.vue文件中，可以使用Vue的各種特性和語法，例如：條件渲染、列表渲染、計算屬性、過濾器、生命周期鉤子、組件通信等。Vue提供的這些特性能夠幫助我們更加方便地實現業務邏輯和UI交互效果。

總的來說，在Vue中使用.vue文件進行開發可以更好地組織代碼、提高代碼的可讀性和可維護性。同時，Vue也提供了豐富的API和特性，使得我們可以快速、高效地開發出高質量的Web應用程序。