美文网首页
vscode快速新建vue页面模板

vscode快速新建vue页面模板

作者: 糖心儿的记录 | 来源:发表于2021-03-30 14:01 被阅读0次

1.需要一个插件来识别vue文件

插件库中输入vuter,install下载

2.设置自己的代码片段

3.输入以下代码
打开“文件”File —— “首选项Preferences ”——“户代码片段User Snippets”, 输入 vue,选择 vue.json ==> 在vue.json文件里填入:(注意: "prefix": "v",为自己设置的快捷键)

{

  "Print to console": {

      "prefix": "v",

      "body": [

          "<!-- $1 -->",

          "<template>",

          "<div class='$2'>$5</div>",

          "</template>",

          "",

          "<script>",

          "//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",

          "//例如:import 《组件名称》 from '《组件路径》';",

          "",

          "export default {",

          "components: {},",

          "data() {",

          "//这里存放数据",

          "return {",

          "",

          "};",

          "},",

          "computed: {},",

          "watch: {},",

          "//方法集合",

          "methods: {",

          "",

          "},",

          "created() {",

          "",

          "},",

          "mounted() {",

          "",

          "},",

          "}",

          "</script>",

          "<style lang='less' scoped>",

          "//@import url($3); 引入公共css类",

          "$4",

          "</style>"

      ],

      "description": "Log output to console"

  }

}

相关文章

  • vscode快速新建vue页面模板

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

  • vsCode 快速生成vue模板

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

  • 2021-08-05

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

  • Vscode新建vue模板

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

  • vsCode新建vue模板

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

  • 使用vscode,新建vue模板

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

  • VScode中自定义代码模板

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

  • vscode 快速生成.vue模板

    打开vscode,左下角设置-用户代码片段 输入vue.json打开该页面,输入 提示:"$0":是你生成代码后鼠...

  • VSCode 快速生成 Vue模板

    1.安装插件Vetur 2."File->Preferences->User Snippets"打开弹窗 3.选择...

  • VScode中Vue快速生成代码片段

    VScode中Vue快速生成代码片段 [VScode Vue tab 生成代码片段 ] 首先我们要找到设置(如下...

网友评论

      本文标题:vscode快速新建vue页面模板

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