vscode 新建vue模板步骤

2,230 阅读1分钟

1. 安装vscode(不多讲)

2. 安装vscode中的插件(Vetur, 识别vue文件)

xx

3. 新建全局代码片段

文件-->首选项-->用户代码片段-->点击新建全局代码片段文件--取名vue.json 确定

4. 粘贴写好的.vue模板文件 (无需备注自己删除)

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

5. 代码中的 "prefix": "vue", vue就是快捷键;保存好之后,新建.vue结尾的文件试试

6. 新建.vue文件 输入vue确定 (或者tab)