一、模板
<!-- * @description 参数1 * @fileName v-bind-class-array * @author userName * @date 2021-03-17 08:43:03 * @version V1.0.0 !--> <!DOCTYPE html> <html lang="zh-CN"> <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>v-bind-class-array</title> <script src="./vue.js"></script> </head> <body> <div id="app"><h2>{{message}}</h2></div> <script> var vm = new Vue({ el: '#app', data() { return { message:'Hello Vue' } }, created(){ // 实例被创建之后执行代码 }, computed: { // 计算属性 }, components: { // 组件的引用 }, methods: { // 方法 }, mounted() { // 页面进入时加载内容 }, watch: { // 监测变化 } }); </script> </body> </html>
二、代码片段-vscode设置(左下角小齿轮)-用户代码片段-新建全局
{ "Html5-Vue": { //模板名称 "prefix": "hv", //触发条件 "body": [ //内容 "<!--", "* @description ${1:参数1}", "* @fileName ${TM_FILENAME_BASE}", "* @author userName", "* @date ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}", "* @version V1.0.0", "!-->", "<!DOCTYPE html>", "<html lang="zh-CN"> ", "<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>${TM_FILENAME_BASE}</title>", " <script src="./vue.js"></script>", "</head> ", "<body>", " <div id="app"><h2>{{message}}</h2></div> ", " <script>", " var vm = new Vue({", " el: '#app',", " data() {", " return {", " message:'Hello Vue'", " }", " },", " created(){ // 实例被创建之后执行代码", "", " },", " computed: { // 计算属性", "", " },", " components: { // 组件的引用", "", " },", " methods: { // 方法", "", " },", " mounted() { // 页面进入时加载内容", "", " },", " watch: { // 监测变化", "", " }", " });", "", " </script>", "</body> ", "</html>" ], "description": "快速创建在html5编写的vue模板" //描述 } }