脚本宝典收集整理的这篇文章主要介绍了vscode 创建vue模板,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
(确保编辑器已经安装了插件 vetur、vueHelPEr)
1、ctrl+shift+p 输入snippets 选中它 输入vue》vue.JSON
2、或者操作 文件》首选项》用户代码片段》vue》vue.json
复制如下 也可自由编辑
{
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $1 -->",
"<template>",
"<div class='$2'>$5</div>",
"</template>",
"",
"<script>",
"",
"// 导入的其他文件 例如:import moduleName from 'modulePath';",
"",
"export default {",
"",
"//import所引入的组件注册",
"components: {",
"",
"},",
"",
"data() {",
" return {",
"",
" };",
"},",
"",
"//监听属性",
"computed: {",
"",
"},",
"",
"//监控data中的数据变化",
"watch: {",
"",
"},",
"",
"//方法集合",
"methods: {",
"",
"},",
"",
"//生命周期 - 组件实例刚被创建",
"beforeCreate() { ",
"",
"},",
"//创建完成 访问当前this实例",
"created() {",
"",
"},",
"//挂载之前",
"beforeMount() { ",
"",
"},",
"//挂载完成 访问DOM元素",
"mounted() {",
"",
"},",
"//更新之前",
"beforeUpdate() { ",
"",
"},",
"//更新之后",
"updated() { ",
"",
"},",
"//for keep-alive 缓存功能,组件被激活时调用",
"activated() {",
"",
"},",
"//for keep-alive 组件被移除时调用",
"deactivated() {",
"",
"},",
"//组件销毁之前调用",
"beforeDestroy() {",
"",
"},",
"//组件销毁之后调用",
"destroyed() {",
"",
"},",
"}",
"</script>",
"<style lang='scss' scoped>",
"//@import url($3); 引入公共css类",
"$4",
"</style>"
],
"description": "Log output to console"
}
}
最后 :保存 然后新建 .vue文件 ,如果新建的页面啥都没有 在这个页面输入 vue 回车 OK
以上是脚本宝典为你收集整理的vscode 创建vue模板全部内容,希望文章能够帮你解决vscode 创建vue模板所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。