webStorm新建vue页面时自动生成页面的模版

 本文一共两步，一步找设置，一步设置模版

一、ctrl+alt+L打开设置界面，进入以下选项

                

 

        

 

二.复制粘贴以下代码

 注：${COMPONENT_NAME} 是你新建的时候输入的文件名，自动填充文件名

<template>
    <div class="${COMPONENT_NAME}">
    
    </div>
</template>

<script>
    export default {
        name: '${COMPONENT_NAME}',
        data () {
            return {
            }
        },
        
        props: {
        },
        
        //监听属性 类似于data概念",
        computed: {
        
        },
        
        //监控data中的数据变化",
        watch: {
        },
        
        methods: {
        },
        
        //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
        created () {
        },
        
        //生命周期 - 挂载之前",html模板未渲染
        beforeMount() {
        },
        
        //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
        mounted () {
        },
        
        //生命周期 - 更新之前",数据模型已更新,html模板未更新
        beforeUpdate() {
        },
        
        // 生命周期 - 销毁之前调用
        beforeDestroy () {  
        },
        
        //生命周期 - 更新之后",数据模型已更新,html模板已更新
        updated() {
        },
        
        //生命周期 - 销毁完成"
        destroyed () {
        },
        
        //如果页面有keep-alive缓存功能，这个函数会触发",
        activated() {
        }
    }
</script>

<style scoped>
</style>

本文借鉴了以下文章最后部分的代码 webstorm配置vue模板 webstorm快速生成vue模板_西红柿0925的博客-CSDN博客