在vs code 中创建一个自己的 Vue 模板代码

最新推荐文章于 2024-07-12 16:09:07 发布
最新推荐文章于 2024-07-12 16:09:07 发布
阅读量594 收藏 3
点赞数
分类专栏： 前端杂记 文章标签： vue.js javascript html5 vscode vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43831691/article/details/109597185
版权
本文介绍如何在Visual Studio Code (VS Code)中创建个人风格的Vue模板代码，以提高开发效率。通过设置->用户代码片段，新建模板，定义触发字符串和变量，如"vue"作为触发器，$TM_FILENAME_BASE代表当前文件名，从而实现一键生成模板，简化重复工作。
摘要由CSDN通过智能技术生成

我们在开发项目的时候，每次新建同一类型的文件都会写一段一模一样的基本结构，如果每次都手打就会很累，也会浪费时间。所幸基本每一个编辑都有自定义模板代码的功能。作为一名切图仔，我比较习惯使用vs code。这里记录一下如何创建一个符合自己风格的vue模板代码

首先，在vs code 中打开定义模板代码的地方

第一步，点击“设置”图标按钮，在弹出的菜单中点击的“用户代码片段”（也就是模板）
在这里插入图片描述
第二步，在弹出的框中选择新建代码片段（可选为 全局/现在的项目 创建模板）
在这里插入图片描述
第三步，输入要新建的模板名称，然后，回车（这里我已经新建过了）
在这里插入图片描述
然后会自动打开下面这个页面，在这里我们就可以开始新建一个vue模板了
在这里插入图片描述

