使用vscode快速建立vue模板过程详解


Posted in Javascript onOctober 10, 2019

当我们希望每次新建.vue文件后,vscode能够根据配置,自动生成我们想要的内容。

打开vscode编辑器,依次选择“文件 -> 首选项 -> 用户代码片段”,此时,会弹出一个搜索框,我们输入vue,将代码ctrl+c 到vue-html.json

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

保存后关闭这个文件。

稍稍解释一下:$0 表示你希望生成代码后光标的位置 ; prefix 表示生成对应预设代码的命令

例如:我们新建一个名为header.vue的文件,输入内容vue按下enter,就会自动生成内容.

使用vscode快速建立vue模板过程详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
从盛大通行证上摘下来的身份证验证js代码
Jan 11 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
js获取浏览器基本信息大全
Nov 27 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
AngularJS入门教程之REST和定制服务详解
Aug 19 Javascript
面试常见的js算法题
Mar 23 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
Apr 29 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
浅谈vue3中effect与computed的亲密关系
Oct 10 #Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 #Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 #Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 #Javascript
浅谈vue项目用到的mock数据接口的两种方式
Oct 09 #Javascript
Vue3.0数据响应式原理详解
Oct 09 #Javascript
Vue分页插件的前后端配置与使用
Oct 09 #Javascript
You might like
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
php 信息采集程序代码
2009/03/17 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
Python中title()方法的使用简介
2015/05/20 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
python查看FTP是否能连接成功的方法
2015/07/30 Python
Python如何判断数独是否合法
2016/09/08 Python
python中while和for的区别总结
2019/06/28 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
党政领导班子民主生活会整改措施
2014/09/18 职场文书
顶岗实习计划书
2015/01/16 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
2015双创工作总结
2015/07/24 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers
win sever 2022如何占用操作主机角色
2022/06/25 Servers