vsCode创建自己的代码模板
配置地址参考如下：
https://www.cnblogs.com/luzhanshi/p/12016281.html
模板内容用自己下面这个：
{
"vue_learn_template":{
"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<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
"\t<title></title>",
"\t<style>",
"\t</style>",
"</head>\n",
"<body>",
"\t<div id =\"app\"> \n",
"\t<h1>{{ msg }}</h1> \n",
"\t </div>\n",
"\t<script src=\"https://unpkg.com/vue@next\"></script>",
"\t<script>",
"\t //创建Vue实例,得到 ViewModel",
"\t const app = Vue.createApp({",
"\t\tdata(){",
"\t\t\treturn {",
"\t\t\t\tmsg:'模板msg'",
"\t\t\t}",
"\t\t\t},",
"\t\tmethods: {",
"\t\t\tgetClass() {",
"\t\t\t\treturn [];",
"\t\t\t}",
"\t\t}",
"\t }).mount('#app');",
"\t</script>",
"</body>\n",
"</html>"
],
"description": "vue学习时创建文件的模板" // 模板的描述
}
}
模板生成html文件后的模板内容为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
</style>
</head>
<body>
<div id ="app">
<h1>{{ msg }}</h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建Vue实例,得到 ViewModel
const app = Vue.createApp({
data(){
return {
msg:'模板msg'
}
},
methods: {
getClass() {
return [];
}
}
}).mount('#app');
</script>
</body>
</html>
