快速生成Vue2或者vue3模板

1.点击文件，再点击首选项，然后选择用户片段；

2.在弹出来的输入框中，选择第一行vue.json或者第二行新建全局代码片段文件都可，都是为了打开vue.json文件；

3.把下面代码复制到vue.json文件里，然后保存。

{"Print to console": {"prefix": "vue","body": ["<template>","  <div>\n","  </div>","</template>","<script>","export default {","  name: 'APP',","  data () {","    return {","    }","  },","  methods: {","  },","  created () {","  },","  mounted () {","  },","}","</script>","<style lang=\"scss\" scoped>\n","</style>","$2"],"description": "Log output to console"}
}

4.需要创建新的vue页面时，输入vue，然后回车即可快速生成基础的vue页面

5.如果想要快速生成vue3的代码，只需要把第3步的代码换成如下即可：

{"Print to console": {"prefix": "vue","body": ["<template>","  <div class=\"container\">\n","  </div>","</template>","<script>","import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'","export default {","  name: 'App',","  setup () {","",// "    console.log('1-开始创建组件-setup')",// "    const data = reactive({})",// "    onBeforeMount(() => {",// "      console.log('2.组件挂载页面之前执行----onBeforeMount')",// "    })",// "    onMounted(() => {",// "      console.log('3.-组件挂载到页面之后执行-------onMounted')",// "    })",// "    return {",// "      ...toRefs(data),",// "    }","  },","}","","</script>","<style lang=\"scss\" scoped>\n","</style>",""],"description": "Log output to console"}
}

6.如果想给div设置一个默认的类名可以这样写：" <div class=\"container\">",想要有换行样式的话加上\n：" <div class=\"container\">\n"。

7.如果想让name显示的名字和文件名相同，只需要把name那行改为

" name: '$TM_FILENAME_BASE',",

7.上面的代码有的在紧接着引号后面空了两格，目的就是为了在生成vue页面的时候，直接生成隔行空两个字符的规范代码格式。

快速生成Vue2或者vue3模板相关推荐

Vs code如何快速生成Verilog例化模板
问题描述用过很多种编辑器,Vs code对与Verilog的语法支持,以及Vivado关联都是目前我最满意的. 也是我用过安装插件最方便的一款软件,最关键的是它不需要破解,直接在官网下载正版,安装即 ...
vue文件快速生成模板代码
vue文件快速生成模板代码输入 vue 按 tab 键
php lmpl,tjx-cold: 用于根据配置模板，快速生成controller,service,serviceimpl 代码
用于根据配置模板,快速生成controller,service,serviceimpl 代码(交流群 623169994 ) 为什么要开发这款插件市面上有很多基于数据库生成代码的工具,但是我自己的工 ...
如何在 IntelliJ IDEA 中快速生成 JavaDoc 注释模板
如何在 IntelliJ IDEA 中快速生成 JavaDoc 注释模板此博客存在上一个版本,如果读者对笔者以前版本的博客依然感兴趣,可以访问此链接:https://blog.csdn.net/wa ...
T4模板：MVC中用T4模板快速生成代码
T4模板快速生成代码: 以快速生Dal文件为例,下面为T4模板文件的内容 <#@ template debug="false" hostspecific="true ...
html5代码自动生成,vs code中设置html5 快速生成模板
按英文的!和h:5都可以快速生成html模板,但是找了半天都找不到如何修改模板设置.只好自己从snippets里重新编写了一个html5的模板,以免自己以后忘了. 首先打开 snippets 然后输入 ...
VSCode快速生成HTML基础模板--输入！一键快捷生成--无法自动生成的解决办法
操作很简单:输入英文感叹号!,并按[tab键]即可快速生成HTML模板即可. 但在此之前,我们要准备什么,确保生效呢? 有很多伙伴反应,输入!,VScode并没有反应.接下来,让我们一起解决这个问题. ...
gvim 模板（ab命令快速生成常用Verilog模板）
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.模板制作方法二.使用步骤总结前言 gvim在编写Verilog代码时通过预先设定的模板可以快速生成特定代码模 ...
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
目录一.VueJS是什么? 二.Vue的优缺点三.MVVM 数据双向绑定四.Vue的安装和使用五.Vue模板语法-文本渲染六.常用的vue的指令一.VueJS是什么? 它是一个轻量级MVV ...

快速生成Vue2或者vue3模板

快速生成Vue2或者vue3模板相关推荐

最新文章

热门文章