vsCode 快速生成vue 模板

谁借莪１个温暖的怀抱￠ 2022-10-06 12:56 345阅读 0赞

#  #

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70][]

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

![20210613230356759.png][]

2.接着输入vue，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 2][]

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

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

{
          
            "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"
            }
        }

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 3][]

#  #

#  ================================================ #

# ** 如果你是新手想学前端可以加我，** #

# **如果你是一个有基础，但学习前端没有明确的方向，可以加我** #

# **如果你刚毕业找到前端的工作，但工作上遇到问题或怕遇到问题解决不了的可以加我** #

# **一对一私人指导/教学（费用很便且）：微信：** #

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdmVyc2lvbmxp_size_15_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70]: /images/20221005/f17b6491a103454586b7c0b6f91c6794.png
[20210613230356759.png]: /images/20221005/bab50761a4ea4c36979d69432d7c8eea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/41bd495e7ddc41bd85253226bb97de03.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 2]: /images/20221005/a87faa5719c1446dbbfe479323213bfc.png
[48304ba5e6f9fe08f3fa1abda7d326ab.png]: /images/20221005/87c6202b39804637bf243cecafd3c7fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZlcnNpb25saQ_size_16_color_FFFFFF_t_70 3]: /images/20221005/5639c50b481e4cfea40baf02364b3db7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdmVyc2lvbmxp_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20221005/ff08e3bd85114f1ca18b2ef552e1e1c3.png