vue 自定定义用户代码片段(收藏)

189 阅读1分钟

vue 自定定义用户代码片段:

VScode→设置→用户代码片段→新建全局代码片段文件→复制粘贴以下内容

{
	// Place your snippets for html 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"
	// }
	"Print to vue": {
		"prefix": "vuec",
		"body": [
			"<template>",
			" <div>",
			"  编程是技术,还是艺术!$1",
			" </div>",
			"</template>",
			"<script>",
			"export default{",
			"    name:'',",
      "\t\tdata () {",
        "\t\t\t\treturn {",
        "\t\t\t\t\t\t",
      "\t\t\t\t}",
			"\t\t},",
      "\t\tcreated () {",
			"\t\t},",
      "\t\tcomputed:{",
			"\t\t},",
      "\t\tmethods:{",
			"\t\t}",

			"}",
			"</script>",
			"<style lang='less'  scoped>",
			"\t\t",
			"</style>",
      "",
		],
		"description": "create a vue template"
	},
	"Print to v": {
		"prefix": "vue",
		"body": [
			"<!DOCTYPE html>",
			"<html lang='en'>",
			"<head>",
			"\t<meta charset='UTF-8'>",
			"\t<meta name='viewport' content='width=device-width, initial-scale=1.0'>",
			"\t<title>Document</title>",
			"\t<script type='text/javascript' src='js/vue.js'></script>",
			"</head>",
			"<body>",
			"\t<div id='app'>",
			"\t</div>",
			"\t<script type='text/javascript'>",
			"\t\tvar vm = new Vue({",
			"\t\t\tel: '#app',",
			"\t\t\tdata: {",
			"\t\t\t},",
			"\t\t\tmethods: {",
			"\t\t\t}",
			"\t\t});",
			"\t</script>",
			"</body>",
			"</html>"
		],
		"description": "create a vue template"
	},
	"Print to express": {
		"prefix": "express",
		"body": [
			"const  express=require('express')",
			"const  app=express()",
			"app.get('/',(req,res)=>{",
			"\tres.send('1111')",
			"})",
			"app.listen(2000,()=>{",
			"\tconsole.log('http://127.0.0.1:2000');",
			"})"
		]
	},
	"Print to vuex": {
		"prefix": "vuex",
		"body": [
			"export default {",
			"\tnamespaced:true,",
			"\tstate: {",
			" \t\t",
			"\t},",
			"\tmutations: {",
			"\t\t ",
			"\t},",
			"\tactions: {",
			"\t\t ",
			"\t},",
			"}"
		]
	},
	"Print to ajax": {
		"prefix": "$ajax",
		"body": [
			"$.ajax({",
			"\turl: '',",
			"\ttype:'get',",
			"\tdata:{},",
			"\tsuccess:function(res){",
			"\t\t\t",
			"\t},",
			"})"
		]
	},
	"Print to rcl": {
		"prefix": "rcl",
		"body": [
			"$2",
			"class Com extends React.Component {",
				"\trender() {",
					"\t\treturn <div>",
					"\t\t\t编程是技术,还是艺术!$1",
					"\t\t</div>",
				"\t}",
			"}"
		],
		"description": "类组件"
	},
	"Print to rrcl": {
		"prefix": "rrcl",
		"body": [
			"import React from 'react'",
			"$2",
			"class Com extends React.Component {",
				"\trender() {",
					"\t\treturn <div>",
					"\t\t\t编程是技术,还是艺术!$1",
					"\t\t</div>",
				"\t}",
			"}",
			"export default Com"
		],
		"description": "类组件"
	},
	"Print to rfun": {
		"prefix": "rfun",
		"body": [
			"$2",
			"const Func = () => {",
				"\treturn <div>",
				"\t\t编程是技术,还是艺术!$1",
					"</div>",
			"};",
				
		],
		"description": "函数式组件"
	},
	"Print to rrfun": {
		"prefix": "rrfun",
		"body": [
			"import React from 'react'",
			"$2",
			"const Func = () => {",
				"\treturn <div>",
				"\t\t编程是技术,还是艺术!$1",
					"</div>",
			"};",
			"export default Func"
		],
		"description": "函数式组件"
	},
	"Print to vuex": {
		"prefix": "vuex",
		"body": [
			"export default {",
      "\tstate () {",
      "\t\treturn {",
            // 文章分类的列表数据
       "\t\t\t",
       "\t\t}",
       "\t},",
       "\tmutations: {",
          // 设置分类列表数据
        "\t\t\t",
       "\t},",
      "\tactions: {",
      "\t},",
      "\tgetters: {},",
        // 开启命名空间
      "\tnamespaced: true",
      "}",
		],
		"description": "函数式组件"
	},
	"Print to clog": {
		"prefix": "clog",
		"body": [
			"console.log()",
		],
		"description": "输入打印"
	},
}