VSCODE生成vue3.0模板

  • A+
所属分类:vue 工具

安装VSCode

安装Vetur插件,识别vue文件

VSCODE生成vue3.0模板

新建代码代码模板

文件-->首选项-->用户代码片段-->点击新建代码片段--取名vue.json 确定 //中文路径
Prefrences->User Snippets->同上 //英文路径

编写自己的模板

模板示例

{
  // $1, $2 制表符, $0 最终光标位置, ${1:label}, ${2:another} 占位符 
  "vue-template": {
     "prefix": "vue",
     "body": [
  	   "<template>",
  	   "  <div></div>",
  	   "</template>",
  	   "",
  	   "<script lang=\"ts\">",
  	   "import { Component, Vue } from \"vue-property-decorator\"",
  	   "",
  	   "@Component",
  	   "export default class ${1:ClassName} extends Vue {$0}",
  	   "</script>",
  	   "",
  	   "<style lang=\"scss\">",
  	   "</style>"
  	],
     "description": "my vue template"
  }
}

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

快捷生成模板

输入vue 按键盘的tab就行

VSCODE生成vue3.0模板

weinxin
我的微信
欢迎来撩!!
admin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: