1.安装vscode
://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就行
注意:
这里直接保存文件就可以自动执行了。
自己写的模板可以按照自己需要的在里面添加就可以啦。