前端VUE页面快速生成

Posted liuyuexue520

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端VUE页面快速生成相关的知识,希望对你有一定的参考价值。

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

以上是关于前端VUE页面快速生成的主要内容,如果未能解决你的问题,请参考以下文章

前端开发工具vscode如何快速生成代码片段

VS Code配置snippets代码片段快速生成html模板,提高前端编写效率

vscode之快速生成vue模板

前端工程化Vue-cli

《分布式微服务电商》专题-电商项目前端Vue模块化开发

SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建前端篇快速生成后端代码封装结果集增删改查模糊查找毕设基础框架