VSCode 编写vue项目之一键生成.vue模版

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>

vue模板代码

说明: 1. vue.json 文件保存在：C:\Users\”自己计算机的用户名“\AppData\Roaming\Code\User\snippets\vue.json

2.在.vue模板代码中："prefix": "vue"，决定了通过“vue” 命令来生成模板代码，这个可以自定义。