vscode自定义vue模板的实现

用vscode编辑器创建vue模板，再也不用每次新建vue文件的时候都去一遍遍的重复敲某些代码片段。输入 vue 再按回车键，即可生成自定义的vue文件内容，相当的好使，开发效率蹭蹭的上去了。

打开vscode，选择文件 > 首选项 > 用户片段。随后在出现的输入框内输入vue，按回车键。打开了一个叫vue.json的文件。如图：

图片内容已经是添加了相应的模板内容了，解释下，prefix字段表示的是自定义指令，就是我们在vue文件里面输入的vue标签，按回车即可生成自定义的文件内容；body里面就是我们自定义的内容了。\t是制表符，我这里主要是做格式化代码用

创建完vue模板后，就可以通过vue来创建文件啦！如下图：

代码内容：

 "Print to console": {
 "prefix": "vue",
 "body": [
 "<!-- $0 -->",
 "<template>",
  "\t<div>",
  "",
  "\t</div>",
 "</template>",
 "",
 "<script>",
 "export default {",
    "\tname: '',",
 "\tcomponents: {},",
 "\tdata () {",
 "\treturn {",
 "\t}",
 "\t},",
 "\tmounted () {},",
 "\tmethods: {}",
 "}",
 "</script>",
 "<style scoped='scss' scoped>",
 "</style>"
 ],
 "description": "vue output to vue-template"
  }

此时有没发现vue模板是把开发的利器，好使好使！！！！！

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

赞 (0)

相关推荐

  • 在vscode里使用.vue代码模板的方法

    在vscode里使用.vue代码模板的方法

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

  • 在vscode 中设置 vue模板内容的方法

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

  • 使用vscode快速建立vue模板过程详解

    使用vscode快速建立vue模板过程详解

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

  • VsCode里的Vue模板的实现

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

  • vscode vue 文件模板的配置方法

    1. 安装VueHelper插件 2. 寻找 vue.json 按顺序点击vscode的: 文件 首选项 用户代码片段 接着搜索框中输入 vue, 回车 3. 填写模板内容 直接复制一下内容到 vue.json { "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>\n",

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

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

  • vscode自定义vue模板的实现

    vscode自定义vue模板的实现

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

  • vsCode一键生成vue模板

    vsCode一键生成vue模板

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

  • VUE 自定义组件模板的方法详解

    VUE 自定义组件模板的方法详解

    本文实例讲述了VUE 自定义组件模板的方法.分享给大家供大家参考,具体如下: 先说下需求吧,因为客户的用户群比较大,如果需求变动,频繁更新版本就需要重新开发和重新发布,影响用户的体验,考虑到这一层就想到,页面展示效果做动态可配,需求更新时,重新配置一份模板录入到数据库,然后根据用户选择的模板进行展示. 关于页面展示做的动态可配,我是参考vue的Component组件方式,开始时可能会遇到组件定义后不能加载的情况,并在控制台如下错误:You are using the runtime-only b

  • vscode 插件开发 + vue的操作方法

    如果我们需要在vscode中嵌入自己开发的vue页面就需要以下的操作 1.把开发好的vue项目打包,如果打包出来的vue执行是空白页,就需要看看之前我写的文章,vue 3 clie打包配置 -这里要注意的是,要确保vue项目里面的public有一个index用作插件打开时的模板,等一下需要做base的特换,不然插件是不知道网页的根目录在哪里 index.html -vue.config.js的配置 <!DOCTYPE html> <html lang="en">

  • vue-cli 3.0 自定义vue.config.js文件,多页构建的方法

    使用自己基于vue-cli 2.X改造的前端多页脚手架有近1年多时间了,一直没机会升级3.0版本 开始零零碎碎开始写一些功能,顺便分享一下 const path = require('path') const glob = require('glob') /** 获取多页的入口脚本和模板 */ const getPages = (() => { const [ globPathHtml, globPathJs, pages, tempSet ] = [ ['./src/modules/**/in

  • vscode 配置vue+vetur+eslint+prettier自动格式化功能

    该配置用于vue开发,最终效果是保存时自动根据eslint对js.html和css代码进行格式化. vscode Vetur插件 Vetur插件用于识别vue文件,原本vetur自带格式化功能,但是和eslint会有冲突,所以没用上. vscode ESlint插件 Eslint插件用于根据工程目录的.eslintrc.js配置文件在编辑器中显示一些错误提示,后面的自定格式化根据这里的错误提示进行格式化操作. 基于vue-cli创建的项目 以下相关步骤需要注意: 创建的时候把Linter/For

  • vscode中Vue别名路径提示的实现

    开发场景 当使用 Vue 框架进行项目开发时,在 vue.config.js 中配置好了路径别名后,到其他页面引入组件.引入 css .引入静态文件路径时,使用路径别名不会智能提示路径.虽然在 vscode 中安装了Path Intellisense插件,但是并无作用.这样容易出现路径拼写错误的低能问题,同时也会造成开发效率降低 解决方案 在项目 package.json 所在同级目录下创建文件 jsconfig.json, 来解决别名路径不提示的问题.(配置完保存文件后需要重启编辑器才能生效.

随机推荐