程序员求职经验分享与学习资料整理平台

网站首页 > 文章精选 正文

VsCode 快速生成Vue2或者vue3模板

balukai 2025-03-07 16:01:44 文章精选 10 ℃

1 点击文件--> 首选项--> 配置用户代码片段-->生成一个json文件

2 将这个json文件改为下面的模板(可以根据个人需求修改当中的模板内容)

{

    "生成vue模板":{

        "prefix": "vue",

        "body": [

            "",

            "",

            "<script>",

            "// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",

            "// 例如:import 《组件名称》 from '《组件路径》';",

            "",

            "export default {",

            "// import引入的组件需要注入到对象中才能使用",

            "components: {},",

            "props: {},",

            "data() {",

            "// 这里存放数据",

            "return {",

            "",

            "};",

            "},",

            "// 计算属性类似于data概念",

            "computed: {},",

            "// 监控data中的数据变化",

            "watch: {},",

            "// 方法集合",

            "methods: {",

            "",

            "},",

            "// 生命周期 - 创建完成(可以访问当前this实例)",

            "created() {",

            "",

            "},",

            "// 生命周期 - 挂载完成(可以访问DOM元素)",

            "mounted() {",

            "",

            "},",

            "beforeCreate() {},  // 生命周期 - 创建之前",

            "beforeMount() {},  // 生命周期 - 挂载之前",

            "beforeUpdate() {},  // 生命周期 - 更新之前",

            "updated() {},  // 生命周期 - 更新之后",

            "beforeDestroy() {},  // 生命周期 - 销毁之前",

            "destroyed() {},  // 生命周期 - 销毁完成",

            "activated() {},  // 如果页面有keep-alive缓存功能,这个函数会触发",

            "}",

            "</script>",

            ""

        ],

        "description": "生成vue模板"

    }

}

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

Tags:

最近发表
标签列表