一键生成.vue模版

1,213 阅读2分钟

前言

对于写vue文件来说,就会有固定的模板。那么每个模板文件都差不多。我们需要一一添加。造成不必要的工作量,所以在这里分享一下快捷键模板。当然这篇分享对于熟悉且喜欢手写的朋友,小伙伴就当是看个热闹拓展知识。

一、新建模板配置文件vue.json

有三个方法,用哪个都行:

  • 使用快捷Ctrl + Shift + P唤出控制台,然后输入snippets并选择,输入 vue.json ,然后回车。

  • 文件>首选项>用户代码片断里面,输入 vue.json ,然后回车

  • file > Preferences > User Snippets,当弹出搜索框之后,输入 vue.json ,然后回车

二、更改模板内容

将vue.json文件替换以下模板内容(可根据个人需求修改当中的模板内容)

{
  // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and description. 
  // The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the same ids are connected.
  "Print to console": {
    "prefix": "vue",
    "body": [
      "<!-- xx页面$1 -->",
      "<template>",
      "  <div class='my_page'>",
      "    <el-container>",
      "      <el-header>Header</el-header>",
      "      <el-main>Main</el-main>",
      "      <el-footer>Footer</el-footer>",
      "    </el-container>",
      "  </div>",
      "</template>",
      "",
      "<script>",
      "// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",
      "// 例如:import 《组件名称》 from '《组件路径》'",
      "",
      "export default {",
      "  // import引入的组件需要注入到对象中才能使用",
      "  components: {},",
      "  data () {",
      "    // 这里存放数据",
      "    return {",
      "",
      "    }",
      "  },",
      "  // 监听属性 类似于data概念",
      "  computed: {},",
      "  // 监控data中的数据变化",
      "  watch: {},",
      "  // 生命周期 - 创建完成(可以访问当前this实例)",
      "  created () {",
      "",
      "  },",
      "  // 生命周期 - 挂载完成(可以访问DOM元素)",
      "  mounted () {",
      "",
      "  },",
      "  beforeCreate () { }, // 生命周期 - 创建之前",
      "  beforeMount () { }, // 生命周期 - 挂载之前",
      "  beforeUpdate () { }, // 生命周期 - 更新之前",
      "  updated () { }, // 生命周期 - 更新之后",
      "  beforeDestroy () { }, // 生命周期 - 销毁之前",
      "  destroyed () { }, // 生命周期 - 销毁完成",
      "  activated () { }, // 如果页面有keep-alive缓存功能,这个函数会触发",
      "  // 方法集合",
      "  methods: {",
      "",
      "  }",
      "}",
      "</script>",
      "",
      "<style lang='scss' scoped>",
      "//@import url($3); 引入公共css类",
      "$4",
      "</style>",
      ""
    ],
    "description": "Log output to console"
  }
}

本文使用 mdnice 排版