观点碰撞--Zoomla!逐浪CMS官方博客

在vscode中创建自定义代码模并支持vue cli开发

作者:Q葩小玉 发布时间:2020-01-01 来源:佚名 点击数: 分享网址

Q葩小玉

博主:Q葩小玉
个人座右铭:你想过普通的生活 就会遇到普通的挫折 你想过上最好的生活 就一定会遇上最强的伤害 这世界很公平 你想要最好 就一定会给你最痛~

使用vs code

vs code真香,很多编译器都是基于vs code再开发。
在这埋在有一些vs code的使用技巧:
http://code.z01.com/doc/vscode.html

有人说,vs code创建文件,没有模板,不好用。
其实vs code是带模板的,其模板原理不是创建时选择,而是建立好文件后,用关键字来激活引用。

创建vue cli模板

.vue文件,大家知道,是用来支持vue开发的,本期教程就从这里开始。
一招鲜,吃遍天,学会了这个在Vscode中快速创建自定义代码模板的教程,我相信创建其它代码模板的方法你也就通个七七八八了。

1.选择菜单里的 文件 > 首选项 > 用户代码片段

进入配置
英文版环境

2.选择你需要自定义模板的文件,以vue为例

选择vue.json创建

3. 配置对应文件json

把代码片段写在json里。每个代码段都是在一个代码片段名称下定义的,并且有prefix、body和description。prefix是用来触发代码片段的。使用 $1,$2 等指定光标位置,这些数字指定了光标跳转的顺序,$0表示最终光标位置。
body则是模板的内容,其中$1,$2,$3表示光标出现的位置,$1为光标首先出现的位置,$2为按下一次TAB键后出现的位置,然后依次类推。而$0表示光标最后出现的位置。

{
  "vue-template": {
    "prefix": "vue",
    "body": [
      "<template>",
      "  <div class=\"$1\">",
      "",
      "  </div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  name: '$1',",
      "  data() { ",
      "    return {",
      "",
      "    }",
      "  }",
      " }",
      "</script>",
      "",
      "<style lang=\"\" scoped>",
      "  .$1{",
      "",
      "  }",
      "</style>"

    ],
    "description": "my vue template"
  }
}

使用时,只要在.vue文件第一行输入vue根据提示按回车就可以展开了,如下图:
展开vue自定义模板

必要的解释

为了防止大家更改模板时出现不必要的错误,我给大家简单说一下模板中的东西:

  • 不要纠结一开头写的:”vue”,这只是一个模板名字而已,你也可以完写成:fage。
  • “prefix”: “”这里规定的是触发模板的关键词,我这里规定触发词为vue。
  • 我们的模板都是在”body”:[]中编写的。
  • 每一行模板代码都要用双引号””来包括。
  • 如果双引号包括的代码中间也出现了双引号,那么需要用转义字符\转义。
  • \n意味着换行,\t是制表符,这两个用于生成时模板的缩进,让生成出来的模板便于阅读。
  • 模板中出现的$1代表着光标,它的位置即光标的默认位置,可以有多个光标:$2,$3,$4等。
  • “description”:””双引号包括的是对模板描述,同时也是你在.html页面输入触发词后,智能提示中出现的对触发词的解释。
  • 千万别把Vscode中html.json文件自带的{}覆盖了,只需覆盖注释部分,或直接写到注释下面即可。

逐浪CMS发哥的用法

作为Bootstrap中文站的支持者,发哥在开发中,使用了bootstrapVue插件,所以我就想建立一个带bootstrapVue语法提示的模板,方便开发时提升效率,避免每次去看文档很麻烦,所以我建立了一个这样的模板,大家如果喜欢直接拷过去就行了:


{
    "Print to console": {
            "prefix": "vue",
            "body": [
                    "<template>",
                    "<div class=\"$1\">",
                    "<b-container fluid=\"xl\" class=\"\">",
                    "   <b-row>",
                    "   <b-col md=\"4\" offset=\"2\">left test",
                    "   </b-col>",
                    "   <b-col md=\"6\">right test",
                    "   </b-col>",
                    "   </b-row>",
                    "</b-container>",
                    "",
                    "",
                    "<!-- 其它BootstrapVue模板语法:",
                    "   <b-img src=\"../assets/images/caifu_hero.png\" alt=\"\"></b-img>",
                    "",
                    "   <b-button variant=\"danger\">Button</b-button>",
                    "",
                    "   <b-form-input v-model=\"text\" placeholder=\"Enter your name\"></b-form-input>",
                    "",
                    "   <b-navbar toggleable=\"lg\" type=\"dark\" variant=\"info\">",
                    "   <b-navbar-brand href=\"#\">NavBar</b-navbar-brand>",
                    "   <b-navbar-toggle target=\"nav-collapse\"></b-navbar-toggle>",
                    "   <b-collapse id=\"nav-collapse\" is-nav>",
                    "       <b-navbar-nav>",
                    "       <b-nav-item href=\"#\">Link</b-nav-item>",
                    "       <b-nav-item href=\"#\" disabled>Disabled</b-nav-item>",
                    "       </b-navbar-nav>",
                    "       <b-navbar-nav class=\"ml-auto\">",
                    "       <b-nav-form>",
                    "       <b-form-input size=\"sm\" class=\"mr-sm-2\" placeholder=\"Search\"></b-form-input>",
                    "       <b-button size=\"sm\" class=\"my-2 my-sm-0\" type=\"submit\">Search</b-button>",
                    "      </b-nav-form>",
                    "      <b-nav-item-dropdown text=\"Lang\" right>",
                    "          <b-dropdown-item href=\"#\">EN</b-dropdown-item>",
                    "          <b-dropdown-item href=\"#\">CN</b-dropdown-item>",
                    "      </b-nav-item-dropdown>",
                    "      <b-nav-item-dropdown right>",
                    "          <template v-slot:button-content>",
                    "          <em>User</em>",
                    "          </template>",
                    "          <b-dropdown-item href=\"#\">Profile</b-dropdown-item>",
                    "          <b-dropdown-item href=\"#\">Sign Out</b-dropdown-item>",
                    "      </b-nav-item-dropdown>",
                    "      </b-navbar-nav>",
                    "   </b-collapse>",
                    "   </b-navbar>",
                    "更多技巧详见 http://code.z01.com/doc/vue.html",
                    " -->",
                    "",
                    "</div>",
                    "</template>",
                    "<script>",
                    "export default {",
                    "  name: \"$1\",",
                    "  data(){",
                    "    return {}",
                    "  },",
                    "  components: {},",
                    "  created(){},",
                    "  mounted(){},",
                    "  methods: {}",
                    "}",
                    "</script>",
                    "<style lang='scss' scoped>",
                    "</style>",
            ],
            "description": "Log output to console"
    }
}

