使用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 相关文章推荐
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 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
动易数据转成dedecms的php程序
2007/04/07 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
收集json解析的四种方法分享
2014/01/17 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
python redis 删除key脚本的实例
2019/02/19 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
使用Python实现批量ping操作方法
2020/05/06 Python
Pycharm2020.1安装无法启动问题即设置中文插件的方法
2020/08/07 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
普通员工辞职信
2014/01/17 职场文书
逃课上网检讨书
2014/02/20 职场文书
工商干部先进事迹
2014/05/14 职场文书
公司门卫工作职责
2014/06/28 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
2014年物流工作总结
2014/11/25 职场文书
期末复习计划
2015/01/19 职场文书
清洁工个人总结
2015/03/04 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
Redis分布式锁Redlock的实现
2021/08/07 Redis
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js