设置VSCode快捷键vue生成代码片段

简介: 设置VSCode快捷键vue生成代码片段

Ctrl+Shift+P

复制下面的代码片段

{
  "vue-template": {
    "prefix": "vue-强哥的模板", //这个是模板的自定义名称
    "body": [
      "<template>",
      "  <div class='sg-body'>",
      "    ",
      "  </div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  data () {",
      "    return {",
      "      ",
      "    }",
      "  },",
      "  components: {",
      "    ",
      "  },",
      "  computed: {",
      "    ",
      "  },",
      "  watch: {",
      "    ",
      "  },",
      "  methods: {",
      "  init(){",
      "",
      "},",
      "  },",
      "  created () {",
      "    ",
      "  },",
      "  mounted () {",
      "    ",
      "  },",
      "  filters: {",
      "    ",
      "  },",
      "}",
      "</script>",
      "",
      "<style lang='scss' scoped>",
      ".sg-body{",
      "",
      "}",
      "</style>",
      "",
    ],
    "description": "你挚爱的强哥http://www.shuzhiqiang.com"
  }
}

这个时候去新建一个vue文件,然后输入vue看下效果吧

 


相关文章
|
JavaScript
Vue中如何设置在执行删除等危险操作时给用户提示(二次确认后执行对应的操作)
这篇文章介绍了在Vue项目中如何实现执行删除等危险操作时的二次确认机制,使用Element UI的`el-popconfirm`组件来弹出确认框,确保用户在二次确认后才会执行删除操作。
Vue中如何设置在执行删除等危险操作时给用户提示(二次确认后执行对应的操作)
|
9月前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
200 10
|
11月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
2273 4
|
11月前
|
Linux C++ iOS开发
vs code常见的查找快捷键大全
本文来自 frozencola 技术日志,介绍了 VS Code 中常用的查找快捷键,包括快速打开文件、文件资源管理器、全局搜索、查找符号、查找文件中的文本、查找并替换、文件导航和使用命令面板。掌握这些快捷键可以显著提升开发效率。
919 4
|
11月前
|
C++
vs code常见的查找快捷键大全
【11月更文挑战第1天】本文介绍了 VS Code 中的基本查找和替换操作,包括在当前文件中查找(Ctrl + F)、查找替换(Ctrl + H)、查找下一个(F3)和查找上一个(Shift + F3)。还涵盖了在多个文件中查找(Ctrl + Shift + F)和查找替换(Ctrl + Shift + H),以及符号查找相关操作,如转到符号(Ctrl + T)和在文件中查找符号(Ctrl + Shift + O)。这些快捷键和功能帮助用户高效地管理和编辑代码。
1708 2
|
数据可视化 JavaScript 前端开发
低代码可视化工具--vue条件判断v-if可视化设置-代码生成器
低代码可视化工具--vue条件判断v-if可视化设置-代码生成器
202 2
2022最新最详细必成功的在Vscode中设置背景图、同时解决不受支持的问题
这篇文章提供了在VScode中设置背景图的详细步骤,包括下载background插件、编辑setting.json文件、配置背景样式,并解决了设置后出现的不支持提示的问题。
2022最新最详细必成功的在Vscode中设置背景图、同时解决不受支持的问题
|
JavaScript 前端开发
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
这篇文章介绍了在Vue框架中使用Element UI组件库时,如何通过v-if指令和v-model绑定来控制`el-form-item`的显示与隐藏,以及如何通过设置`readonly`属性让输入框变为只读状态。
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
Vscode设置标签页多行显示
这篇文章提供了在VSCode中设置标签页多行显示的方法,以提高编辑效率。
Vscode设置标签页多行显示