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

当我们希望每次新建.vue文件后，vscode能够根据配置，自动生成我们想要的内容。

打开vscode编辑器，依次选择“文件 -> 首选项 -> 用户代码片段”，此时，会弹出一个搜索框，我们输入vue，将代码ctrl+c 到vue-html.json

{
 "Print to console": {
  "prefix": "vue",
  "body": [
   "<!-- $0 -->",
   "<template>",
   " <div></div>",
   "</template>",
   "",
   "<script>",
   "export default {",
   " data () {",
   "  return {",
   "  };",
   " },",
   "",
   " components: {},",
   "",
   " computed: {},",
   "",
   " mounted: {},",
   "",
   " methods: {}",
   "}",
   "",
   "</script>",
   "<style lang='scss' scoped>",
   "</style>"
 ],
  "description": "Log output to console"
 }
}

保存后关闭这个文件。

稍稍解释一下：$0 表示你希望生成代码后光标的位置 ; prefix 表示生成对应预设代码的命令

例如：我们新建一个名为header.vue的文件，输入内容vue按下enter，就会自动生成内容.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解VSCode配置启动Vue项目

    详解VSCode配置启动Vue项目

    下载安装并配置VSCode 随便百度上搜个最新的VSCode安装好后,点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展,这里要安装两个插件. 1.vetur插件的安装 该插件是vue文件基本语法的高亮插件,在插件窗口中输入vetur点击安装插件就行,装好后点击文件->首选项->设置 打开设置界面,在设置界面右侧添加配置 "emmet.syntaxProfiles": { "vue-html": "html", "

  • vscode下的vue文件格式化问题

    我相信基本上每一个在vscode上面码Vue代码的都会下载Vetur插件用来格式化等操作,今天Vetur更新了 0.14.2 版本,最近在使用的时候,感觉格式化总是出问题,去Vetur上面看了下,发现Vetur的配置做了下面的改动,看到几个社区都没有人说明,我就先说下,默认的格式化配置是: { "vetur.format.defaultFormatter.html": "prettyhtml", "vetur.format.defaultFormatter

  • Vue-cli Eslint在vscode里代码自动格式化的方法

    编辑器另外一个很重要的功能就是代码格式化了,VS Code默认提供常见文件的格式化,如.js,.html等. 添加对.vue文件的格式化支持 这里我们添加对 .vue 文件的格式化支持. 1. 安装 Vetur 插件 2. 在 VS Code 的设置中添加如下规则: { "vetur.format.defaultFormatter": { "html": "prettier", "css": "prettier&qu

  • 详解vscode中vue代码颜色插件

    vue提示插件[Vscode] 编者寄语:vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受.曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整理这篇,以下高亮插件,建议大家都安装了. 在VSCode Marketplace 搜素Vue 出现关于语法高亮的插件有 vue,vue-beautify,vue-color,VueHelper,vertur等等.比较了下载数量可以了解到,vetur 是目前比较好的语法高亮插件,我们来安装一下吧. vscode提

  • 在vscode中统一vue编码风格的方法

    vetur 很多人知道,但在 vscode 下没办法格式化 .vue 里的 html, js 很是头疼,代码风格无法统一. 所以不少人直接拆分开,然后在 .vue 中引入,虽然方法很好,但这有违 .vue 单文件组件的初衷. 本文详细介绍 vscode 下使用 vetur + prettier + eslint 来统一 vue 编码风格. vetur 插件 vetur 经过多个版本迭代,算是目前 vscode 下最好用的 vue 插件了,甚至支持 ts, webpack alias 等特性. 但

  • VsCode新建VueJs项目的详细步骤

    VsCode新建VueJs项目的详细步骤

    本文介绍了VsCode新建VueJs,分享给大家,具体如下: 使用vue-cli快速构建项目 ( vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 安装vue-cli之前,需要先安装了vue和webpack ) · node -v //(版本低引起:bash: npm: command not found) · npm -v //以上帮助检查是否安装 node npm · 输入vue,//测试vue是否安装成功 · 输入vue list //看vue中有哪些子类 np

  • 推荐VSCode 上特别好用的 Vue 插件之vetur

    推荐VSCode 上特别好用的 Vue 插件之vetur

    Vue自从发布以来就一直受到前端开发人员的热爱,而除了一些本身优秀的特征之外,还有就是丰富的插件和工具的支持和更新.虽然现在的编辑器需要安装相应的plugins才能进行Vue组件化开发,但是越来越多优秀的plugins都提供了强大的支持.比如VSCode下面的Vetur就是这样一款必备的Vue开发工具.下面就开始介绍一下它的一些功能吧 Github仓库:Vetur 官方文档:Vetur文档 语法高亮 Vetur支持.vue文件的语法高亮显示,除了支持template模板以外,还支持大多数主流的前

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

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

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

  • Nest.js快速启动API项目过程详解

    目录 快速启动 使用nest自带的命令行工具 直接使用starter项目 用npm安装所需的包 创建controller 创建service 结构和命名 HTTP请求 处理Axios对象 配置 全局添加headers API文档 快速启动 最近上了一个新项目,这个客户管理一个庞大的任务和团队集群,而不同流程所适用的系统也不太一样,比如salesforce,hubspots之类的.这次的新项目需要在另外两个平台之间做一些事情.目前只需要先封装其中之一的API,因此我们选定使用NodeJS的框架Ne

  • Anaconda＋vscode＋pytorch环境搭建过程详解

    1.安装Anaconda Anaconda指的是一个开源的Python发行版本,其包含了conda.Python等180多个科学包及其依赖项.在官网上下载https://www.anaconda.com/distribution/,因为服务器在国外会很慢,建议从清华镜像https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/下载. 2.安装VScode 需要在Anaconda再装VScode,因为Anaconda公司和微软公司的合作,不用在对进

  • Spring boot项目使用thymeleaf模板过程详解

    在spring boot 项目中使用thymeleaf模板,将后台数据传递给前台界面. 1.将后台数据传递给前台有很多种方式,可以将后台要传递的数据转换成json格式,去传递给前台,也可以通过model形式去传递出去,这篇博客主要是使用thymeleaf模板,将后台数据传递给前台. 2.首先要在spring boot 项目中添加如下依赖: <dependency> <groupId>org.springframework.boot</groupId> <artif

  • Python基于Opencv来快速实现人脸识别过程详解（完整版）

    Python基于Opencv来快速实现人脸识别过程详解（完整版）

    前言 随着人工智能的日益火热,计算机视觉领域发展迅速,尤其在人脸识别或物体检测方向更为广泛,今天就为大家带来最基础的人脸识别基础,从一个个函数开始走进这个奥妙的世界. 首先看一下本实验需要的数据集,为了简便我们只进行两个人的识别,选取了beyond乐队的主唱黄家驹和贝斯手黄家强,这哥俩长得有几分神似,这也是对人脸识别的一个考验: 两个文件夹,一个为训练数据集,一个为测试数据集,训练数据集中有两个文件夹0和1,之前看一些资料有说这里要遵循"slabel"命名规则,但后面处理起来比较麻烦,

  • 使用apifm-wxapi快速开发小程序过程详解

    使用apifm-wxapi快速开发小程序过程详解

    前言 我们要开发小程序,基本上都要涉及到以下几个方面的工作: 1.购买服务器,用来运行后台及接口程序: 2.购买域名,小程序中需要通过域名来调用服务器的数据: 3.购买 SSL 证书,小程序强制需要 https 的地址,传统无证书不加密的 http 请求微信不支持: 4.后台程序员开发后台程序,这样才能登录后台进行商品管理.订单维护.资金财务管理等等: 5.后台程序员开发小程序可用的 restfull api 接口或者是 websocket 接口: 6.开发的后台及接口程序的安全性.功能性.稳定

  • 基于VSCode调试网页JavaScript代码过程详解

    一.调试准备 Windows10 64bits IDE:Visual Studio Code1.28.2 安装插件:Chrome(安装方法:Debug -> Install Additional Debuggers... -> Debugger for Chrome,重新启动vscode即可.) 二.调试配置 首先该插件运行需要安装有本地服务器,其次有两种配置方式,分别为: (1)launch:重新打开一个chrome来显示应用程序 (2)attach:在已经运行的chrome中显示应用程序

  • 使用vue cli4.x搭建vue项目的过程详解

    cli-4.x已经发布好久了,斟酌了好久,还是决定将原来的cli-2.x升级到4.x,详细的升级过程可以戳这里 1.创建项目 vue create vuetest 2.选择配置方式 ? Please pick a preset: (Use arrow keys) ☜(使用箭头键) > default (babel, eslint) ☜(使用默认的配置,会安装babel和eslint) Manually select features ☜(手动配置) 这里我选择的是手动配置(使用↑ ↓箭头切换,E

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

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

  • 基于vue cli重构多页面脚手架过程详解

    官方提供的项目生成工具vue-cli没有对多页面webApp的支持,但是在实际的项目中,我们需要这样的脚手架,参考了很多大牛的方法,这里提供了一种我的单页面脚手架转换为多页面脚手架的方案,供大家参考.不好的地方也请大家指正. 准备 使用vue-cli生成一个你需要的单页面项目脚手架,然后我们就要开始我们的改装工程了. 重构过程 步骤一 改变目录结构 step1 在src目录下面新建views文件夹,然后再views文件夹下新建index文件夹 step2 将src目录下的main.js和App.

随机推荐