小技巧

Posted 2021-03-02 xiaolucky

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小技巧相关的知识，希望对你有一定的参考价值。

## 小技巧

### vscode 自动生成.vue 文件三组标签结构的用法

1. 选择 `文件 -> 首选项 -> 用户代码片段`，在弹出的搜索框中输入 vue，选择 vue 后，编辑会自动打开一个名为 vue.json 的文件

2. 输入一下内容到这个文件中，保存关闭文件：

```json
{
  "Print to console": {
    "prefix": "vue",
    "body": [
     "<template>",
      "  <div></div>",
      "</template>",
      "",
      "<script>",
      "import CSSModules from ‘vue-css-modules‘",
      "export default {",
      "  name: $0,",
      "  mixins: [CSSModules()],",
      "  components: {",
      "  },",
      "  props: {",
      "  },",
      "  data () {",
      "    return {",
      "    }",
      "  },",
      "  mounted () {",
        "  },",
      "  methods: {",
        "  }",
      "}",
      "",
      "</script>",
      "",
      "<style module lang=‘scss‘>",
      "</style>"
    ],
    "description": "回车自动生成代码模板"
  }
}
```

3. 新建.vue文件，输入vue，按回车，页面结构自动生成

以上是关于小技巧的主要内容，如果未能解决你的问题，请参考以下文章