1.安裝插件Vetur
2.新建用戶片段（.vue代碼模板)
在彈出的輸入框輸入：vue.json (如果沒有反應，那就嘗試只輸入“vue”) ，接着enter
3.將.vue模板粘貼到vue.json
{ "Print to console": { "prefix": "vue", "body": [ "<!-- $1 -->", "<template>", "<div class='$2'>$5</div>", "</template>", "", "<script>", "// 這里可以導入其他文件（比如：組件，工具js，第三方插件js，json文件，圖片文件等等）", "// 例如：import 《組件名稱》 from '《組件路徑》';", "", "export default {", "// import引入的組件需要注入到對象中才能使用", " components: {},", " data () {", "// 這里存放數據", " return {", "", " }", " },", "// 監聽屬性 類似於data概念", " computed: {},", "// 監控data中的數據變化", " watch: {},", "// 方法集合", " methods: {", "", " },", "// 生命周期 - 創建完成（可以訪問當前this實例）", " created () {", "", " },", "// 生命周期 - 掛載完成（可以訪問DOM元素）", " mounted () {", "", " },", " beforeCreate () {}, // 生命周期 - 創建之前", " beforeMount () {}, // 生命周期 - 掛載之前", " beforeUpdate () {}, // 生命周期 - 更新之前", " updated () {}, // 生命周期 - 更新之后", " beforeDestroy () {}, // 生命周期 - 銷毀之前", " destroyed () {}, // 生命周期 - 銷毀完成", " activated () {} // 如果頁面有keep-alive緩存功能，這個函數會觸發", "}", "</script>", "<style lang='scss' scoped>", "// @import url($3); 引入公共css類", "$4", "</style>" ], "description": "Log output to console" } }
4.怎么使用
在.vue的文件中輸入代碼：vue
生成的代碼如下👇
<!-- --> <template> <div class=''></div> </template> <script> // 這里可以導入其他文件（比如：組件，工具js，第三方插件js，json文件，圖片文件等等） // 例如：import 《組件名稱》 from '《組件路徑》'; export default { // import引入的組件需要注入到對象中才能使用 components: {}, data () { // 這里存放數據 return { } }, // 監聽屬性 類似於data概念 computed: {}, // 監控data中的數據變化 watch: {}, // 方法集合 methods: { }, // 生命周期 - 創建完成（可以訪問當前this實例） created () { }, // 生命周期 - 掛載完成（可以訪問DOM元素） mounted () { }, beforeCreate () {}, // 生命周期 - 創建之前 beforeMount () {}, // 生命周期 - 掛載之前 beforeUpdate () {}, // 生命周期 - 更新之前 updated () {}, // 生命周期 - 更新之后 beforeDestroy () {}, // 生命周期 - 銷毀之前 destroyed () {}, // 生命周期 - 銷毀完成 activated () {} // 如果頁面有keep-alive緩存功能，這個函數會觸發 } </script> <style lang='scss' scoped> // @import url(); 引入公共css類 </style>
說明: 1. vue.json 文件保存在：C:\Users\”自己計算機的用戶名“\AppData\Roaming\Code\User\snippets\vue.json
2.在.vue模板代碼中："prefix": "vue"，決定了通過“vue” 命令來生成模板代碼，這個可以自定義。