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” 命令来生成模板代码,这个可以自定义。

 

posted @ 2020-12-29 10:22  渊渟岳  阅读(474)  评论(0编辑  收藏  举报