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. Metaploit-永恒之蓝漏洞利用

    目录 Metaploit介绍 实验环境 漏洞利用过程 Metaploit介绍 本次测试主要是利用永恒之蓝漏洞对windows7进行控制利用,掌握Metaploit工具的使用,知道永恒之蓝的漏洞利用原理 ...

  2. 深度解析互联网大厂面试难题自定义@EnableXX系列

    深度解析互联网大厂面试难题自定义@EnableXX系列   其实是一个@Import的设计技巧 创建注解@EnableXX(任何名称注解都行,只是这个名字好一些) XXConfiguration类不能 ...

  3. 攻防世界Mobile6 app1 XCTF详解

    XCTF_app1 先安装看看 点击芝麻开门之后会弹出“年轻人不要耍小聪明噢” 这大概就能看懂是点击之后进行判断,那就直接去看JEB,看看判断条件是什么 V1是输入的字符串,V2获取包信息(百度的), ...

  4. node--fs

    1.fs模块内置方法 1)stat 检测是文件还是目录 fs.stat(fileAddress,(err,stats)=>{ //err 出错信息 //stats.isFile() 该东西是文件 ...

  5. webpack里的externals

    最近在用webpack做一些是sdk相关的东西,有几个概念总结一下: 1.library要做sdk,一定要做的一个配置,用于说明最终的SDK暴露给调用者的一个名称例如:library: 'HelloJ ...

  6. scroll-view组件bindscroll实例应用:自定义滚动条

    我们知道scroll-view组件作为滑动控件非常好用,而有时候我们想放置一个跟随滚动位置来跟进的滚动条,但又不想用滚动条api该怎么办呢?(当然是自己写一个呗还能怎么办[自黑冷漠脸])嗯,没错.自己 ...

  7. Java实现生产者消费者(一)

    问题描述:生产者和消费者问题是线程模型中的经典问题:生产者和消费者在同一时间段内共用同一个存储空间,生产者往存储空间中添加产品,消费者从存储空间中取走产品,当存储空间为空时,消费者阻塞,当存储空间满时 ...

  8. Block as a Value for SQL over NoSQL

    作者 Yang Cao,Wenfei Fan,Tengfei Yuan University of Edinburgh,Beihang University SICS, Shenzhen Univer ...

  9. 编译 AR9271 wifi 网卡固件 htc_9271.fw

    下载最新的固件源码https://github.com/qca/open-ath9k-htc-firmware/archive/1.4.0.zip得到 open-ath9k-htc-firmware- ...

  10. CSS--transform相关属性实现2d到3d的具体变化

    先放上一段我写的相关代码(可能有一定冗杂代码,请见谅) <!DOCTYPE html> <html lang="en"> <head>      ...