vue开发常用模板

模板一： vs code

"vue 组件基构": {
    "prefix": "vue",
    "body": [
      "<template>",
      "  <article class=\"$TM_FILENAME_BASE\">",
      "  </article>",
      "</template>",
      "<script type=\"text/JSX\">",
      "// import aa from ''",
      "export default {",
      "  // components: {},",
      "  name: '$TM_FILENAME_BASE',",
      "  // 接收父组件值",
      "  // props: {},",
      "  data() {",
      "    return {}",
      "  },",
      "  // 筛选 - 处理",
      "  // filters: {},",
      "  // 计算属性",
      "  // computed: {},",
      "  // 数据监控",
      "  // watch: {},",
      "  // 生命周期 - 创建后",
      "  // created () {},",
      "  // 生命周期 - 挂载后",
      "  // mounted () {},",
      "  // 组件内 - 导航守卫 - 前置守卫",
      "  // beforeRouteEnter(to, from, next) {",
      "  //  next(vm => {})",
      "  // }",
      "  // 组件内 - 导航守卫 - 后置守卫",
      "  // beforeRouteLeave(to, from, next) {",
      "  //   next()",
      "  // },",
      "  // 事件",
      "  methods: {}",
      "}",
      "</script>",
      "<style lang=\"less\" scoped>",
      ".$TM_FILENAME_BASE {}",
      "</style>",
      ""
    ],
    "description": "vue 基础搭建框架"

模板二：webStorm

<template>
  <article class="${COMPONENT_NAME}">
    #[[$END$]]#
  </article>
</template>
<script type="text/JSX">
// import aa from ''
export default {
  // components: {},
  name: '${COMPONENT_NAME}',
  // 接收父组件值
  // props: {},
  data() {
    return {}
  },
  // 筛选 - 处理
  // filters: {},
  // 计算属性
  // computed: {},
  // 数据监控
  // watch: {},
  // 生命周期 - 创建后
  // created () {},
  // 生命周期 - 挂载后
  // mounted () {},
  // 组件内 - 导航守卫 - 前置守卫
  // beforeRouteEnter(to, from, next) {
  //  next(vm => {})
  // }
  // 组件内 - 导航守卫 - 后置守卫
  // beforeRouteLeave(to, from, next) {
  //   next()
  // },
  // 事件
  methods: {}
}
</script>
<style lang="less" scoped>
.${COMPONENT_NAME} {}
</style>

附： vs Code自动根据Eslin自动格式化代码部分

{ // 最外边的大括号
// 追加
"eslint.autoFixOnSave": true, //  启用保存时自动修复,默认只支持.js文件
  "eslint.validate": [
    "javascript", //  用eslint的规则检测js文件
    {
      "language": "vue", // 检测vue文件
      "autoFix": true //  为vue文件开启保存自动修复的功能
    },
    {
      "language": "html",
      "autoFix": true
    },
  ],
  "workbench.startupEditor": "none",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}