vscode vue 模版

继上篇文章(vue 格式化),顺便记录下 vue 模版生成。图片就不在贴了,如果有找不到 vscode 插件商店的可以访问上篇文章。

一、安装 VueHelper

在 vscode 软件商店里搜索插件 VueHelper 插件 进行安装。

二、打开 配置文件

打开 vscode 软件 【文件】---【首选项】---【用户代码片段】在弹出的搜索框里输入 vue 查找 vue.json 回车。

三、更改配置

在 vue.json 里加入以下代码,其中的函数方法按个人习惯自己添加。
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div>\n",
" </div>",
"</template>\n",
"<script>",
" export default {",
" data () {",
" return {\n",
" }",
" },",
" components: {\n",
" }",
" }",
"</script>\n",
"<style lang='stylus' scoped>\n",
" ",
"</style>",
"$2"
],
"description": "Log output to console"
}
最后新建 demo.vue 文件,输入 vue 按下 tab 键,一键生成 vue 模版。

vscode vue 模版生成,vue 一键生成的更多相关文章

  1. VSCode 初次写vue项目并一键生成.vue模版

    VSCode 写vue项目一键生成.vue模版 1.新建代码片段 文件-->首选项-->用户代码片段-->点击新建代码片段--取名vue.json 确定 2.配置快捷生成的vue模板 ...

  2. (英文版)VScode一键生成.vue模板

    1. 安装vscode,官网地址 2.安装一个插件,识别vue文件 插件库中搜索Vetur,下图中的第一个,点击安装(Install) 3.新建代码片段 点击Code(代码)-Preferences( ...

  3. 【vsCode】识别.vue/一键生成.vue模板文件

    1.安装插件Vetur 结果 ---> .vue代码识别彩标 2.配置.vue文件模板,以便快速一键生成格式化 2.1新建代码片段 File->Preferences->User S ...

  4. VSCode 快速生成 .vue 模版

    VSCode 快速生成 .vue 模版 安装vscode 官网:https://code.visualstudio.com/ 安装 Vetur 插件,识别 vue 文件 插件库中搜索Vetur,点击安 ...

  5. VSCode 快速生成.vue基本模板、发送http请求模板

    安装vscode 官网:https://code.visualstudio.com/ 安装 Vetur 插件,识别 vue 文件 插件库中搜索Vetur,点击安装,安装完成之后点击重新加载 新建代码片 ...

  6. vscode之快速生成vue模板

    文件-首选项-用户代码片段-搜索“vue”点击进入vue.json 复制这个片段 { "Vue component": { "prefix": "vu ...

  7. 使用vscode,新建.vue文件,tab自动生成vue代码模板

    第一步: 新建模板并保存 文件 --> 首选项 --> 用户代码片段 --> 输入vue,选择vue.json -->复制 第三步中的模板内容中内容保存 第二步: 添加配置,让 ...

  8. VSCode 自定义Vue snippets, 快速生成Vue模板

    命令行 Ctrl+Shift+P # 选择 Configure User Snippets # 选择 Vue.json 原始的Vue.json { // Place your snippets for ...

  9. 无需编译、快速生成 Vue 风格的文档网站

    无需编译.快速生成 Vue 风格的文档网站 https://docsify.js.org/#/#coverpage https://github.com/QingWei-Li/docsify/

随机推荐

  1. win10 pycharm快捷键

    编辑: 1.复制(行) ctrl + D (光标与需要复制的代码同行) 2.删除(行) ctrl + Y(光标与需要删除的代码同行) 3.光标换行 Shift + Enter(不管光标在该行的哪个位置 ...

  2. Android系统研究资料收集---站在前人的肩膀上

    Android系统研究资料收集---站在前人的肩膀上 针对Android系统研究任务,收集高价值资料在本页更新 AuthBlog:秋城https://www.cnblogs.com/houser032 ...

  3. Nginx之常用基本配置(三)

    前面我们聊了下了Nginx作为WEB服务器对客户端请求相关配置,文件操作优化.Nginx访问控制.basic验证,.状态模块状态页.gzip压缩配置:回顾请参考https://www.cnblogs. ...

  4. jvm GC算法和种类

    1.GC     垃圾收集 Garbage Collection 通常被称为“GC”,它诞生于1960年 MIT 的 Lisp 语言,经过半个多世纪,目前已经十分成熟了. jvm 中,程序计数器.虚拟 ...

  5. 【算法记事本#NLP-1】最大匹配算法分词

    本文地址:https://www.cnblogs.com/oberon-zjt0806/p/12409536.html #NLP-1 最大匹配算法(MM) 最大匹配算法(Maximum Matchin ...

  6. redis01

    1.redis 1)cookie与session session本质上也是cookie,cookie携带session返回给服务端 redis是一个存储数据库 redis读写快速,使用简单,常用于存储 ...

  7. 从输入URL到页面展示

    当我们输入 URL 并按回车后,浏览器会对 URL 进行检查,首先判断URL格式,比如是ftp http ed2k等等,我们这里假设这个URL是http://hellocassie.cn,那么浏览器会 ...

  8. SSM整合搭建(二)

    本页来衔接上一页继续来搭建SSM,再提一下大家如果不详细可以再去看视频哦,B站就有 之后我们来配置SpringMVC的配置文件,主要是配置跳转的逻辑 先扫描所有的业务逻辑组件 我们要用SpringMV ...

  9. sql 语句系列(多表之链)[八百章之第三章]

    新增连接查询而不影响其他连接查询 请看图: 这种情况我们一般会使用左连接的方式. select e.ENAME,d.LOC,eb.RECEIVED from emp e join dept d on( ...

  10. Mol Cell Proteomics. | Mapping Spatio-temporal Microproteomics Landscape in Experimental Model of Traumatic Brain Injury Unveils a link to Parkinson’s Disease

    期刊:Molecular & Cellular Proteomics 发表时间:June 16, 2019 通讯作者:Michel Salzet,Isabelle Fournier 一.  概 ...