美文网首页
使用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模板

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

  • Vscode新建vue模板

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

  • vsCode新建vue模板

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

  • vsCode 快速生成vue模板

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

  • vscode快速新建vue页面模板

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

  • VScode中自定义代码模板

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

  • 2021-08-05

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

  • vscode 自定义vue 开发模板

    需求背景:提高开发效率,灵活使用vscode开发工具 方法步骤: 打开vue模板的配置文件vue.json 2.配...

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

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

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

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

网友评论

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

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