码迷,mamicode.com
首页 > 其他好文 > 详细

vsCode写vue项目一键生成.vue模板

时间:2020-06-16 18:51:12      阅读:60      评论:0      收藏:0      [点我收藏+]

标签:生命周期   引入   temp   color   概念   第三方   vue   date   pre   

1、安装插件,识别vue文件,Vetur

2、首选项=>用户片段=>新代码片段=>vue.json=>Enter【确定】

技术图片

 

 

 技术图片

 

 

3、新建的vue.json复制下面自己写的.vue模板:prefix:vue就是快捷键,保存好之后,新建.vue结尾的文件,输入vue按tab键即可快速生成vue初始化模板。

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  <div class=‘$2‘>$5</div>",
            "</template>",
            "",
            "<script>",
            "// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",
            "// 例如:import 《组件名称》 from ‘《组件路径》‘;",
            "",
            "export default {",
            "  // import引入的组件需要注入到对象中才能使用",
            "  components: {},",
            "  data () {",
            "  // 这里存放数据",
            "    return {",
            "",
            "    }",
            "  },",
            "  // 监听属性 类似于data概念",
            "  computed: {},",
            "  // 监控data中的数据变化",
            "  watch: {},",
            "  // 方法集合",
            "  methods: {",
            "",
            "  },",
            "  // 生命周期 - 创建完成(可以访问当前this实例)",
            "  created () {",
            "",
            "  },",
            "  // 生命周期 - 挂载完成(可以访问DOM元素)",
            "  mounted () {",
            "",
            "  },",
            "  beforeCreate () {}, // 生命周期 - 创建之前",
            "  beforeMount () {}, // 生命周期 - 挂载之前",
            "  beforeUpdate () {}, // 生命周期 - 更新之前",
            "  updated () {}, // 生命周期 - 更新之后",
            "  beforeDestroy () {}, // 生命周期 - 销毁之前",
            "  destroyed () {}, // 生命周期 - 销毁完成",
            "  activated () {} // 如果页面有keep-alive缓存功能,这个函数会触发",
            "}",
            "</script>",
            "<style lang=‘scss‘ scoped>",
            "// @import url($3); 引入公共css类",
            "$4",
            "</style>",
            "$4"
        ],
        "description": "Log output to console"
    }
}

 

vsCode写vue项目一键生成.vue模板

标签:生命周期   引入   temp   color   概念   第三方   vue   date   pre   

原文地址:https://www.cnblogs.com/kpengfang/p/13143177.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!