美文网首页
使用vscode,新建vue模板

使用vscode,新建vue模板

作者: ifredom1 | 来源:发表于2018-06-08 14:48 被阅读22次

    第一步: 新建模板并保存

    文件 --> 首选项 --> 用户代码片段 --> 输入vue,选择vue.json -->复制 第三步中的模板内容中内容保存

    第二步: 添加配置,让vscode允许自定义的代码片段提示出来

    文件 --> 首选项 --> 设置 ---> 添加这2项

    {
    "editor.snippetSuggestions": "top",
    "editor.formatOnPaste": true
    }

    第三步: 复制以下代码,保存重启vscode

    {
    "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">",
    "</style>",
    "$2"
    ],
    "description": "Log output to console"
    }
    }

    第四步:测试是否添加成功

    测试方法: 新建vue后缀文件,输入vue,按下tab键,OK

    缺点是:无法像sublime一样,新建一个vue文件就可以自动带上对应的模板。

    吐槽一下:webstorm中,中文输入法兼容有问题,据传是Microsoft .NET Framework 4.5.2以上版本的兼容问题,更换多次版本后无法修复。无奈只能换到vscode

    相关文章

      网友评论

          本文标题:使用vscode,新建vue模板

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