vscode 创建vue模板

发布时间:2019-05-26 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vscode 创建vue模板脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

(确保编辑器已经安装了插件 vetur、vueHelPEr)
1、ctrl+shift+p 输入snippets 选中它 输入vue》vue.JSON
2、或者操作 文件》首选项》用户代码片段》vue》vue.json

clipboard.png

复制如下 也可自由编辑

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<!-- $1 -->",
            "<template>",
            "<div class='$2'>$5</div>",
            "</template>",
            "",
            "<script>",
            "",
            "// 导入的其他文件 例如:import moduleName from 'modulePath';",
            "",
            "export default {",
                "",
                "//import所引入的组件注册",
                "components: {",
                    "",
                "},",
                "",
                "data() {",
                "  return {",
                        "",
                 "  };",
                "},",
                "",
                "//监听属性",
                "computed: {",
                    "",
                "},",
                "",
                "//监控data中的数据变化",
                "watch: {",
                    "",
                "},",
                "",
                "//方法集合",
                "methods: {",
                    "",
                "},",
                "",
                "//生命周期 - 组件实例刚被创建",
                "beforeCreate() { ",
                    "",
                "},",

                "//创建完成 访问当前this实例",
                "created() {",
                    "",
                "},",
                "//挂载之前",
                "beforeMount() { ",
                    "",
                "},",

                "//挂载完成 访问DOM元素",
                "mounted() {",
                    "",
                "},",
                
                "//更新之前",
                "beforeUpdate() { ",
                    "",
                "},",
                
                "//更新之后",
                "updated() { ",
                    "",
                "},",

                "//for keep-alive 缓存功能,组件被激活时调用",
                "activated() {",
                    "",
                "},",

                "//for keep-alive 组件被移除时调用",
                "deactivated() {",
                    "",
                "},",

                "//组件销毁之前调用",
                "beforeDestroy() {",
                    "",
                "},",

                "//组件销毁之后调用",
                "destroyed() {",
                    "",
                "},",
                
            "}",
            "</script>",
            "<style lang='scss' scoped>",
            "//@import url($3); 引入公共css类",
                "$4",
            "</style>"
        ],
        "description": "Log output to console"
    }
}

最后 :保存 然后新建 .vue文件 ,如果新建的页面啥都没有 在这个页面输入 vue 回车 OK

脚本宝典总结

以上是脚本宝典为你收集整理的vscode 创建vue模板全部内容,希望文章能够帮你解决vscode 创建vue模板所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。