使用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 相关文章推荐
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
js清空form表单中的内容示例
May 20 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 Javascript
微信小程序背景音乐开发详解
Dec 12 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
教你IIS6的PHP最佳配置方法
2006/09/05 PHP
PHP中替换换行符的几种方法小结
2012/10/15 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
python中的常量和变量代码详解
2018/07/25 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
Python 导入文件过程图解
2019/10/15 Python
python中property和setter装饰器用法
2019/12/19 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
python脚本和网页有何区别
2020/07/02 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
出纳试用期自我鉴定
2014/04/07 职场文书
经济贸易系求职信
2014/08/04 职场文书
销售顾问工作计划书
2014/08/15 职场文书
政风行风整改方案
2014/10/25 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
Python+DeOldify实现老照片上色功能
2022/06/21 Python