1. 程式人生 > 其它 >vsCode建立自己的程式碼模板

vsCode建立自己的程式碼模板

配置地址參考如下:

https://www.cnblogs.com/luzhanshi/p/12016281.html

模板內容用自己下面這個:

{ "vue_learn_template":{ "prefix":"vue", "body":[ "<!DOCTYPEhtml>", "<htmllang=\"en\">", "<head>", "\t<metacharset=\"UTF-8\">", "\t<metaname=\"viewport\"content=\"width=device-width,initial-scale=1.0\">", "\t<metahttp-equiv=\"X-UA-Compatible\"content=\"ie=edge\">", "\t<title>模板</title>", "\t<style>", "\t</style>", "</head>\n", "<body>", "\t<divid=\"app\">\n", "\t<h1>{{msg}}</h1>", "\t</div>\n", "\t<scriptsrc=\"https://unpkg.com/vue@next\"></script>", "\t<script>", "\t//建立Vue例項,得到ViewModel", "\tconstapp=Vue.createApp({", "\t\tdata(){", "\t\treturn{msg:'模板msg'}", "\t\t},", "\t\tmethods:{", "\t\tgetClass(){", "\t\treturn[];", "\t\t}", "\t\t}", "\t}).mount('#app');", "\t</script>", "</body>\n", "</html>" ], "description":"vue學習時建立檔案的模板"//模板的描述 } } 模板生成html檔案後的模板內容為: <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-equiv="X-UA-Compatible"content="ie=edge"> <title>模板</title> <style> </style> </head>
<body> <divid="app">
<h1>{{msg}}</h1> </div>
<scriptsrc="https://unpkg.com/vue@next"></script> <script> //建立Vue例項,得到ViewModel constapp=Vue.createApp({ data(){ return{msg:'模板msg'} }, methods:{ getClass(){ return[]; } } }).mount('#app'); </script> </body>
</html>