前端VUE页面快速生成

Posted 2020-12-17 liuyuexue520

VSCode左下角设置图标  ==>  用户代码片段  ==>  搜索 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.
    // Example:
    // "Print to console": {
    //     "prefix": "log",
    //     "body": [
    //         "console.log(‘$1‘);",
    //         "$2"
    //     ],
    //     "description": "Log output to console"
    // }
    "Print to console": {
        "prefix": "vue",
        "body": [
        "<template>"
        "  <div>代码片段生成</div>"
        "</template>"
        ""
        "<script>"
        "export default {"
        "  data: function() {"
        "    return {}"
        "  },"
        "  methods: {},"
        "  created() {}"
        "}"
        "</script>"
        ""
        "<style lang=‘less‘ scoped>"
        "</style>"
        ""
        ],
        "description": "vue模板一键生成"
    }
}

保存

 

然后任何的vue 文件中都能通过 vue 指令 一键生成页面所需的vue模板

空页面第一次打没有提示的话, 是你的电脑速度不行, 等2s钟, 删除 从新打, 就会出 vue 提示

生成的模板如下

<template>
  <div>代码片段生成</div>
</template>

<script>
export default {
  data: function() {
    return {};
  },
  methods: {},
  created() {}
};
</script>

<style lang=‘less‘ scoped>
</style>

style 需要注意以下, 如果项目中 生成的是 app.vue , 需要删除 scoped , 不然 定义的全局样式 不会生效 , 也可以通过 main.js 中单独引入一个css 文件

使用的预编译 是 less 如果需要写 原生的 css 代码, 请删除 lang = ‘less‘ , 不然 也会报错

 

关于 vue 格式化 函数前没有空格 , 函数结尾会生成 分号, 或者单双引号的问题, 请看

https://www.cnblogs.com/liuyuexue520/p/13099714.html