在vs code 中如何创建一个自己的 Vue 模板代码
首先，在vs code 中打开定义模板代码的地方
第一步，点击“设置”图标按钮，在弹出的菜单中点击的“用户代码片段”（也就是模板）
第二步，在弹出的框中选择新建代码片段（可选为 全局/现在的项目 创建模板）
第三步，输入要新建的模板名称，然后，回车（这里我已经新建过了）
然后会自动打开下面这个页面，在这里我们就可以开始新建一个vue模板了
现在我们开始创建我们的模板了 这是一个模板例子
需要的可以直接拷贝到新建的模板文件中，然后按自己的风格改改
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div class=\"$TM_FILENAME_BASE\">",
" ${0}",
" </div>",
"</template>",
"",
"<script>",
"export default {",
" name: '$TM_FILENAME_BASE',",
" data () {",
" return {",
"",
" };",
" },",
" methods: {}",
"}",
"</script>",
"",
"<style lang='scss' scoped>",
"",
"</style>"
],
"description": "my vue template"
}
}
模板文件中各参数的含义
“prefix”: “vue”, // 定义触发模板的，字符串代码。这里我写的时“vue”。使用就是输入“vue”然后按tab
" name: ‘$TM_FILENAME_BASE',", // $TM_FILENAME_BASE 这个变量是当前的文件名
" <div class="$TM_FILENAME_BASE">", // html代码中我习惯使用双引号，所以这里用了反斜杠“\”转义双引号
description": “my vue template” // 就是字面上的意思，即，这个模板的描述信息
" ${0}", // ${0} 是生成模板后光标的位置，你可以同时放多个
最终效果
在新建的vue文件中输入“vue”,按tab键
就会自动生产一个vue的模板
到此这篇关于在vs code 中如何创建一个自己的 Vue 模板代码的文章就介绍到这了,更多相关vs code 创建Vue 模板内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue2模拟vue-element-admin手写角色权限的实现
本文主要介绍了vue2模拟vue-element-admin手写角色权限的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要介绍了Vue中如何把hash模式改为history模式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue2路由中router-view不显示的原因及踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue前端重构computed及watch组件通信等实用技巧整理
这篇文章主要为大家介绍了vue前端重构computed及watch组件通信等实用技巧整理，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-05-05
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
今天小编就为大家分享一篇Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了Vue使用v-viewer实现图片预览，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要介绍了vue scoped与深度选择器deep的原理分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了Vue实现文本编译详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下，希望对你的学习有所帮助2022-08-08
vue前台显示500和405错误的解决(springboot为后台)
这篇文章主要介绍了vue前台显示500和405错误的解决(springboot为后台)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
最新评论