vscode 自动生成 vue模板

{
  // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
  // same ids are connected.
  // Example:

  "Print to console": {
    "prefix": "log",
    "body": [
      "console.log('$1')",
      "$2"
    ],
    "description": "Log output to console"
  },
  "Create VUE template": {
    "prefix": "vue",
    "body": [
      "<template>",
			"  <div>",
			"    <PageHeaderLayout>",
			"      $1",
			"    </PageHeaderLayout>",
      "  </div>",
      "</template>",
      "",
      "<script>",
      "// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",
      "import PageHeaderLayout from '@/layouts/PageHeaderLayout'",
      "import ApeDrawer from '@/components/ApeDrawer'",
      "import ModalDialog from '@/components/ModalDialog'",
      "import ApeUploader from '@/components/ApeUploader'",
      "import ApeEditor from '@/components/ApeEditor' ",
      "import { mapGetters } from 'vuex'",
      "",
      "export default {",
      "  components: {",
      "    PageHeaderLayout,",
      "    ApeDrawer,",
      "    ModalDialog,",
      "    ApeUploader,",
      "    ApeEditor",
      "  },",
      "  // 定义属性",
      "  data() {",
      "    return {",
      "      $2",
      "    }",
      "  },",
      "  // 计算属性,会监听依赖属性值随之变化",
      "  computed: {",
      "    ...mapGetters(['userPermissions','buttonType'])",
      "  },",
      "  // 监控data中的数据变化",
      "  watch: {},",
      "  // 方法集合",
      "  methods: {",
      "    $3",
      "  },",
      "  // 生命周期 - 创建完成(可以访问当前this实例)",
      "  created() {",
      "    $4",
      "  },",
      "  // 生命周期 - 挂载完成(可以访问DOM元素)",
      "  mounted() {",
      "    $5",
      "  },",
      "  beforeCreate() {}, // 生命周期 - 创建之前",
      "  beforeMount() {}, // 生命周期 - 挂载之前",
      "  beforeUpdate() {}, // 生命周期 - 更新之前",
      "  updated() {}, // 生命周期 - 更新之后",
      "  beforeDestroy() {}, // 生命周期 - 销毁之前",
      "  destroyed() {}, // 生命周期 - 销毁完成",
      "  activated() {}, // 如果页面有keep-alive缓存功能,这个函数会触发",
      "}",
      "</script>",
      "",
      "<style lang='stylus' scoped>",
      "  $6",
      "</style>"
    ],
    "description": "Create VUE template"
  }
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值