教你用VS code 生成vue-cli代码片段

爱被打了一巴掌 2021-09-19 16:00 320阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]  
可以自定义设置名字：name.json

{
    	"Print to console": {
    		"prefix": "vue",
    		"body": [
    			"<template>",
    			"<div class='$2'>$5</div>",
    			"</template>",
    			"",
    			"<script>",
    			"",
    			"export default {",
    			"name:'',",
    			"components: {},",
    			"data() {",
    			"return {",
    			"",
    			"};",
    			"},",
    			"computed: {},",
    			"watch: {},",
    			"methods: {",
    			"",
    			"},",
    			"//生命周期 - 创建完成（可以访问当前this实例）",
    			"created() {",
    			"",
    			"},",
    			"//生命周期 - 挂载完成（可以访问DOM元素）",
    			"mounted() {",
    			"",
    			"},",
    			"beforeCreate() {}, //生命周期 - 创建之前",
    			"beforeMount() {}, //生命周期 - 挂载之前",
    			"beforeUpdate() {}, //生命周期 - 更新之前",
    			"updated() {}, //生命周期 - 更新之后",
    			"beforeDestroy() {}, //生命周期 - 销毁之前",
    			"destroyed() {}, //生命周期 - 销毁完成",
    			"activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
    			"}",
    			"</script>",
    			"<style lang='scss' scoped>",
    			"$4",
    			"</style>"
    		],
    		"description": "Log output to console"
    	}
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]: /images/20210812/22d2ddcd3d85440ea133d8bcbda687fc.png

发表评论取消回复

表情：

评论列表（有 0 条评论，320人围观）

还没有评论，来说两句吧...

相关阅读

相关 VS Code配置snippets代码片段快速生成html模板，提高前端编写效率

先看下示例，在输入 ! 号回车后自动生成一段代码片段。这样我们就可以更便捷的进行代码编写了。 ![请添加图片描述][09cae84e829c4d98bc038cd59

朱雀/ 2024年04月07日 14:03/ 0 赞/ 68 阅读

相关手把手教你VS Code 实现远程开发的配置方法

关注+星标公众号，不错过精彩内容 ![513c0ac451cc14e5bbb23b4ee2f2d541.gif][] 编排 | strongerHuang 微信公众号 |

太过爱你忘了你带给我的痛/ 2023年01月15日 14:27/ 0 赞/ 131 阅读

相关快速生成代码片段

在开发过程中有一写代码重复的使用，而且不能重构。可以使用代码生成管理器进行快捷键的绑定，提高开发效率。工具--》代码片段管理--》c\ --》Visual C\ 可以自

落日映苍穹つ/ 2022年12月11日 07:46/ 0 赞/ 294 阅读

相关 VS Code中如何自定义代码片段

VS Code中如何自定义代码片段 1.为了避免在学习vuejs的过程中重复写框架，所以我们先写好一个模版，如下： <!DOCTYPE html>

刺骨的言语ヽ痛彻心扉/ 2022年12月07日 12:50/ 0 赞/ 171 阅读

相关 vs code中创建代码片段

文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html.code-snippets > 注意：后缀名需要命名为.code-sni

客官°小女子只卖身不卖艺/ 2022年11月11日 13:14/ 0 赞/ 190 阅读

相关手把手教你利用VS Code+Qemu+GDB调试Linux内核

[https://zhuanlan.zhihu.com/p/105069730?utm\_source=wechat\_session][https_zhuanlan.zhi

朱雀/ 2022年10月31日 00:53/ 0 赞/ 402 阅读

相关 VScode用户代码片段——快速生成vue片段

在VScode编译器中，Ctrl + Shift + p 输入：preferences:configure User Snippets ![2019032109073721

偏执的太偏执、/ 2022年03月06日 14:58/ 0 赞/ 414 阅读

相关手把手教你优化vuecli首屏加载

之前用 `vuecli`做了个博客，是一个单页面项目，大概有十个路由直接 `npm run build`打包出来，有一个 `1M`的巨大 `js`文件 ![172085

不念不忘少年蓝@/ 2021年12月21日 01:03/ 0 赞/ 369 阅读

相关教你用VS code 生成vue-cli代码片段

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

爱被打了一巴掌/ 2021年09月19日 16:00/ 0 赞/ 321 阅读

相关 VS Code 设置全局用户代码片段

一. 进入用户片段搜索界面文件 ==> 首选项 ==> 用户片段 ![在这里插入图片描述][20200717155303808.png] ![在这里插入图片

灰太狼/ 2021年07月25日 14:57/ 0 赞/ 655 阅读