VsCode一键生成.vue模板

最新推荐文章于 2024-08-28 10:59:32 发布
最新推荐文章于 2024-08-28 10:59:32 发布
阅读量875 收藏 4
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sl010420/article/details/101215658
版权
本文介绍了如何在VsCode中通过安装插件和设置快捷键，实现一键生成.vue文件模板的步骤，包括安装VsCode，安装相关插件，配置快捷键Ctrl+E搜索vue，以及使用模板创建.vue文件的方法。
摘要由CSDN通过智能技术生成

一、安装vsCode

官网地址:https://code.visualstudio.com/

二、安装插件

点击左侧菜单栏中第五个图标或者使用快捷键 Ctrl+Shift+x 搜索 Vetur 进行安装即可

在这里插入图片描述

三、快捷键Ctrl+E 搜索vue

在这里插入图片描述
在这里插入图片描述

输入vue找到vue.json 把里面的内容替换成下面的配置就行


把里面的配置改为以下配置就ok
{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<!-- $1 -->",
            "<template>",
            "<div class='$2'>$5</div>",
            "</templa
最低0.47元/天 解锁文章
CN_Gao
关注
专栏目录
VScode中快速生成vue模板
weixin_38924500的博客
05-04 5821
打开vs code 界面左下角如图所示： 在搜索框内搜索vue.json文件，可能显示的是vue，或者没有，如果没有你可以先在vs code中下载Vetur插件。 vue.json默认是： 要快速生成vue模板，需要在其中编辑加入下列代码： "Vue": { "prefix": "vue", "body": [ "<template>", " <div>\n", "
VSCode 编写vue项目之一键生成.vue模版
持 开源思想，撰 必胜所学，望 勤学者，无难处
05-17 1092
说明: 1. vue.json 文件保存在：C:\Users\”自己计算机的用户名“\AppData\Roaming\Code\User\snippets\vue.json。2.在.vue模板代码中："prefix": "vue"，决定了通过“vue” 命令来生成模板代码，这个可以自定义。在弹出的输入框输入：vue.json (如果没有反应，那就尝试只输入“vue”) ，接着enter。在.vue的文件中输入代码：vue。
vscode用快捷键一键生成vue模板
joan_yb的博客
08-08 802
vscode用快捷键一键生成vue模板
vscode vue html 用户片段
qq_40829621的博客
03-12 977
"vue htm": { "scope": "html", "prefix": "vuehtml", "body": [ "<!DOCTYPE html>", "<html lang=\"en\">", "", "<head>", " <meta charset=\"UTF-8\">", " <meta name=\"viewport\" content=\"width=device-width,init.
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模板
wangzilong8的博客
03-26 706
{ "Print to console": { "prefix": "vue", "body": [ "<!-- -->", "<template>", " <div></div>", "</template>", "<script>", ...
vscode一键生成vue模板方法
qq_39111074的博客
06-26 9904
vscode一键生成vue模板方法
vsCode 快速生成vue 模板
热门推荐
versionli的博客
06-13 2万+
1.使用快捷Ctrl + Shift + P唤出控制台 2，然后输入“snippets”并选择 2.接着输入vue， vs code自动生成vue.json文件。 3. 将vue.json文件改为下面得模板（可以根据个人需求修改当中的模板内容） { "Print to console": { "prefix": "vue", "body": [ ...
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
10-15
在处理Vue项目时，VSCode允许开发者通过自定义代码片段来提高编码效率，例如一键生成`.vue`文件模板。这篇文章将详细介绍如何在VSCode中设置和使用这些模板，以及如何修改定义其他模板的方法。 首先，为了能够更好...
VSCode 使用快捷键vh一键生成.vue模版
yoghurt&girl的博客
09-25 5622
文件——首选项——配置用户代码，当然我们也可以通过左下角下面的设置按钮进入二、接下来将下面这段代码复制到我们新建的json文件中，注意放在{}内"
vscode快速生成vue2及vue3模版
weixin_54048131的博客
01-14 5833
在中，我们每次新建页面都会需要写一大部分重复代码。那么有什么办法，能够建立模版：vscode是可以进行相关配置的。
vscode如何快捷键一键生成vue模板
我是小奶音啊的博客
04-18 1万+
一、点击File—>Preferences---->User Snippets 二、然后会出现一个输入框，输入vue然后回车 三、会出现一个vue.json的文件 四、然后在该文件内配置如下代码,也可以按照自己的需求配置 vue.json 文件 { // Place your snippets for vue here. Each snippet is defined und...
VSCode 一键生成.vue模版
兔子零
01-17 503
一、新建模板配置文件vue.json 有三个方法,用哪个都行： 使用快捷Ctrl + Shift + P唤出控制台，然后输入snippets并选择,输入 vue.json ，然后回车。 文件>首选项>用户代码片断里面，输入 vue.json ，然后回车 file > Preferences > User Snippets，当弹出搜索框之后，输入 vue.js...
VSCode - 一键生成.vue模版
最新发布
qq_22015625的博客
08-28 162
文件替换以下模板内容（可根据个人需求修改当中的模板内容），当弹出搜索框之后，输入。唤出控制台，然后输入。键，模板就自动生成了。
配置vscode使其自动生成vue组件模板功能
weixin_44860226的博客
01-14 5468
在用vsCode进行日常开发过程中，我们如何一打vue就弹出vue的模板提示，然后点回车自动生成一个vue模板。在vscode下面的小齿轮中找到“配置用户代码片段” 在弹出的搜索框中搜索。这个功能是如何设置的呢？
vue代码片段
xunhaomeng的博客
12-05 903
{ // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will b...
Vscode 怎么运行.vue文件
03-31
要在Vscode中运行.vue文件，您需要安装Vue.js扩展。安装后，您可以使用以下步骤来运行.vue文件： 1. 在Vscode中打开.vue文件。 2. 在文件的顶部找到“Script”标签，并确保其中包含以下代码： ``` export ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值