WebStorm配置vue模板文件和vue-ts模板文件

WebStorm配置vue模板文件

第一步:

第二步:

第三步:

这个是WebStorm内置的vue模板文件， 可以直接在这个基础上更改内容

下面是我这边vue模板文件的内容

<style>

</style>
<template>
    <div>
       
    </div>
</template>

<script>

    export default {

        data() {
            return {

            }
        },

        created() {

        },

        mounted() {

        },

        methods: {
            
        },
    }
</script>

WebStorm配置Vue-Ts的模板内容:

按步骤操作即可

爆红是因为演示项目没有引入依赖导致

下面是我这边vue-ts的模板内容

<style>

</style>
<template>
    <div>
       
    </div>
</template>

<script lang="ts">

    import {Vue,Component} from 'vue-property-decorator';

    @Component({
        components:{}
    })
    export default class ${NAME} extends Vue{

        created(){

        }
        
        mounted(){

        }
        
    }
    
</script>