IDEA VUE 完成模板

╰半夏微凉° 2024-03-23 16:37 9阅读 0赞

首先IDEA上安装VUE的插件

File > Plugins > Marketplace > vue

![6fee33821eda4788985383cb479536c4.png][]

设置VUE模板位置

File > Settings > Editor > File and Code Templates > Files > Vue Signle File Component

注意取消勾选 Reformat according to style （取消自动重新格式化）

![99d7f08b26d44f78a055945acf083303.png][]

<template>
    #[[$END$]]#
    </template>
    
    <script>
      export default {
        name: "${COMPONENT_NAME}",
        components: {},
        props: {},
        data() {
          return{}
        },
        //计算属性 类似于data概念
        computed: {},
        //监控data中的数据变化
        watch: {},
        //方法集合
        methods: {},
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {},
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {},
        //生命周期 - 创建之前
        beforeCreate() {},
        //生命周期 - 挂载之前
        beforeMount() {},
        //生命周期 - 更新之前
        beforeUpdate() {},
        //生命周期 - 更新之后
        updated() {},
        //生命周期 - 销毁之前
        beforeDestroy() {},
        //生命周期 - 销毁完成
        destroyed() {},
        //如果页面有keep-alive缓存功能，这个函数会触发
        activated() {} 
      };
    </script>
    
    <style scoped>
    
    </style>

解决IDEA新建无法创建vue文件的问题

找到vue模板点击4，复制出vue组件模板

![e829eb40b4ea49a8bc4f8aab05e6fc51.png][]

底部会出现，一个复制的vue组件模板，将name和模板中的值修改成，

（Name为Vue Component，在代码模板中将原 " \{COMPONENT\_NAME\}" 修改为 name: “COMPONENT NAME"修改为name:”\{NAME\}”）如下图所示

![ad7642cca3f945ee8abb0f68fcb05603.png][]

[6fee33821eda4788985383cb479536c4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/daca2fb2a0a64356a7eedb304a77d6f8.png
[99d7f08b26d44f78a055945acf083303.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/7c5d51b958bd44ce902debdb802bb623.png
[e829eb40b4ea49a8bc4f8aab05e6fc51.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/090c5cc341a746e892a6c06915aaa3d0.png
[ad7642cca3f945ee8abb0f68fcb05603.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/236fdcf7bb4a45939662aab168e08d8c.png