1.安裝vscode
官網地址：https://code.visualstudio.com/
2.安裝一個插件，識別vue文件
插件庫中搜索Vetur，下圖中的第一個，點擊安裝，安裝完成之后點擊重新加載
3.新建代碼片段
文件-->首選項-->用戶代碼片段-->點擊新建代碼片段--取名vue.json 確定
4.刪除不要的代碼
5.粘入自己寫的.vue模板
1 { 2 "Print to console": { 3 "prefix": "vue", 4 "body": [ 5 "<!-- $1 -->", 6 "<template>", 7 "<div class='$2'>$5</div>", 8 "</template>", 9 "", 10 "<script>", 11 "//這里可以導入其他文件（比如：組件，工具js，第三方插件js，json文件，圖片文件等等）", 12 "//例如：import 《組件名稱》 from '《組件路徑》';", 13 "", 14 "export default {", 15 "//import引入的組件需要注入到對象中才能使用", 16 "components: {},", 17 "data() {", 18 "//這里存放數據", 19 "return {", 20 "", 21 "};", 22 "},", 23 "//監聽屬性 類似於data概念", 24 "computed: {},", 25 "//監控data中的數據變化", 26 "watch: {},", 27 "//方法集合", 28 "methods: {", 29 "", 30 "},", 31 "//生命周期 - 創建完成（可以訪問當前this實例）", 32 "created() {", 33 "", 34 "},", 35 "//生命周期 - 掛載完成（可以訪問DOM元素）", 36 "mounted() {", 37 "", 38 "},", 39 "beforeCreate() {}, //生命周期 - 創建之前", 40 "beforeMount() {}, //生命周期 - 掛載之前", 41 "beforeUpdate() {}, //生命周期 - 更新之前", 42 "updated() {}, //生命周期 - 更新之后", 43 "beforeDestroy() {}, //生命周期 - 銷毀之前", 44 "destroyed() {}, //生命周期 - 銷毀完成", 45 "activated() {}, //如果頁面有keep-alive緩存功能，這個函數會觸發", 46 "}", 47 "</script>", 48 "<style lang='scss' scoped>", 49 "//@import url($3); 引入公共css類", 50 "$4", 51 "</style>" 52 ], 53 "description": "Log output to console" 54 } 55 }
6.上面代碼中的 "prefix": "vue", 就是快捷鍵；保存好之后，新建.vue結尾的文件試試
輸入vue 按鍵盤的tab就行
注意：
這里直接保存文件就可以自動執行了。
自己寫的模板可以按照自己需要的在里面添加就可以啦。