WebStorm配置代码模板【以vue模板为例,提供vue代码模板】

简介: WebStorm配置代码模板【以vue模板为例,提供vue代码模板】

配置过程

引言

为了便于开发,提高生产效率,我们通常会复制粘贴一些共同代码,在WebStorm中,可以将这些共同代码制作成模板,在使用的时候,只需要输入关键字+点击按键即可将模板的代码粘贴到代码文件中,简直是爽歪歪。

步骤(以WebStorm2023版本展示)

以下是配置的过程,请不要眨眼睛:

打开设置

首先找到设置,一般长成齿轮的模样,每个版本的WebStorm的设置位置可能会有些许不同,用你的火眼金睛找到即可。

打开设置

进行配置

进入设置之后,界面如下图所示,首先依次点击step1step2step3所示按钮。后面的操作不分先后顺序,需要设置关键词、复制粘贴共同代码、设置输入关键词之后的键位、勾选、设置关键词生效的文件

最后点击窗口右下角的ok,配置到此结束

使用

首先在需要使用模板代码的文件里面输入关键词,我这里的关键词是vue,如下图所示

接着,按下键盘的按键tab,代码就全部出来了,是不是非常舒服

Vue模板

下面是我的vue通用代码模板,直接复制粘贴进去即可,如果你觉得不行,改成你的就行

<template>
    <div>
    </div>
</template>
<script>
export default {
    components: {},
    data() {
        return {};
    },
    computed: {},
    watch: {},
    methods: {},
    beforeCreate() {
    },
    created() {
    },
    beforeMount() {
    },
    mounted() {
    },
    beforeUpdate() {
    },
    updated() {
    },
    beforeDestroy() {
    },
    destroyed() {
    },
    activated() {
    },
}
</script>
<style scoped>
</style>


目录
相关文章
|
1月前
|
JavaScript 前端开发 编译器
Vue的模板编译原理
在 Vue.js 中模板功能变得更为灵活,这依赖于其强大的模板编译功能。模板编译的主要功能是将模板编译成为渲染函数,而渲染函数则会根据应用状态生成 vnode,再通过 vnode 进行渲染。
|
1月前
|
JavaScript 前端开发
请详细解释一下Vue的模板语法中各个指令的具体用法。
请详细解释一下Vue的模板语法中各个指令的具体用法。
20 2
|
1月前
vue3配置路由报错Catch all routes (“*“) must now be defined using a param with a custom regexp.
vue3配置路由报错Catch all routes (“*“) must now be defined using a param with a custom regexp.
44 0
|
3天前
|
资源调度 JavaScript 前端开发
Vue的路由管理:VueRouter的配置和使用
【4月更文挑战第24天】VueRouter是Vue.js的官方路由管理器,用于在单页面应用中管理URL路径与组件的映射。通过安装并引入VueRouter,设置路由规则和创建router实例,可以实现不同路径下显示不同组件。主要组件包括:`&lt;router-link&gt;`用于创建导航链接,`&lt;router-view&gt;`负责渲染当前路由对应的组件。此外,VueRouter还支持编程式导航和各种高级特性,如嵌套路由、路由参数和守卫,以应对复杂路由场景。
|
8天前
|
JavaScript 前端开发
ant design vue 配置菜单外部打开
ant design vue 配置菜单外部打开
14 0
|
10天前
|
JavaScript
vue3+vite项目配置ESlint
vue3+vite项目配置ESlint
12 0
|
16天前
|
JavaScript API
vue 模板引用
vue 模板引用
|
1月前
|
JavaScript
|
1月前
|
自然语言处理 JavaScript 前端开发
Vue.js 深度解析:模板编译原理与过程
Vue.js 深度解析:模板编译原理与过程
|
1月前
|
缓存 JavaScript 前端开发
VUE模板渲染
VUE模板渲染
26 4