美文网首页Web Developer
Vscode新建vue模板

Vscode新建vue模板

作者: 夏夏夏夏顿天 | 来源:发表于2018-07-24 16:23 被阅读0次

每次都需要写入相同的东西,很麻烦,可以利用vscode用户代码片段,然后提高效率

第一部

image.png

在用户代码片段搜索vue,在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 class=\"page\">\n",
            "  </div>",
            "</template>\n",
            "<script type=\"text/ecmascript-6\">",
            "  export default {",
            "    data () {",
            "      return {\n",
            "      }",
            "    },",
            "    components: {\n",
            "    }",
            "  }",
            "</script>\n",
            "<style scoped lang=\"stylus\" rel=\"stylesheet/stylus\">\n",
            " ",
            "</style>",
            "$2"
        ],
        "description": "Log output to console"
    }
}

保存好

第二步

新建vue文件

在文件内输入vue,就有提示

QQ20180724-162211-HD.gif

个人微信号:2817062995
欢迎交流,记得加我备注:简书哦

相关文章

  • Vscode新建vue模板

    每次都需要写入相同的东西,很麻烦,可以利用vscode用户代码片段,然后提高效率 第一部 在用户代码片段搜索vue...

  • vsCode新建vue模板

    1,shift+ctrl+X打开扩展工具,在搜索框搜索vetur,下载vetur插件,安装并重启; 4,新建一个v...

  • vsCode 快速生成vue模板

    vsCode 快速生成vue模板 ### 1、vsCode 快速生成vue模板 ```json /** * 到插件...

  • 使用vscode,新建vue模板

    第一步: 新建模板并保存 文件 --> 首选项 --> 用户代码片段 --> 输入vue,选择vue.json ...

  • vscode快速新建vue页面模板

    1.需要一个插件来识别vue文件 插件库中输入vuter,install下载 2.设置自己的代码片段 3.输入以下...

  • VScode中自定义代码模板

    每次新建文件总是要重新写一遍初始模板,所以自己配置下,避免重复劳动 前提: Mac + VScode + Vue项...

  • 2021-08-05

    vscode中快速生成vue模板 1.安装插件 在插件库搜索vetur,然后点击安装。如下图 2.新建代码片段 点...

  • VSCode新建vue文件自定义模板

    背景 每次新建一个vue文件!都要重行敲打一遍template。script。style。神烦!有没有和别的编辑器...

  • vue cli3+typescript 项目(配置篇)

    环境 系统:window10node\npm版本: 已安装vue-cli3 vue版本: 工具:vscode 新建...

  • Vue3+TS Day02 - 基础指令 Mustache、v-

    一、Vue 模板语法 1、如何在 vscode 中添加代码片段? 2、什么是模板语法? 3、Mustache 双大...

网友评论

    本文标题:Vscode新建vue模板

    本文链接:https://www.haomeiwen.com/subject/gehymftx.html