VSCode快速生成Vue组件模板

**说明:**在我们运用VSCode进行日常Vue开发时,可以使用定制模板来进行快速开发。

1.找到Vue模板编辑的json

打开VSCode编译器 => 点击文件 => 首选项 => 用户片段 => 在弹出的搜索框中搜索vue.json => 打开json文件!

2.输入你自定义的模板代码

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

3.保存成功后,进入.vue文件进行测试,输入vue

VSCode里Vue的模板生成

VSCode里Vue模板生成

水平有限,还不能写到尽善尽美,希望大家多多交流,跟春野一同进步!!!

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值