vue.code-snippets

{
  // vue 代码模板
  "vue-ts": {
    "scope": "vue",
    "prefix": "ts",
    "body": [
      "<!-- ${1:描述} -->",
      "<template>",
      "  <div :class=\"$$style.wrapper\">",
      "    ${2:示例文字}",
      "  </div>",
      "</template>",
      "",
      "<script lang=\"ts\">",
      "// @ts-nocheck",
      "/// import 顺序: 依赖库/vue组件/其他/CSS Module",
      "",
      "/// 常量(UPPER_CASE), 单例/变量(camelCase), 函数(无副作用,camelCase)",
      "",
      "/** emit: (事件名: [参数列表, ...]) */",
      "export default {",
      "  /// 顺序: name/extends/mixins/props/provide/inject/model",
      "  ///      components/directives/filters/data/computed/watch/methods",
      "  ///      beforeCreate/created/beforeMount/mounted/beforeUpdate/updated",
      "  ///      activated/deactivated/beforeDestroy/destroyed/errorCaptured",
      "}",
      "</script>",
      "",
      "<style lang=\"scss\" module>",
      ".wrapper {",
      "  text-align: center;",
      "}",
      "</style>",
      ""
    ],
    "description": "vue单文件组件代码模板，使用TypeScript和scss(module)"
  },
  "vue-tsx": {
    "scope": "typescriptreact",
    "prefix": "vue",
    "body": [
      "/** ${1:描述} */",
      "import { Component, CreateElement } from 'vue'",
      "/// import 顺序: 依赖库/vue组件/其他/CSS Module",
      "",
      "/// 常量(UPPER_CASE), 单例/变量(camelCase), 函数(无副作用,camelCase)",
      "",
      "/** emit: (事件名: [参数列表, ...]) */",
      "export default {",
      "  /// 顺序: name/extends/mixins/props/provide/inject/model",
      "  ///      components/directives/filters/data/computed/watch/methods",
      "  ///      beforeCreate/created/beforeMount/mounted/beforeUpdate/updated",
      "  ///      activated/deactivated/beforeDestroy/destroyed/errorCaptured",
      "  // see: https://github.com/vuejs/jsx",
      "  // eslint-disable-next-line @typescript-eslint/no-unused-vars",
      "  render(h: CreateElement) {",
      "    return (",
      "      <div>",
      "        {/* 模块一 */}",
      "        {/* <ModuleOne class={STYLE.wrapper} nativeOn={{ click(e) {} }}>",
      "          <template slot='title'>",
      "            <h4 on={{ click(e) {} }}>模块一</h4>",
      "          </template>",
      "        </ModuleOne> */}",
      "      </div>",
      "    )",
      "  }",
      "} as Component",
      ""
    ],
    "description": "vue tsx单文件组件代码模板"
  },
  "vue-ts-class": {
    "scope": "vue",
    "prefix": "ts-class",
    "body": [
      "<!-- ${1:描述} -->",
      "<template>",
      "  <div :class=\"$$style.wrapper\">",
      "    ${2:示例文字}",
      "  </div>",
      "</template>",
      "",
      "<script lang=\"ts\">",
      "// see: https://github.com/kaorun343/vue-property-decorator",
      "import { Component, Vue } from 'vue-property-decorator'",
      "/// import 顺序: 依赖库/vue组件/其他/CSS Module",
      "",
      "/// 常量(UPPER_CASE), 单例/变量(camelCase), 函数(无副作用,camelCase)",
      "",
      "/** emit: (事件名: [参数列表, ...]) */",
      "/// 顺序: name/extends/mixins/components/directives/filters",
      "@Component",
      "export default class extends Vue {",
      "  /// [model] (@Model('change') readonly attr!: string)",
      "  /// [props] (@Prop() readonly attr!: string)",
      "  /// [data] (attr: string = '' // 除 undefined)",
      "  /// 非响应式属性 (attr?: string // undefined)",
      "  /// [computed] (get attr() {} set attr(){})",
      "  /// [watch] (@Watch('attr') onAttrChange(val, oldVal) {})",
      "  /// [methods] (method(){})",
      "  /// [LifeCycle] (beforeCreate(){}/.../destroyed(){})",
      "}",
      "</script>",
      "",
      "<style lang=\"scss\" module>",
      ".wrapper {",
      "  text-align: center;",
      "}",
      "</style>",
      ""
    ],
    "description": "vue单文件Class组件代码模板，使用TypeScript和scss(module)"
  },
  "vue-tsx-class": {
    "scope": "typescriptreact",
    "prefix": "vue-class",
    "body": [
      "/** ${1:描述} */",
      "import { CreateElement } from 'vue'",
      "// see: https://github.com/kaorun343/vue-property-decorator",
      "import { Component, Vue } from 'vue-property-decorator'",
      "/// import 顺序: 依赖库/vue组件/其他/CSS Module",
      "",
      "/// 常量(UPPER_CASE), 单例/变量(camelCase), 函数(无副作用,camelCase)",
      "",
      "/** emit: (事件名: [参数列表, ...]) */",
      "/// 顺序: name/extends/mixins/components/directives/filters",
      "@Component",
      "export default class extends Vue {",
      "  /// [model] (@Model('change') readonly attr!: string)",
      "  /// [props] (@Prop() readonly attr!: string)",
      "  /// [data] (attr: string = '' // 除 undefined)",
      "  /// 非响应式属性 (attr?: string // undefined)",
      "  /// [computed] (get attr() {} set attr(){})",
      "  /// [watch] (@Watch('attr') onAttrChange(val, oldVal) {})",
      "  /// [methods] (method(){})",
      "  /// [LifeCycle] (beforeCreate(){}/.../destroyed(){})",
      "  // see: https://github.com/vuejs/jsx",
      "  // eslint-disable-next-line @typescript-eslint/no-unused-vars",
      "  protected render(h: CreateElement) {",
      "    return (",
      "      <div>",
      "        {/* 模块一 */}",
      "        {/* <ModuleOne class={STYLE.wrapper} nativeOn={{ click(e) {} }}>",
      "          <template slot='title'>",
      "            <h4 on={{ click(e) {} }}>模块一</h4>",
      "          </template>",
      "        </ModuleOne> */}",
      "      </div>",
      "    )",
      "  }",
      "}",
      ""
    ],
    "description": "vue tsx单文件Class组件代码模板"
  },
  "vuex-ts": {
    "scope": "typescript",
    "prefix": "vuex",
    "body": [
      "/** ${1:动态模块}",
      " * see: https://championswimmer.in/vuex-module-decorators",
      " */",
      "import {",
      "  VuexModule,",
      "  Module,",
      "  getModule,",
      "  Mutation,",
      "  Action,",
      "} from 'vuex-module-decorators'",
      "import store from '${2:../}'",
      "",
      "/** ${1:动态模块} */",
      "interface ${3:IDynamic} {",
      "  /** 是否动态 */",
      "  dynamic: boolean",
      "",
      "  // ...",
      "}",
      "",
      "/** ${1:动态模块} */",
      "@Module({ dynamic: true, namespaced: true, name: '${4:dynamic}', store })",
      "class ${5:Dynamic} extends VuexModule implements ${3:IDynamic} {",
      "  /// State & Getter(public) ///",
      "  dynamic = true",
      "",
      "  /// Mutation ///",
      "  @Mutation",
      "  DYNAMIC(dynamic: boolean) {",
      "    this.dynamic = dynamic",
      "  }",
      "",
      "  /// Action ///",
      "  /** 初始化是否动态属性 */",
      "  @Action",
      "  async initDynamic() {",
      "    const dynamic = await Promise.resolve(true)",
      "    this.DYNAMIC(dynamic)",
      "  }",
      "}",
      "",
      "export default getModule(${5:Dynamic})",
      "export { ${3:IDynamic} }",
      "",
    ],
    "description": "vuex模块class语法"
  },
  "vue-js": {
    "scope": "vue",
    "prefix": "js",
    "body": [
      "<!-- ${1:描述} -->",
      "<template>",
      "  <div :class=\"$$style.wrapper\">",
      "    ${2:示例文字}",
      "  </div>",
      "</template>",
      "",
      "<script>",
      "// @ts-nocheck",
      "/// import 顺序: 依赖库/vue组件/其他/CSS Module",
      "",
      "/// 常量(UPPER_CASE), 单例/变量(camelCase), 函数(无副作用,camelCase)",
      "",
      "/** emit: (事件名: [参数列表, ...]) */",
      "export default {",
      "  /// 顺序: name/extends/mixins/props/provide/inject/model",
      "  ///      components/directives/filters/data/computed/watch/methods",
      "  ///      beforeCreate/created/beforeMount/mounted/beforeUpdate/updated",
      "  ///      activated/deactivated/beforeDestroy/destroyed/errorCaptured",
      "}",
      "</script>",
      "",
      "<style lang=\"scss\" module>",
      ".wrapper {",
      "  text-align: center;",
      "}",
      "</style>",
      ""
    ],
    "description": "vue单文件组件代码模板，使用JavaScript和scss(module)"
  },
  "vue-jsx": {
    "scope": "javascriptreact",
    "prefix": "vue",
    "body": [
      "/** ${1:描述} */",
      "/// import 顺序: 依赖库/vue组件/其他/CSS Module",
      "",
      "/// 常量(UPPER_CASE), 单例/变量(camelCase), 函数(无副作用,camelCase)",
      "",
      "/** emit: (事件名: [参数列表, ...]) */",
      "export default {",
      "  /// 顺序: name/extends/mixins/props/provide/inject/model",
      "  ///      components/directives/filters/data/computed/watch/methods",
      "  ///      beforeCreate/created/beforeMount/mounted/beforeUpdate/updated",
      "  ///      activated/deactivated/beforeDestroy/destroyed/errorCaptured",
      "  // see: https://github.com/vuejs/jsx",
      "  // eslint-disable-next-line @typescript-eslint/no-unused-vars",
      "  render(h) {",
      "    return (",
      "      <div>",
      "        {/* 模块一 */}",
      "        {/* <ModuleOne class={STYLE.wrapper} nativeOn={{ click(e) {} }}>",
      "          <template slot='title'>",
      "            <h4 on={{ click(e) {} }}>模块一</h4>",
      "          </template>",
      "        </ModuleOne> */}",
      "      </div>",
      "    )",
      "  }",
      "}",
      ""
    ],
    "description": "vue jsx单文件组件代码模板"
  },
  "vue-js-class": {
    "scope": "vue",
    "prefix": "js-class",
    "body": [
      "<!-- ${1:描述} -->",
      "<template>",
      "  <div :class=\"$$style.wrapper\">",
      "    ${2:示例文字}",
      "  </div>",
      "</template>",
      "",
      "<script>",
      "// see: https://github.com/kaorun343/vue-property-decorator",
      "import { Component, Vue } from 'vue-property-decorator'",
      "/// import 顺序: 依赖库/vue组件/其他/CSS Module",
      "",
      "/// 常量(UPPER_CASE), 单例/变量(camelCase), 函数(无副作用,camelCase)",
      "",
      "/** emit: (事件名: [参数列表, ...]) */",
      "/// 顺序: name/extends/mixins/components/directives/filters",
      "@Component",
      "export default class extends Vue {",
      "  /// [model] (@Model('change') attr)",
      "  /// [props] (@Prop() attr)",
      "  /// [data] (attr = '' // 除 undefined)",
      "  /// 非响应式属性 (attr // undefined)",
      "  /// [computed] (get attr() {} set attr(){})",
      "  /// [watch] (@Watch('attr') onAttrChange(val, oldVal) {})",
      "  /// [methods] (method(){})",
      "  /// [LifeCycle] (beforeCreate(){}/.../destroyed(){})",
      "}",
      "</script>",
      "",
      "<style lang=\"scss\" module>",
      ".wrapper {",
      "  text-align: center;",
      "}",
      "</style>",
      ""
    ],
    "description": "vue单文件Class组件代码模板，使用JavaScript和scss(module)"
  },
  "vue-jsx-class": {
    "scope": "javascriptreact",
    "prefix": "vue-class",
    "body": [
      "/** ${1:描述} */",
      "// see: https://github.com/kaorun343/vue-property-decorator",
      "import { Component, Vue } from 'vue-property-decorator'",
      "/// import 顺序: 依赖库/vue组件/其他/CSS Module",
      "",
      "/// 常量(UPPER_CASE), 单例/变量(camelCase), 函数(无副作用,camelCase)",
      "",
      "/** emit: (事件名: [参数列表, ...]) */",
      "/// 顺序: name/extends/mixins/components/directives/filters",
      "@Component",
      "export default class extends Vue {",
      "  /// [model] (@Model('change') attr)",
      "  /// [props] (@Prop() attr)",
      "  /// [data] (attr = '' // 除 undefined)",
      "  /// 非响应式属性 (attr // undefined)",
      "  /// [computed] (get attr() {} set attr(){})",
      "  /// [watch] (@Watch('attr') onAttrChange(val, oldVal) {})",
      "  /// [methods] (method(){})",
      "  /// [LifeCycle] (beforeCreate(){}/.../destroyed(){})",
      "  // see: https://github.com/vuejs/jsx",
      "  // eslint-disable-next-line @typescript-eslint/no-unused-vars",
      "  render(h) {",
      "    return (",
      "      <div>",
      "        {/* 模块一 */}",
      "        {/* <ModuleOne class={STYLE.wrapper} nativeOn={{ click(e) {} }}>",
      "          <template slot='title'>",
      "            <h4 on={{ click(e) {} }}>模块一</h4>",
      "          </template>",
      "        </ModuleOne> */}",
      "      </div>",
      "    )",
      "  }",
      "}",
      ""
    ],
    "description": "vue jsx单文件Class组件代码模板"
  },
  "vuex-js": {
    "scope": "javascript",
    "prefix": "vuex",
    "body": [
      "/** ${1:动态模块}",
      " * see: https://championswimmer.in/vuex-module-decorators",
      " */",
      "import {",
      "  VuexModule,",
      "  Module,",
      "  getModule,",
      "  Mutation,",
      "  Action,",
      "} from 'vuex-module-decorators'",
      "import store from '${2:../}'",
      "",
      "/** ${1:动态模块} */",
      "@Module({ dynamic: true, namespaced: true, name: '${3:dynamic}', store })",
      "class ${4:Dynamic} extends VuexModule {",
      "  /// State & Getter ///",
      "  dynamic = true",
      "",
      "  /// Mutation ///",
      "  @Mutation",
      "  DYNAMIC(dynamic) {",
      "    this.dynamic = dynamic",
      "  }",
      "",
      "  /// Action ///",
      "  /** 初始化是否动态属性 */",
      "  @Action",
      "  async initDynamic() {",
      "    const dynamic = await Promise.resolve(true)",
      "    this.DYNAMIC(dynamic)",
      "  }",
      "}",
      "",
      "export default getModule(${4:Dynamic})",
      "",
    ],
    "description": "vuex模块class语法"
  },
}