vsCode一键生成vue模板

2024-02-28 11:00:48

1.使用快捷Ctrl + Shift + P唤出控制台

2，然后输入“snippets”并选择

2.接着输入vue，

vs code自动生成vue.json文件。

3. 将vue.json文件改为下面得模板（可以根据个人需求修改当中的模板内容）

{

        "Print to console": {
            "prefix": "vue",
            "body": [
                "<template>",
                "  <div">$0</div>",
                "</template>",
                "",
                "<script>",
                "export default {",
                "  components: {},",
                "  props: {},",
                "  data() {",
                "    return {",
                "    };",
                "  },",
                "  watch: {},",
                "  computed: {},",
                "  methods: {},",
                "  created() {},",
                "  mounted() {}",
                "};",
                "</script>",
                "<style lang=\"scss\" scoped>",
                "</style>"
            ],
            "description": "A vue file template"
        }
    }

然后新建一个 vue 文件，输入“vue”，按下回车键或者Tab键，模板就自动生成了:

到此这篇关于vsCode一键生成vue模板的文章就介绍到这了,更多相关vsCode生成vue模板内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法

1. 安装一个插件,识别vue文件 2.新建代码片段文件–>首选项–>用户代码片段–>点击新建代码片段–取名vue.json 确定 3.粘贴入自己写的.vue模板 { "Print to console": { "prefix": "vue", "body": [ "", "<template>", "<d
vsCode一键生成vue模板

1.使用快捷Ctrl + Shift + P唤出控制台 2,然后输入"snippets"并选择 2.接着输入vue, vs code自动生成vue.json文件. 3. 将vue.json文件改为下面得模板(可以根据个人需求修改当中的模板内容) { "Print to console": { "prefix": "vue", "body": [ "<template>", &
在vscode 中设置 vue模板内容的方法

vscode中设置 vue 模板内容缘由设置要求1:vscode 先下载插件 `vetur`2: 菜单栏 -文件 - 首选项 - 用户代码片段3:使用缘由由于每次在 vscode 中创建vue的文件的时候,都需要手动书写 templete,模板 script,脚本 style,样式这些重复和繁琐的事情,是可以定义一个模板信息的设置要求 1:vscode 先下载插件 vetur 2: 菜单栏 -文件 - 首选项 - 用户代码片段以下是借鉴一下谷粒商城的提供 vue 模板信息和 htt
VsCode里的Vue模板的实现

如何自定义自己的开发模板?你需要这几步: 点击VsCode左上角的"文件" : 找到 "首选项" 并点击首选项里的 "用户片段": 输入 "vue.json" 点击进入该文件现在你就能编辑自己的Vue页面开发模板了! 下面是我的模板代码: { "Print to console": { "prefix": "vue", "body": [ &qu
使用vscode快速建立vue模板过程详解

当我们希望每次新建.vue文件后,vscode能够根据配置,自动生成我们想要的内容. 打开vscode编辑器,依次选择"文件 -> 首选项 -> 用户代码片段",此时,会弹出一个搜索框,我们输入vue,将代码ctrl+c 到vue-html.json { "Print to console": { "prefix": "vue", "body": [ "
vscode自定义vue模板的实现

用vscode编辑器创建vue模板,再也不用每次新建vue文件的时候都去一遍遍的重复敲某些代码片段.输入 vue 再按回车键,即可生成自定义的vue文件内容,相当的好使,开发效率蹭蹭的上去了. 打开vscode,选择文件 > 首选项 > 用户片段.随后在出现的输入框内输入vue,按回车键.打开了一个叫vue.json的文件.如图: 图片内容已经是添加了相应的模板内容了,解释下,prefix字段表示的是自定义指令,就是我们在vue文件里面输入的vue标签,按回车即可生成自定义的文件内容:body
VsCode工具开发vue项目必装插件清单(推荐!)

目录 1.概述 2.VsCode插件清单 2.1.Vetur插件让vue文件代码高亮 2.2.Vue VSCode Snippets自动生成vue模板内容插件 1.安装插件 2.使用插件生成vue模板代码 2.3.LiveServer实时刷新网页 1.安装LiveServer 2.使用LiveServer打开网页 3.开启自动保存 2.4.开发工具设置2个空格缩进 2.5.browser插件浏览器插件查看html文件 1.安装创建 2.浏览html文件 2.6.设置目录分级显示 2.7.Brac
在vscode里使用.vue代码模板的方法

1.设置.vue模板打开编辑器,点击文件 -- 首选项 -- 用户代码片段,会弹出来一个输入框. 在输入框输入vue,回车,会打开一个vue.json文件. 在里面复制以下代码: { "Print to console": { "prefix": "vue", "body": [ "<template>", " <div class=\"container\"
通过npm或yarn自动生成vue组件的方法示例

不知道大家每次新建组件的时候,是不是都要创建一个目录,然后新增一个.vue文件,然后写template.script.style这些东西,如果是公共组件,是不是还要新建一个index.js用来导出vue组件.虽然有vscode有代码片段能实现自动补全,但还是很麻烦,今天灵活运用scripts工作流,自动生成vue文件和目录. 实践步骤安装一下chalk,这个插件能让我们的控制台输出语句有各种颜色区分 npm install chalk --save-dev yarn add chalk --s
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component

介绍做前端的大家都知道通过 vue 开发的项目每次创建新组建的时候,都要新建一个目录,然后新增 .vue 文件,在这个文件中再写入 template . script . style 这些内容,虽然在写入的时候大家都有自己的自动补全共计,不过这些都是模板性的,每次都要这样重复操作,很麻烦有没有. 本文就是通过node来帮助我们,自动去执行这些重复操作,而我们只需要告诉控制台我们需要创建的组件名字就可以了. 本文自动创建的组件包含两个文件:入口文件 index.js .vue文件 main.vu

vsCode一键生成vue模板

相关推荐

随机推荐