vsc 自定义快速生成vue模板

1.安装vscode

官网地址：https://code.visualstudio.com/

2.安装一个插件，识别vue文件

插件库中搜索Vetur，下图中的第一个，点击安装，安装完成之后点击重新加载

3.新建代码片段

文件-->首选项-->用户代码片段-->点击新建代码片段--取名vue.json 确定

4.删除不要的代码

5.粘入自己写的.vue模板

 {
     "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"
     }
 }

6.上面代码中的 "prefix": "vue", 就是快捷键；保存好之后，新建.vue结尾的文件试试

输入vue 按键盘的tab就行
注意：
这里直接保存文件就可以自动执行了。

自己写的模板可以按照自己需要的在里面添加就可以啦。