vue生成本地html模板文件,vue文件快速生成页面模板

一 Vscode新建模板

1 菜单选择

2 新建全局代码片段

二 模板内容

{

"Print to console": {

"prefix": "vue",

"body": [

"",

"",

"

$5 ",

"",

"",

"

"//这里可以导入其他文件(比如：组件，工具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缓存功能，这个函数会触发",

"}",

"",

"

"$4",

""

],

"description": "Log output to console"

}

}

三 测试

1 新建 test.vue文件

2 在编辑器输入 vue，然后回车，代码自动生成

//这里可以导入其他文件(比如：组件，工具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缓存功能，这个函数会触发

}

程序员灯塔

转载请注明原文链接：vue文件快速生成页面模板