首页 > 其他分享 >vscode快捷生成vue模板

vscode快捷生成vue模板

时间:2023-03-04 17:33:25浏览次数:46  
标签:文件 生命周期 vscode -- vue 组件 import 模板

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

2,粘贴模板:

{
    "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 lang='scss' scoped>",
            "//@import url($3); 引入公共css类",
            "$4",
            "</style>"
        ],
        "description": "Log output to console"
    }
}

3,新建.vue文件,在文件内输入vue会弹出快捷选项。

标签:文件,生命周期,vscode,--,vue,组件,import,模板
From: https://www.cnblogs.com/lihenhao/p/17178670.html

相关文章

  • 基于NUXT.JS搭建一款VUE版SSR前端框架(解决SPA应用的SEO优化优化问题)
    小仙男·言在前关于框架:为了解决VUE的SPA单页应用对SEO搜索引擎优化不友好的问题,这几天一直在调研各种SSR框架。比如doc.ssr-fc.com/和fmfe.github.io/genesis-do都是......
  • VSCode 隐藏部分右键菜单
    资源管理器右键菜单:进入设置界面、输入ExplorerContextMenu搜索设置。编辑器右键菜单(包括编辑器标题右键菜单):进入设置界面、输入EditorContextMenu搜索设置。编辑器......
  • vite构建的vue3项目内mockjs的使用
    技术栈:vue3+vite+mockjs用法一:1、首先安装对应的依赖vite-plugin-mock,我这里是使用npm安装的,也可以选择其他安装方式;npminstallvite-plugin-mock-D2、项目内src......
  • vscode设置
    {"workbench.colorTheme":"Monokai","files.autoSave":"onFocusChange","editor.fontSize":15,"editor.lineHeight":25,"editor.fontWeight"......
  • vueCli3--父子窗口之间通信
    demo-father.vue<template> <div>  <button@click="openNewWindow">点击开新窗口</button>  <button@click="closeSonWin">关闭子窗口</button> ......
  • 使用element-ui+vue2实现oss直传上传图片
    <template><div><el-upload:action="dataObj.host":data="dataObj"list-type="picture":multiple="false":show-file-list="showFile......
  • vue2.x使用音乐插件vue-aplayer
    地址:https://aplayer.netlify.app/docs/1、使用npm安装npminstall@moefe/vue-aplayer--save2、main.js配置importVuefrom'vue';importAPlayerfrom'@moefe......
  • VSCode 复制匹配到的文本
    查找到指定格式的内容之后。点击菜单栏选择、选择所有匹配项。参考:使用VSCode提取指定特征的文本......
  • 创建Vue项目
    搭配TypeScript使用Vue像TypeScript这样的类型系统可以在编译时通过静态分析检测出很多常见错误。这减少了生产环境中的运行时错误,也让我们在重构大型项目的时候更有......
  • mockjs_axios_vue_learn_2023-03-03 23:33:34
    mockjsvuelearn/Users/song/Downloads/vue3_demo_mockjs-master/__mock_learn/mock_learn/index.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="......