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>


目录
相关文章
|
3月前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
66 11
|
1天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
1月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
1月前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
2月前
|
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版本创建项目的配置文件配置方法。
110 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 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
450 4
|
2月前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
46 3
|
2月前
|
存储 前端开发 中间件
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
449 0
|
3月前
|
JavaScript
vue项目中使用vue-router进行路由配置及嵌套多级路由
该文章详细说明了如何在Vue项目中配置和使用vue-router进行单页面应用的路由管理,包括设置嵌套路由和实现多级路由导航的示例。
vue项目中使用vue-router进行路由配置及嵌套多级路由
|
3月前
|
JavaScript 前端开发 开发者
Vue3:快速生成模板代码
Vue3:快速生成模板代码

热门文章

最新文章

下一篇
DataWorks