这面这个模板,在使用时最后输出是这样的形式:

<template>
<div class="">
<b-container fluid="xl" class="">
   <b-row>
   <b-col md="4" offset="2">left test
   </b-col>
   <b-col md="6">right test
   </b-col>
   </b-row>
</b-container>


<!-- 其它BootstrapVue模板语法:
   <b-img src="../assets/images/caifu_hero.png" alt=""></b-img>

   <b-button variant="danger">Button</b-button>

   <b-form-input v-model="text" placeholder="Enter your name"></b-form-input>

   <b-navbar toggleable="lg" type="dark" variant="info">
   <b-navbar-brand href="#">NavBar</b-navbar-brand>
   <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
   <b-collapse id="nav-collapse" is-nav>
       <b-navbar-nav>
       <b-nav-item href="#">Link</b-nav-item>
       <b-nav-item href="#" disabled>Disabled</b-nav-item>
       </b-navbar-nav>
       <b-navbar-nav class="ml-auto">
       <b-nav-form>
       <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
       <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
      </b-nav-form>
      <b-nav-item-dropdown text="Lang" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">CN</b-dropdown-item>
      </b-nav-item-dropdown>
      <b-nav-item-dropdown right>
          <template v-slot:button-content>
          <em>User</em>
          </template>
          <b-dropdown-item href="#">Profile</b-dropdown-item>
          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
      </b-nav-item-dropdown>
      </b-navbar-nav>
   </b-collapse>
   </b-navbar>
更多技巧详见 http://code.z01.com/doc/vue.html
 -->

</div>
</template>
<script>
export default {
  name: "",
  data(){
    return {}
  },
  components: {},
  created(){},
  mounted(){},
  methods: {}
}
</script>
<style lang='scss' scoped>
</style>

显然,有了注释和提示就更加方便开发啦。

扩展知识

如果要支持bootstrapVue,你可在使用下面命令就行:

npm install vue bootstrap-vue bootstrap

中文手册:http://code.z01.com/bootstrap-vue/

另外,如果你想获得我的完整开发包资料,可以访问下面地址:
www.z01.com/mb
https://github.com/zoomla/ZoomlaCMS-Vuecli-Portal001
https://github.com/zoomla/ZoomlaCMS-VueCli-Portal002

我们会动态更新。

以上就是Vscode中快速创建自定义代码模板的教程了,如果有不懂的问题,欢迎评论。




本文责任编辑:  加入会员收藏夹 点此参与评论>>

进一步意向对[在vscode中创建自定义代码模并支持vue cli开发]这条信息感兴趣吗?您还可以点此联系我们以确定进一步意向。
当前网址:
复制本网址-发给QQ/微信上的朋友
上一篇文章:笨难朴丑-专注研发做中国互联网的鲁班(写在逐浪软件上海研发中心成立10周年之际) 下一篇文章:摩尔定律不死,它也未曾凋零

+什么是CMS

CMS(Content Management System)是网站内容管理系统简称, 互联网上每个网站(无论大小门户)其后台都由专业CMS系统支撑- Zoomla!逐浪CMS作为国内高端CMS与WEB应用典范,首创第3代CMS理念,专注底层核心技术研发,以云技术、创新精神构建行业新成就,提供从网站内核到电商、办公、移动一体化的开发体验!

7×24小时服务热线 021-50391046 技术支持:13177777714
©Copyright 2003- 逐浪软件z01.com版权所有 All rights reserved
经营许可证号:工商3601002021063 沪ICP备09077823号 沪公网安备31011502000316号
本网站基于®Zoomla!逐浪CMS内核开发

ISO9001国际认证企业 CSDN外包TOP资质 鉴赏MTV电广视告 7×24小时全天候贴心服务 社会征信网