本文已参与「新人创作礼」活动，一起开启掘金创作之路。
webstorm是一款非常强大的编辑器，无需像vscode一样需要用户自己安装很多插件，之前用自带的vue模板写vue2的代码还可以应付，最近公司引入了vue3+ts，舍弃了之前的options的写法，转战composition，这对之前的编码习惯还是一个不小的挑战，感觉把vue代码思路变成的函数式变成，有一点像react，在学习之余发现需要自定义一个模板，直接上步骤。
点击File->Settings
搜索File and Code Templates
点击加号，然后如图所示操作，给模板起名字，加后缀，选择下面两个选项，还可以加描述（不加也行）
本文具体代码如下所示
<template>
<div></div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
return {}
}
})
</script>
<style scoped></style>
更新：可以添加最新的setup语法糖，这样就不需要在setup函数中return变量，声明就能使用，代码会更加美观，写起来也更加得心应手。
<template>
<div></div>
</template>
<script setup>
</script>
<style scoped lang=less>
</style>
还有几种常见的模板，放在这里供大家参考
<template>
<div></div>
</template>
<script>
export default {
data () {
return {}
},
components: {},
props: {},
computed: {},
watch: {},
methods: {},
setup () {
},
onBeforeMount () {
},
onMounted () {
},
onBeforeUpdate () {
},
onUpdated () {
},
onBeforeUnmount () {
},
onUnmounted () {
}
}
</script>
<style scoped>
</style>
这是之前一直用的vue2模板，生命周期函数都放在上面了，如果用不到那么多可以直接删掉，有时候会引发eslint的报错问题，如果公司没有很严格的代码要求，建议关掉。
<template>
<div></div>
</template>
<script>
export default {
data () {
return {}
},
components: {},
props: {},
computed: {},
watch: {},
methods: {},
beforeCreate (){
},
created () {
},
beforeMount () {
},
mounted () {
},
beforeUpdate () {
},
updated () {
},
beforeDestroy () {
},
destroyed () {
},
activated () {
}
}
</script>
<style scoped>
</style>