最低0.47元/天 解锁文章
网络大猩猩
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
VSCode( VisualStudioCode) 写vue项目一键生成.vue模版
01-08
1. 安装一个插件，识别vue文件 2.新建代码片段 文件–>首选项–>用户代码片段–>点击新建代码片段–取名vue.json 确定 3.粘贴入自己写的.vue模板 { Print to console: { prefix: vue, body: [ , , $5 , , , , , export default {, components: {},, data() {, retur
如何使用vscode快速新建.vue代码/.html代码等其他
weixin_38203203的博客
06-19 1897
1.文件 ==> 首选项 ==> 用户代码片段 ==> 输入 vue或html或其他的，看你想创建什么后缀名的快速代码 2.找到后直接添加配置，让vscode允许自定义的代码片段提示出来(找不到也可自己创建)。 3.如下图，给vue.json和html.json配置好了，即以后在这两个后缀名文件下，输入vue都可快速创建代码了(想要什么样的快速代码自行修改)。 4.这...
在VS Code上搭建Vue项目教程（Vue-cli 脚手架）
最新发布
明静致远
07-12 2566
搭建Vue项目使用的是Vue-cli 脚手架。前期环境需要准备就像Java开发要依赖JDK环境一样。
VS Code一键创建Vue代码模板
aojia7477的博客
08-04 126
最近看视频学习vue的时候发现vs code除了使用 !+Tab 在html文件中快速创建模板之外，还可以自己定义，但是视频里面没有教，所以就自己查找了一下方法并和大家分享一下 第一步：文件 ——> 首选项 ——>用户代码片段 第二步：搜索框中输入html.json(如果需要在别的类型的文件中可以输入对应的名字，如：vue.json) 第三步：输入以下代...
WTM(ASP.NET Core)自定义列表按钮动作
sxy_student的博客
03-08 2984
WTM具有强大的代码生成器，可以帮助开发者自动生成增删查改代码和对应的操作视图，十分方便。但是，实际情况下，咱们需要额外开发一些功能来满足客户的使用需求。那么就需要额外添加一些按钮来满足需求。 咱们使用代码生成器，的默认按钮。 protected override List<GridAction> InitGridAction() { ...
ASP.NET Core教程
热门推荐
博客
09-04 1万+
ASP.NET Core教程
vscode配置vue代码模板
baijiaocun的博客
03-30 6330
在开发vue项目过程中，我们需要经常创建.vue的组件文件，这时候就要一遍遍的重写vue组件模板代码，相信大家都有遇到这个问题。现在不需要大家一遍遍写组件模板或者复制粘贴了，只需要在vscode中配置一遍就可全程通用。话不多说，正文由此开始。 1.首先在你的vscode创建个新文件，敲上你想要的组件模板 2. 打开配置生成地址，把你的模板复制到左侧your snippet里面，右侧就会生成配置模版。点击这里。​​​​​​ 3.复制配置模板，在vscode点击左上角文件 >> 首..
解决ASP.NET Core网站 发布按钮不能用的问题
熊老大的专栏
03-25 1293
1.安装从IIS到Kestrel server的反向代理， 下载地址：.NET Core Windows Server Hosting 2.安装完后重启服务，用管理员权限打开命令行： 输入  net stop was /y运行完后再运行 net start w3svc3.重启vs2015就可以发布看到发布按钮从灰色变成可以点击的了
ASP.NET Core 中文教程
chounie7016的博客
11-19 282
ASP.NET Core 中文教程 ASP.NET Core 学习 目录 介绍 第一章 入门 第二章 指南 1用 Visual Studio Code 在 macOS 上创建首个 ASP.NET Core 应用程序 2用 Visual Stud...
.Net Core 3.1 Web API基础知识
weixin_45032957的博客
09-27 1123
在Startup类的ConfigureServices方法内添加以下注入代码： 复制代码 services.AddSwaggerGen(c => { c.SwaggerDoc(“v1”, new OpenApiInfo { Title = “My API”, Version = “v1”, Description = “API文档描述”, Contact = new OpenApiContact { Email = “5007032@qq.com”, Name = “测试项目”, //Url = ne
.Net Core零基础实战教程合集
01-05
灵活使用.NET Core的运行环境和各种拦截器,以及利用多种不同方式实现日志记录.对接EFCore实现基础的增删改查操作
.Net Core3.1下使用Swagger搭建web api项目
dotNET跨平台
12-09 1249
前言：微软于前天发布.net core 3.1正式版,并将长期支持3.1。所以我听到这个消息后就急忙下载.net core 3.1的SDK和Runtime,应该是公司最先用3.1的攻城狮...
【VSCode新建vue自定义模板】
weixin_43690623的博客
02-20 3425
VSCode新建vue自定义模板1、打开“文件“ -> “首选项” -> “用户片段”2、弹出框中选择“新建全局代码片段文件”3、输入名称，例如“vue.json”，按下“Enter”键，页面跳转至编辑页4、使用 1、打开“文件“ -> “首选项” -> “用户片段” 2、弹出框中选择“新建全局代码片段文件” 3、输入名称，例如“vue.json”，按下“Enter”键，页面跳转至编辑页 模板如下： { // Place your snippets for vue here.
asp net 外观文件_ASP.NET Core 3.1 入门教程（三）
weixin_31001739的博客
11-29 389
在这篇文章中，我将详细讲解ASP.NET Core Project File.如果你还没看我这个系列的前面几篇文章，先去看看，打好基础，再来看这篇吧。如果你使用过之前版本的.NET Framework,你就会知道，当你使用C#创建应用程序的时候，.NET Framework框架将会创建后缀名为”.csproj”的项目文件。同样的，如果你使用的是VB，就会创建后缀名为”.vbproj”的项目文件。但...
vscode之快速生成vue模板的配置
przlovecsdn的博客
08-08 7426
在vscode中点击左下角的设置---用户代码片段---输入：vue.json，将以下代码复制保存，然后新建.vue文件，输入：vue，回车即可。可按需自行添加内容。 { "Print to console": { "prefix": "vue", "body": [ "&lt;template&gt;",
VScode快速创建vue模板
杨葱儿
06-26 5285
输入：vue.json搜索 我是已经创建好了的，所以显示的“现有代码片段”字样，你没有创建或者需要新创建的话，就点击新代码片段 然后就出现以下样子：输入你需要创建的文件名字以.vue结尾哦，创建好后按回车 然后文件内容是： { "Print to console": { "prefix": "vue", "body": [ ...
vscode设置vue模板流程记录
技术交流
07-25 727
第一步: 打开vscode依次打开 文件 --&gt; 首选项 --&gt; 用户代码片段 --&gt; 输入vue，打开vue.json --&gt;清空内容后将以下内容复制进去 { "Print to console": { "prefix": "vue", "body": [ "&lt;template&
vue快速开发模板
weixin_47503016的博客
11-21 395
vue快速开发模板 { "生成vue模板": { "prefix": "vue", "body": [ "<!-- $1 -->", "<template>", "<div class='$2'>$5</div>", "</template>", "", "<s
vscode中的vue代码模板片段在哪里
06-06
在 VS Code 中，Vue 代码模板片段是通过 Vue.js 插件提供的。默认情况下，Vue.js 插件会提供许多常见的 Vue 代码模板片段，如 `template`、`script`、`style` 等。你可以在打开 Vue 文件后输入这些代码片段的前缀...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值