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天然的迭代器
Oct 29 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
浅谈React 服务器端渲染的使用
May 08 Javascript
详解vue-router 初始化时做了什么
Jun 11 Javascript
Javascript类型判断相关例题及解析
Aug 26 Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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
用php实现选择排序的解决方法
2013/05/04 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
改版了网上的一个js操作userdata
2007/04/27 Javascript
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
javascript 表单的友好用户体现
2009/01/07 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
小程序实现分类页
2019/07/12 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
python字符串替换示例
2014/04/24 Python
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
Python温度转换实例分析
2018/01/17 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
python获取txt文件词向量过程详解
2019/07/05 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
C语言面试题
2013/05/19 面试题
计算机专业推荐信范文
2013/11/20 职场文书
社区食品安全实施方案
2014/03/28 职场文书
离职报告范文
2014/11/04 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android