VSCode自定义代码片段1——vue主模板

Posted 浅香沉木

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VSCode自定义代码片段1——vue主模板相关的知识,希望对你有一定的参考价值。

VSCode自定义代码片段(vue主模板)


	// vue
	// 1,自定义用户代码片段:VSCode =》左下角设置 =》用户代码片段 =》 自定义片段名称 =》编辑用户片段 =》ctrl+S 保存
	// vue主模板
	"Print to console": 
		"prefix": "vue",
		"body": [
"<!DOCTYPE html>",
"<html lang=\\"en\\">",
"",
"<head>",
"    <meta charset=\\"UTF-8\\">",
"    <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\">",
"    <!-- 判断使用GCF,即用Google Chrome浏览器内核渲染页面 -->",
"    <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\">",
"    <title>具名插槽</title>",
"    <!-- 引入vue库,网上固定版本和本地文件 -->",
"    <!-- <script src=\\"https://cdn.jsdelivr.net/npm/vue@2.6.12\\"></script> -->",
"    <script src=\\"./vue.js\\"></script>",
"</head>",
"",
"<body>",
"    <div id=\\"app\\">",
"        <cpn><span slot=\\"center\\">标题1</span></cpn>",
"        <cpn><button slot=\\"left\\">按钮</button><span slot=\\"center\\">标题2</span></cpn>",
"        <cpn><input type=\\"text\\" slot=\\"center\\"><button slot=\\"left\\">返回</button><button slot=\\"right\\">搜索</button></cpn>",
"    </div>",
"</body>",
"<template id=\\"cpn\\">",
"    <div>",
"        <h2>我是标题</h2>",
"        <!-- 在使用多个插槽时,需用到name属性使插槽具有名字,",
"            在插入内容时,在插入内容中使用slot=插槽名便可使用指定名字的插槽 -->",
"        <slot name=\\"left\\">左边</slot>",
"        <slot name=\\"center\\">中间</slot>",
"        <slot name=\\"right\\">右边</slot>",
"    </div>",
"</template>",
"<script>",
"    const vm = new Vue(//vue实例",
"        el: '#app',",
"        data: //数据",
"",
"        ,",
"        methods: //方法",
"",
"        ,",
"        computed: //计算属性",
"",
"        ,",
"        watch: //监听",
"",
"        ,",
"        filters: //过滤器",
"",
"        ,",
"        components: //组件",
"            cpn: ",
"                template: \\"#cpn\\",",
"            ",
"        ,",
"    );",
"</script>",
"",
"</html>"
		],
		"description": "Log output to console"
	


@沉木

以上是关于VSCode自定义代码片段1——vue主模板的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段2——.vue文件的模板

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段13——Vue的状态大管家