vscode vue代码片段

分享一个在线生成代码片段的网站：在线生成代码片段

{
  "WpVueSnippet": {
    "prefix": "wp-vue",
    "body": [
      "<template></template>",
      "<!--",
      "  功能：${1:}",
      "  作者：wp",
      "  邮箱：wu_pan123@126.com",
      "  时间：$CURRENT_YEAR年$CURRENT_MONTH月$CURRENT_DATE日 $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
      "  版本：v1.0",
      "  修改记录：",
      "  修改内容：",
      "  修改人员：",
      "  修改时间：",
      "-->",
      "<script>",
      "export default {",
      "  // 组件名称",
      "  name: '${2:}',",
      "  // 组件参数 接收来自父组件的数据",
      "  props: {},",
      "  // 局部注册的组件",
      "  components: {",
      "    /*     WifiOutlined: WifiOutlined */",
      "  },",
      "  // 组件状态值",
      "  data () {",
      "    return {}",
      "  },",
      "  // 计算属性",
      "  computed: {},",
      "  // 侦听器",
      "  watch: {},",
      "  // 组件方法",
      "  methods: {},",
      "  // 以下是生命周期钩子   注：没用到的钩子请自行删除",
      "  /**",
      "   * 在实例初始化之后，组件属性计算之前，如data属性等",
      "   */",
      "  beforeCreate () {},",
      "  /**",
      "   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在",
      "   */",
      "  created () {},",
      "  /**",
      "   * 在挂载开始之前被调用：相关的 render 函数首次被调用。",
      "   */",
      "  beforeMount () {},",
      "  /**",
      "   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。",
      "   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。",
      "   */",
      "  mounted () {},",
      "  /**",
      "   * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。",
      "   * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。",
      "   */",
      "  beforeUpdate () {},",
      "  /**",
      "   * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。",
      "   * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。",
      "   */",
      "  updated () {},",
      "  /**",
      "   * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效",
      "   */",
      "  activated () {},",
      "  /**",
      "   * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效",
      "   */",
      "  deactivated () {},",
      "  /**",
      "   * 实例销毁之前调用。在这一步，实例仍然完全可用。",
      "   */",
      "  beforeUnmount () {},",
      "  /**",
      "   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，",
      "   * 所有的事件监听器会被移除，所有的子实例也会被销毁。",
      "   */",
      "  unmounted () {}",
      "}",
      "</script>",
      "<style scoped></style>",
    ],
    "description": "vueExportDefault"
  },
  "WpVueEchartsSnippet": {
    "prefix": "wp-vue-echarts",
    "body": [
      "<template>  <data-panel :title=\"title\" :icon=\"icon\"><div ref=\"chartDiv\" style=\"width: 100%; height: 100%\"></div> </data-panel></template>",
      "<!--",
      "  功能：${1:}",
      "  作者：wp",
      "  邮箱：wu_pan123@126.com",
      "  时间：$CURRENT_YEAR年$CURRENT_MONTH月$CURRENT_DATE日 $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
      "  版本：v1.0",
      "  修改记录：",
      "  修改内容：",
      "  修改人员：",
      "  修改时间：",
      "-->",
      "<script>",
      "import * as Echarts from 'echarts'",
      "export default {",
      "  // 组件名称",
      "  name: '${2:}',",
      "  // 组件参数 接收来自父组件的数据",
      "  props: {",
      "title: String,",
      "icon: String,",
      "},",
      "  // 局部注册的组件",
      "  components: {",
      "    /*     WifiOutlined: WifiOutlined */",
      "  },",
      "  // 组件状态值",
      "  data () {",
      "    return {",
      " chartInstance: {},",
      " chartOptions: {},",
      "}",
      "  },",
      "  // 计算属性",
      "  computed: {},",
      "  // 侦听器",
      "  watch: {",
      "'$i18n.locale'() {",
      "this.setOptions()",
      "},",
      "},",
      "  // 组件方法",
      "  methods: {",
      "initChart() {",
      " this.chartInstance = Echarts.init(this.$$refs.chartDiv)",
      "this.setOptions()",
      "this.addResize()",
      "},",
      "setOptions() {",
      "this.chartInstance.setOption(this.chartOptions)",
      "},",
      "addResize() {",
      "window.addEventListener('resize', () => this.chartInstance.resize())",
      "},",
      "removeResize() {",
      "window.removeEventListener('resize', () => this.chartInstance.resize())",
      "},",
      "},",
      "  // 以下是生命周期钩子   注：没用到的钩子请自行删除",
      "  /**",
      "   * 在实例初始化之后，组件属性计算之前，如data属性等",
      "   */",
      "  beforeCreate () {},",
      "  /**",
      "   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在",
      "   */",
      "  created () {},",
      "  /**",
      "   * 在挂载开始之前被调用：相关的 render 函数首次被调用。",
      "   */",
      "  beforeMount () {},",
      "  /**",
      "   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。",
      "   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。",
      "   */",
      "  mounted () {",
      "this.initChart()",
      "},",
      "  /**",
      "   * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。",
      "   * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。",
      "   */",
      "  beforeUpdate () {},",
      "  /**",
      "   * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。",
      "   * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。",
      "   */",
      "  updated () {},",
      "  /**",
      "   * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效",
      "   */",
      "  activated () {},",
      "  /**",
      "   * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效",
      "   */",
      "  deactivated () {},",
      "  /**",
      "   * 实例销毁之前调用。在这一步，实例仍然完全可用。",
      "   */",
      "  beforeUnmount () {",
      "this.removeResize()",
      "},",
      "  /**",
      "   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，",
      "   * 所有的事件监听器会被移除，所有的子实例也会被销毁。",
      "   */",
      "  unmounted () {}",
      "}",
      "</script>",
      "<style scoped></style>",
    ],
    "description": "vue echarts Export Default"
  },
  "安装Vue全局事件总线": {
    "prefix": "wp-vue-bus",
    "body": [
      "beforeCreate() {",
      "  Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm",
      "},"
    ],
    "description": "安装Vue全局事件总线"
  },
  "安装Vue全局事件注册和注销": {
    "prefix": "wp-vue-bus-onoff",
    "body": [
      "this.$bus.$on('busname', callback);",
      "//this.$bus.$off('busname');"
    ],
    "description": "安装Vue全局事件注册和注销"
  }
}