单文件组件模板
file>settings>editor>file and code templates
-
点击加号
点击加号 - 输入自己需要的
- 命名（待会会出现你的配置的名称）
- Extension（文件类型）
我们在这里设置了
name:all-options of Vue Single File Component
extension:vue
意为：选择all-options of Vue Single File Component新建一个 *.vue类型的类型的文件。
- 配置内容
配置模板在此
<template>
<div>
#[[$END$]]#
</div>
</template>
<script>
export default {
//* ************** 组件的选项/数据 start **************** *//
name: "${FILE_NAME}",
// 组件内部数据：方法
data () {
return {}
},
// 组件传递属性：对象||数组
props: {},
// 计算属性：对象
computed: {},
// 组件方法：对象
methods: {},
// 组件监听器：对象
watch: {},
//* ************** 组件的选项/数据 end **************** *//
//* ************** 组件的选项/资源 end **************** *//
// 自定义可用组件，如果你要用组件，且组件没有全局引入，就需要import进入后，再声明出来。
components: {},
// 自定义指令
directives: {},
// 自定义过滤器
filters: {},
//* ************** 组件的选项/资源 end **************** *//
//* ************** 组件的选项/生命周期钩子 start **************** *//
// 应用实例 初始化之后 在数据观测和event/watcher之前调用
beforeCreate () {
},
created () {
},
beforeMount () {
},
mounted () {
},
beforeRouteUpdate () {
},
updated () {
},
activated () {
},
deactivated () {
},
becomponentsforeDestroy () {
},
destroyed () {
},
errorCaptured (err, vm, info) {
}
//* ************** 组件的选项/生命周期钩子 end **************** *//
}
</script>
<style scoped>
</style>
- 你也可以根据本模板来修改常用的
例如：
mounted(){
this.$axios.fetch(url,()=>{
})
// balabala…………
}
- 新建模板
项目左侧project区域，右键选择
新建vue模板文件
就可以新建我们常用的vue组件模板了
新建之后的效果如下：
单文件组件效果
