VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法

 更新时间:2020年04月17日 11:12:29   作者:HwH6543  
这篇文章主要介绍了VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

1. 安装一个插件,识别vue文件

插件库中搜索Vetur,下图中的第一个,点击安装,安装完成之后点击重新加载

2.新建代码片段

文件–>首选项–>用户代码片段–>点击新建代码片段–取名vue.json 确定

3.粘贴入自己写的.vue模板

{
 "Print to console": {
 "prefix": "vue",
 "body": [
  "<!-- $1 -->",
  "<template>",
  "<div class='$2'>$5</div>",
  "</template>",
  "",
  "<script>",
  "",
  "export default {",
  "components: {},",
  "data() {",
  "return {",
  "",
  "}",
  "},",
  "computed: {},",
  "watch: {},",
  "methods: {",
  "",
  "},",
  "created() {",
  "",
  "},",
  "mounted() {",
  "",
  "},",
  "}",
  "</script>",
  "<style lang='scss' scoped>",
  "$4",
  "</style>"
 ],
 "description": "Log output to console"
 }
}

4.上面代码中的 “prefix”: “vue”, 就是快捷键;保存好之后,新建.vue结尾的文件

输入vue 按键盘的tab

输入vue 按键盘的tab
完成!

补充:

vscode之快速生成vue模板的配置

在vscode中点击左下角的设置---用户代码片段---输入:vue.json,将以下代码复制保存,然后新建.vue文件,输入:vue,回车即可。可按需自行添加内容。

{
  "Print to console": {
    "prefix": "vue",
    "body": [
      "<template>",
      " <div>",
      "  $0",
      " </div>",
      "</template>",
      "",
      "<script>",
      "",
      " export default {",
      "  name:'',",
      "  props:[''],",
      "  data () {",
      "   return {",
      "",
      "   };",
      "  },",
      "",
      "  components: {},",
      "",
      "  computed: {},",
      "",
      "  beforeMount() {},",
      "",
      "  mounted() {},",
      "",
      "  methods: {},",
      "",
      "  watch: {}",
      "",
      " }",
      "",
      "</script>",
      "<style lang='' scoped>",
      "",
      "</style>"
    ],
    "description": "Log output to console"
  }
}

总结

到此这篇关于VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法的文章就介绍到这了,更多相关VSCode 生成vue模板内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue-element中el-input输入卡顿问题的解决

    Vue-element中el-input输入卡顿问题的解决

    这篇文章主要介绍了Vue-element中el-input输入卡顿问题的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 基于Vue+ECharts实现地图展示与交互

    基于Vue+ECharts实现地图展示与交互

    这篇文章中,我将逐步介绍如何使用 Vue 和 ECharts 实现一个互动式的地图展示组件,其中支持返回上一层地图、点击查看不同城市的详细信息,以及根据数据动态展示不同的统计信息,感兴趣的小伙伴跟着小编一起来看看吧
    2025-02-02
  • 一个手写的vue放大镜效果

    一个手写的vue放大镜效果

    这篇文章主要介绍了一个手写的vue放大镜,组件使用less,文中给出了示例代码,需要的朋友可以参考下
    2019-08-08
  • Vue分页插件的前后端配置与使用

    Vue分页插件的前后端配置与使用

    这篇文章主要为大家详细介绍了Vue分页插件的前后端配置与使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • vue-cli如何快速构建vue项目

    vue-cli如何快速构建vue项目

    本篇文章主要介绍了vue-cli如何快速构建vue项目,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • vue中echarts3.0自适应的方法

    vue中echarts3.0自适应的方法

    这篇文章主要介绍了vue中echarts3.0自适应,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • Vuex利用state保存新闻数据实例

    Vuex利用state保存新闻数据实例

    本篇文章主要介绍了Vuex利用state保存新闻数据实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Vue实现全选多个选择框

    Vue实现全选多个选择框

    使用v-model绑定布尔变量实现全选功能:定义数组存储状态,使用v-for循环渲染选择框,绑定状态;添加全选复选框,绑定布尔变量;使用watch监听全选复选框状态变化,更新数组中每一项的状态
    2025-01-01
  • Element Table 自适应高度的实现示例

    Element Table 自适应高度的实现示例

    el-table的高度不能适应不同电脑的分辨率,也不能跟随浏览器的高度变化而变化的问题,本文就来解决一下Element Table 自适应高度,感兴趣的可以了解一下
    2024-07-07
  • Vue.js集成Word实现在线编辑功能

    Vue.js集成Word实现在线编辑功能

    在现代Web应用中,集成文档编辑功能变得越来越常见,特别是在协作环境中,能够直接在Web应用内编辑Word文档可以极大地提高工作效率,本文将详细介绍如何在Vue.js项目中集成Word在线编辑功能,需要的朋友可以参考下
    2024-08-08

最新评论