對于vue開發者來說，使用高效的開發工具可以提高開發效率，atom是目前非常流行的一款跨平臺文本編輯器，而在使用atom編輯vue組件時，atom vue補全插件可以讓我們更快捷地編寫代碼。
使用前需要安裝atom vue補全插件，可以在atom插件商店中直接搜索安裝，也可以通過在終端輸入apm install vue-autocomplete來安裝。
安裝完成后，重啟atom編輯器，打開vue組件文件，當輸入vue組件特有的標簽（如template、script、style等）時，插件會自動提示補全選項，并通過縮進格式化代碼：
<template>
<div></div>
</template>
<script>
export default {
name: '',
data () {
return {
}
}
}
</script>
<style>
</style>當需要在組件中使用vue的指令、組件、過濾器等時，只需要在對應的標簽屬性中輸入“v-”或“@”，插件也會自動提示補全選項：
<template>
<div v-if="show" @click="" :class="">除此之外，當我們需要引入組件庫、第三方模塊時，插件也可以為我們提供自動補全選項。例如，當我們引入element-ui庫，并在組件中使用其中的組件時，插件可以自動提示我們庫中組件的使用方式：
<template>
<el-button @click="">按鈕</el-button>
</template>
<script>
import { Button } from 'element-ui'
export default {
components: {
'el-button': Button
}
}
</script>總的來說，atom vue補全插件可以幫助我們快速編寫vue組件代碼，提高開發效率，同時也可以避免手誤和拼寫錯誤所帶來的不必要的麻煩。
上一篇atom vue模板
下一篇dw框架代碼html