使用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学习之闭包分析
Dec 02 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
vue v-on监听事件详解
May 17 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
swiper动态改变滑动内容的实现方法
Jan 17 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 Javascript
浅谈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
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
python执行外部程序的常用方法小结
2015/03/21 Python
python实现rsa加密实例详解
2017/07/19 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
python Tornado框架的使用示例
2020/10/19 Python
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
特此通知格式
2015/04/27 职场文书
本科毕业答辩开场白
2015/05/27 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
中学教师教学工作总结
2015/08/13 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js