VsCode配置Vue模板

97 阅读1分钟

一、新建模板配置文件vue.json

  • Ctrl + Shift + P唤出控制台,然后输入snippets并选择配置用户代码片段,输入 vue.json ,然后回车。

  • 文件>首选项>配置用户代码片段,输入 vue.json ,然后回车。

  • 管理 > 配置用户代码片段,输入 vue.json ,然后回车。

二、配置模板

{
	"Print to console": {
	  "prefix": "vue",
	  "body": [
		"<!-- 页面$1 -->",
		"<template>",
	  		"<div class=''>",
                        "",
	  		"</div>",
		"</template>",
		"",
		"<script>",
		"// 这里导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",
		"// 例如:import 《组件名称》 from '《组件路径》'",
		"",
		"export default {",
		"  // import引入的组件需要注入到components对象中才能使用",
		"  components: {},",
		"  data () {",
		"    return {",
		"",
		"    }",
		"  },",
		"  // 监听属性 类似于data概念",
		"  computed: {},",
		"  // 监控data中的数据变化",
		"  watch: {},",
		"  // 生命周期 - 创建完成(可以访问当前this实例)",
		"  created () {",
		"",
		"  },",
		"  mounted () {",
		"",
		"  },",
		"  beforeCreate () { }, // 生命周期 - 创建之前",
		"  beforeMount () { }, // 生命周期 - 挂载之前",
		"  beforeUpdate () { }, // 生命周期 - 更新之前",
		"  updated () { }, // 生命周期 - 更新之后",
		"  beforeDestroy () { }, // 生命周期 - 销毁之前",
		"  destroyed () { }, // 生命周期 - 销毁完成",
		"  activated () { }, // 如果页面有keep-alive缓存功能,这个函数会触发",
		"  methods: {",
		"",
		"  }",
		"}",
		"</script>",
		"",
		"<style lang='less' scoped>",
		"//@import url($3); 引入公共css类",
		"$4",
		"</style>",
		""
	  ],
	  "description": "Log output to console"
	}
  }

三、使用模板

使用配置完成后,只需在新建的vue页面,输入vue,回车,即可生成[vue模板]