vsCode 快速生成vue 模板

原创已于 2022-10-25 15:59:20 修改 · 3.2w 阅读

182 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vscode #自动生成vue模版

于 2021-06-13 23:12:08 首次发布

vue的使用工具专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何通过VSCode的快捷方式和自定义snippets创建Vue.json文件，并展示如何快速生成Vue组件模板。适合初学者提升开发效率。

1. 用快捷Ctrl + Shift + P唤出控制台

2，然后输入“snippets”并选择

2.接着输入vue，

vs code自动生成vue.json文件。

3. 将vue.json文件改为下面得模板（可以根据个人需求修改当中的模板内容）

复制代码

{
      
        "Print to console": {
            "prefix": "vue",
            "body": [
                "<template>",
                "  <div">$0</div>",
                "</template>",
                "",
                "<script>",
                "export default {",
                "  components: {},",
                "  props: {},",
                "  data() {",
                "    return {",
                "    };",
                "  },",
                "  watch: {},",
                "  computed: {},",
                "  methods: {},",
                "  created() {},",
                "  mounted() {}",
                "};",
                "</script>",
                "<style lang=\"scss\" scoped>",
                "</style>"
            ],
            "description": "A vue file template"
        }
    }

复制代码

然后新建一个 vue 文件，输入“vue”，按下回车键或者Tab键，模板就自动生成了: