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


Posted in Javascript onApril 17, 2020

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

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

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

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

补充:

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模板内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript arguments 传递给函数的隐含参数
Aug 21 Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 #Javascript
如何基于filter实现网站整体变灰功能
Apr 17 #Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 #Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 #Javascript
vue制作抓娃娃机的示例代码
Apr 17 #Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 #Javascript
tracking.js实现前端人脸识别功能
Apr 16 #Javascript
You might like
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
基于Asp.net与Javascript控制的日期控件
2010/05/22 Javascript
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
基于python实现百度翻译功能
2019/05/09 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
如何利用Python 进行边缘检测
2020/10/14 Python
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
KTV的创业计划书范文
2014/02/02 职场文书
六一儿童节活动总结
2014/08/27 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
地道战观后感2000字
2015/06/04 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL