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>


目录
相关文章
|
2月前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
59 11
|
1天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
18天前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
27 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
1天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
8 4
|
5天前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
15 3
|
13天前
|
存储 前端开发 中间件
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
99 0
|
2月前
|
JavaScript
vue项目中使用vue-router进行路由配置及嵌套多级路由
该文章详细说明了如何在Vue项目中配置和使用vue-router进行单页面应用的路由管理,包括设置嵌套路由和实现多级路由导航的示例。
vue项目中使用vue-router进行路由配置及嵌套多级路由
|
2月前
|
JavaScript 前端开发 开发者
Vue3:快速生成模板代码
Vue3:快速生成模板代码
|
2月前
|
JavaScript
Vue3基础(20)___Vue3配置错误路由重定向写法
本文介绍了Vue 3中配置错误路由重定向的正确写法,包括使用参数和自定义正则表达式来定义通配符路由。
41 0
Vue3基础(20)___Vue3配置错误路由重定向写法
|
26天前
|
JavaScript
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
27 0

热门文章

最新文章