vscode生成vue模板快捷键_VSCode一键生成.vue模版
安装Vetur插件Vetur插件可以识别vue文件,如下图所示
打开插件管理
搜索到插件点击安装即可
创建自己的模板找到配置文件!
中文:文件->首选项->用户代码片段->选择vue.json确定
英文:Code->Preferences->User Snippets
设置菜单
搜索直接贴代码
{
// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1')",
"$2"
],
"description": "Log output to console"
},
"Create VUE template": {
"prefix": "vue",
"body": [
"",
"
" ",
" $1",
" ",
"
",
"",
"",
"
"// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",
"import PageHeaderLayout from '@/layouts/PageHeaderLayout'",
"import ApeDrawer from '@/components/ApeDrawer'",
"import ModalDialog from '@/components/ModalDialog'",
"import ApeUploader from '@/components/ApeUploader'",
"import ApeEditor from '@/components/ApeEditor' ",
"import { mapGetters } from 'vuex'",
"",
"export default {",
" components: {",
" PageHeaderLayout,",
" ApeDrawer,",
" ModalDialog,",
" ApeUploader,",
" ApeEditor",
" },",
" // 定义属性",
" data() {",
" return {",
" $2",
" }",
" },",
" // 计算属性,会监听依赖属性值随之变化",
" computed: {",
" ...mapGetters(['userPermissions','buttonType'])",
" },",
" // 监控data中的数据变化",
" watch: {},",
" // 方法集合",
" methods: {",
" $3",
" },",
" // 生命周期 - 创建完成(可以访问当前this实例)",
" created() {",
" $4",
" },",
" // 生命周期 - 挂载完成(可以访问DOM元素)",
" mounted() {",
" $5",
" },",
" beforeCreate() {}, // 生命周期 - 创建之前",
" beforeMount() {}, // 生命周期 - 挂载之前",
" beforeUpdate() {}, // 生命周期 - 更新之前",
" updated() {}, // 生命周期 - 更新之后",
" beforeDestroy() {}, // 生命周期 - 销毁之前",
" destroyed() {}, // 生命周期 - 销毁完成",
" activated() {}, // 如果页面有keep-alive缓存功能,这个函数会触发",
"}",
"",
"",
"
" $6",
""
],
"description": "Create VUE template"
}
}说重点"Print to console"、"Create VUE template"`就是起了一个名字(key),就是说可以定义很多规则让自己的开发速度坐上火箭!
prefix,很重要,快捷标签。在新建的vue文件用输入它,并选择回车后,自己定义的结构就生成了,不。
body,这个非常重要,就是生成的结构内容了,直接导致你的火箭速度。
$1,$2,$3……,这是是啥呢,就是你快捷生成结构后,光标所在的位置,当然肯定是在1位置。在我们定义结构后肯定个有些地方时要修改或者增加你内容你的,但是移动鼠标/触摸板去找到这些位置这是我们习惯的用法。有了上面的定义,直接TAB键,就会依次准备定位到了该位置。神速……4. 总结没啥好总结,去飞吧!
HyperfCMS 是基于 Swoole Hyperf VUE Element UI Ant Design 设计标准 Ant Design Pro 样式参考 实现的高性能(PHP协程、PHP微服务)、高灵活性、前后端分离(后台),具有简单大气设计的CMS系统。
vscode生成vue模板快捷键_VSCode一键生成.vue模版相关推荐
- vscode生成vue模板快捷键_VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法...
1. 安装一个插件,识别vue文件 2.新建代码片段 文件–>首选项–>用户代码片段–>点击新建代码片段–取名vue.json 确定 3.粘贴入自己写的.vue模板 { " ...
- 可以一键生成crud的php框架,一键生成CRUD - FastAdmin框架文档 - FastAdmin开发文档
一键生成CRUD 最后更新时间:2021-01-05 19:54:10 在FastAdmin中可以快速的一键生成CRUD,其中包括控制器.模型.视图.验证器.语言包.JS. 准备工作 在数据库中创建一 ...
- vscode生成html模板快捷键以及自定义html模板
一.生成html快捷键 ! + tab ! + Enter 注:! 是英文的感叹号,其次直接输入 ! 再按tab或enter键,不要加 <后再按 ! + tab/enter,这种是生成不了htm ...
- lisp坐标一键生成_联排建筑一键生成?你的SU有外挂吧!
今天小吧要给你们安利一款 超厉害的插件--联排建筑 ▼ 这些都可以一键生成哟 绘制建筑 插件介绍 联排建筑 SUAPP编号450 作者:Eneroth3 插件下载地址 http://www.suapp ...
- admin.php生成地址,FastAdmin命令行一键生成API文档
一键生成API文档 FastAdmin中的一键生成API文档可以在命令行或后台一键生成我们API接口的接口测试文档,可以直接在线模拟接口请求,查看参数示例和返回示例. 准备工作 请确保你的API模块下 ...
- 公众号 自动生成海报 python_用python一键生成一张全部微信好友的头像墙
前言 用 python 代码写了一个一键生成合成微信好友头像的程序,效果如下: 不会写代码?没关系!只要你会使用电脑就 ok! 因为除了用代码方式生成外,还建了一个 .exe 的程序,在电脑点击运行就 ...
- HTML生成PDF模板(Java iText+FreeMarker生成PDF(HTML转PDF))
Java iText+FreeMarker生成PDF(HTML转PDF) 1.背景 在某些业务场景中,需要提供相关的电子凭证,比如网银/支付宝中转账的电子回单,签约的电子合同等.方便用户查看,下载,打 ...
- vscode生成vue模板快捷键_vs code 快速生成vue 模板
1.使用快捷Ctrl + Shift + P唤出控制台,然后输入snippets并选择.(或 文件>首选项>用户代码片断里面,输入 vue.json ,然后回车 )(或 file > ...
- 让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录一键生成SCSS/LESS结构,敏捷开发必备插件!!!
Ctrl+Shift+X 搜索AutoScssStruct4Vue 如上图直接右键-autoScssStruct(你都不需要聚焦到template节点) 直接就给你妥妥的把SCSS代码写好了,如果 ...
最新文章
- socket()函数详解!
- pytorch argmax_一起无聊地用PyTorch刷爆sklearn的内置数据集吧(`?ω?′)
- 新版V3.5.0来袭,更省心,更好用!
- 系统学习NLP(五)--句法分析
- iptables/arptables实现单IP一级二级路由
- wsdl2java参数_wsdl2java参数解释
- springboot集成webservice接口
- 全球及中国增强现实(AR)远程协助软件行业研究及十四五规划分析报告
- 魔兽世界诞生记(上)
- ambarella misc
- chrome无法添加.crx文件(扩展程序)
- 我确实不知道如何使用计算机翻译,新视野大学英语4课后翻译
- 【Python自查手册】之项目实操
- 系统定制开发,微商来----专业做分销商城
- B/S结构下套打票据实现 - Lodop打印组件
- stc8a--mpu6050---dmp--x角度,y角度。z旋转角度不准确,缺少前面矫准环节程序。。
- 第三部分 和弦铃声格式
- cadlisp框选打印_我有好多CAD图纸要打印,一张一张的选取打印太麻烦了,请教高手有没有什么好的办法帮小弟一下、!..十分感...
- win10 keplerzl安装报错
- Tomat组件研究之ThreadPool