vscode中创建vue快捷键

1.安装Vetur插件（扩展里面直接搜）

2.vscode 界面里面左上角选则 文件=> 首选项=> 用户代码片段=>新建全局代码片段=>在输入框中新建名称为vue.json

3.删除里面的注释，当然你也可以留着，把下面的代码粘贴进去！

{
	// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. 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": {
		"scope": "javascript,typescript",
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	},

	
	"creat vue": {
		"prefix": "vue",
		"body": [
		"<!-- $0 -->",
		"<template>",
		" <div></div>",
		"</template>",
		"",
		"<script>",
			"export default {",
			" components:{\n",
			" },",
			" data () {",
			"  return {\n",
			"  }",
			" },",
			" created(){\n",
			" },",
			" methods:{\n",
			" },",
			" beforeDestroy(){\n",
			" }",
			"}",
			"",
		"</script>",
		"",
		"<style lang='scss' scoped>",
		"",
		"</style>",
		""
		],
		"description": "creat vue template"
	}
	
}

附赠其他的快捷代码块

1.css

{
	"before": {
			"prefix": ":bef",
			"body": [
	"::before{",
		"\tcontent: '';",
		"\tposition:  relative $1;",
		"\ttop:  0$2px ;",
		"\tleft:  0$3px ;",
		"\twidth:  0$4px ;",
		"\theight:  0$5px ;",
		"\tbackground: url($6);",
		"\tbackground-size:  0$4px  0 $5px;",
		"\tbackground-position: center;",
	
				"}"
			],
			"description": "before output to position"
		},


		"after": {
			"prefix": ":aft",
			"body": [
	"::after{",
		"\tcontent: '';",
		"\tposition:  relative$1;",
		"\ttop:  0$2px ;",
		"\tleft:  0$3px ;",
		"\twidth:  0$4px ;",
		"\theight:  0$5px ;",
		"\tbackground: url($6);",
		"\tbackground-size:  0$4px  0 $5px;",
		"\tbackground-position: center;",
	
				"}"
			],
			"description": "before output to position"
		},


}	

2.js

{
	// Place your snippets for javascript 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"
	// }
	"$.ajax": {
		"prefix": "$.aj",
		"body": [
			
			"$.ajax({",
			"\t url: '$1',",
				"\t type: '$2',",
				"\t data: {$3},",
				"\t success: function(res){",
					"\t \t console.log(res);",
					"\t\t if(res.success){",
						"\t\t\t $4",
					"\t\t }",
					"\t }",
					
				"});"
			
		],
		"description": "Log output to console"
	},
	
	"wei tuo shijian": {
		"prefix": "$()",
		"body": [
			"$('#$1').on('click$2','$3',function(){",
			"\t$4",
			"}"
		],
		"description": "wei tuo shijian"
	},

	"chuang jian fu wu qi": {
		"prefix": "conex",
		"body": [
				"\t\t // 导入 express 模块",
				"\n\t const  express = require('express');",
				"\n\t\t // 创建express 的服务器实例、",
				"\n\t const app = express();",

				"\n\t\t // 托管静态资源  便于页面加载使用",
				"\n\t app.use(express.static('./views$1'));",
				"\n\t app.use('/semantic',express.static('./semantic$2'))$3;",
				
				"\n\t\t // 调用 app.listen 方法，指定端口号 并启动web服务器",

				"\n\t app.listen(3001$4,function(){",
					"\n\t\t console.log('express server running at http://127.0.0.1:3001$4');",

    
				"\n\t })"   
		],
		"description": "chuang jian fu wu qi"
	},
	"lian jie shu ju ku": {
		"prefix": "conmysol",
		"body": [
				"\n\t\t // 这是数据操作模块 只负责操作数据库",
				"\n\t\t // 导入mysql 模块",
				"\n\t\t const mysql = require('mysql')",
				"\n\t\t // 创建数据库连接对象",
				"\n\t\t\t const conn = mysql.createConnection({",
				"\n\t\t\t host: 'localhost',",
				"\n\t\t\t user: 'root',",
				"\n\t\t\t password: 'root',",
				"\n\t\t\t database: 'mysql_001'",
				"\n\t\t })",

			"\n\t\t // 把其他模块需要的 conn 暴露出去",
			"\n\t\t module.exports = conn;"
		],
		"description": "lian jie shu ju ku"
	},
	"chu li shu ju de jie kou": {
		"prefix": "consql",
		"body": [
				"\n\t\t $1.get$2('$3',(req,res) => {",
					"\n\t\t\t // 如果是get请求 在这里获取在URL地址栏中以/a/b/c 方式传递的参数 ",
				"\n\t\t\t const id = req.params.id;",
				"\n\t\t\t // sql 语句",
				"\n\t\t\t const sql = '$4';",
					"\n\t\t\t //可以在这里传递数据跟数据库",
				"\n\t\t\t conn.query(sql,$5,(err, result) => {",
					"\n\t\t\t //可以在这里传递数据给前台页面 也可以不返回",
				"\n\t\t\t if(err) return res.send({status: 500,msg: err.message,data: null$6});",
						"\n\t\t\t res.send({status: 200,msg: 'ok',data: null$7});",
					"\n\t\t\t })",
				"\n\t\t })"
		],
		"description": "lian jie shu ju ku"
	},


	"creatVue": {
		"prefix": "Vue",
		"body": [
			
			"\t\t var vm = new Vue({",
				"\t\t\t el: '#$1',",
				"\t\t\t data: {",
					"\t\t\t\t $2",
				"\t\t\t },",
				"\t\t\t methods: {",
					"\t\t\t\t handle1$3: function(event) {",
						"\t\t\t\t\t $4",
					"\t\t\t\t },",
				"\t\t\t },",
					
			"\t\t })",
			
		],
		"description": "Log output to console"
	},

	"email-zhengZe": {
		"prefix": "regEmail",
		"body": [
			
			"regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/"
			
		],
		"description": "email-zhengZe"
	},

	"mobile-zhengZe": {
		"prefix": "regMobile",
		"body": [
			
			"regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/"
			
		],
		"description": "mobile-zhengZe"
	},
}

{
	// Place your snippets for php 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.
	// 解释把你的代码片段放在这里。每个代码段都定义在一个代码片段的名称下,并有一个前缀、body和description。前缀是用来触发代码片段的东西,身体将被扩展和插入。可能的变量是:$ 1、tab的$ 2、最后游标位置的$ 0、$ { 1:label }、$ { 2:位符的另一个}。占位符
	// 相同的id连接。
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	// "$.ajax": {
	// 	"prefix": "$.aja",
	// 	"body": [
	// 		";",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
}