vs code 快速生成vue 模板

1.使用快捷Ctrl + Shift + P唤出控制台,然后输入snippets并选择。(或 文件>首选项>用户代码片断里面,输入 vue.json ,然后回车 )(或 file > Preferences > User Snippets,当弹出搜索框之后,输入 vue.json ,然后回车)

2.接着输入vue,vs code自动生成vue.json文件。

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

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

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

是不是很实用和方便呢

vs code 快速生成vue 模板的更多相关文章

  1. 关于vs code 快速生成vue 模板

    在 文件>首选项>用户代码片断里面,打开vue.json 添加以下代码: "Print to console": { "prefix": " ...

  2. VS code快速创建vue模板

    忘记了.vue文件的格式或者不想手动敲那段模板代码怎么办?VS code快速创建vue模板帮你偷个小懒 第一步:新建模板并保存 打开 VS code,依次点击 file > Preference ...

  3. vsc 自定义快速生成vue模板

    1.安装vscode 官网地址:https://code.visualstudio.com/ 2.安装一个插件,识别vue文件 插件库中搜索Vetur,下图中的第一个,点击安装,安装完成之后点击重新加 ...

  4. 在vscode中快速生成vue模板

    点击文件-->首选项-->用户代码片段-->输入vue,此时会打开vue.json文件,将下列代码复制进文件保存即可,新建一个vue文件,输入vue回车即可生成模板,$0表示生成模板 ...

  5. vscode之快速生成vue模板

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

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

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

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

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

  8. VSCode 快速生成 .vue 模版

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

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

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

随机推荐

  1. list嵌套,int与str的用法,replace

    #*************************replace(待改,改动值),返回很重要 A = [['libai',89]] A[0][0]=A[0][0].replace('a','af') ...

  2. sed和awk的常用实例

    一.文本间隔 1.在每一行后面增加一空行 sed G guo.sh awk '{printf("%s\n\n",$0 ) }' 2.将文件中原来的空行删掉,并在在每一行后边增加一空 ...

  3. oracle基于归档的增量异地恢复 --异地新增数据文件问题

    1 rac异地基于归档文件的增量恢复   2 遇到在主库新增数据文件 后 日志恢复出现路径问题 .   错误如下 : creating datafile fno=20 name=+DATA/dataf ...

  4. LOJ#541. 「LibreOJ NOIP Round #1」七曜圣贤

    有一辆车一开始装了编号0-a的奶茶,现有m次操作,每次操作Pi在[-1,b),若Pi为一个未出现过编号的奶茶,就把他买了并装上车:若Pi为一个在车上的奶茶,则把他丢下车:否则,此次操作为捡起最早丢下去 ...

  5. 51Nod——T 1686 第K大区间

    https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1686 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 ...

  6. 什么是单点登录(SSO)

    前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 在我实习之前我就已经在看单点登录的是什么了,但是实习 ...

  7. DTRACE简介之完结篇3

    https://blogs.oracle.com/swan/entry/dtrace%E7%AE%80%E4%BB%8B_3 DTRACE简介之完结篇 By samwan on 四月 13, 2007 ...

  8. eclipse bug之No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK

    解决办法: 1.eclipse菜单 - Window - Preferences- Java - Installed JREs 将配置的JRE定位到JDK,例如JRE home:D:\Program ...

  9. fuse-dfs挂载hdfs实录

    部署安装了最新稳定版hadoop2.2.0.然后在网上找来fuse-dfs编译教程.可是最后失败了.至今原因未知--,错误描写叙述为:Transport endpoint is not connect ...

  10. linux 下 打包 和解压缩

    01-.tar格式解包:[*******]$ tar xvf FileName.tar打包:[*******]$ tar cvf FileName.tar DirName(注:tar是打包,不是压缩! ...