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

最新推荐文章于 2024-08-12 16:29:23 发布

柴本柴柴

最新推荐文章于 2024-08-12 16:29:23 发布

阅读量1.5k

点赞数 1

分类专栏： vue 文章标签： vue.js webstorm 前端

本文链接：https://blog.csdn.net/qq_35641337/article/details/121268156

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

一、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博客