标签:put 用户 对象 ret 页面 int 生命周期 str tor
第一步: 新建模板并保存
文件 --> 首选项 --> 用户代码片段 --> 输入vue,选择创建模板 填写vue.json -->复制 第三步中的模板内容中内容保存
第二步: 添加配置,让vscode允许自定义的代码片段提示出来
文件 --> 首选项 --> 设置 ---> 添加这2项
// Specifies the location of snippets in the suggestion widget "editor.snippetSuggestions": "top", // Controls whether format on paste is on or off "editor.formatOnPaste": true
第三步: 复制以下代码,保存重启vscode
{ "Print to console": { "prefix": "vue", "body": [ "<!-- $1 -->", "<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 scoped>", "$4", "</style>" ], "description": "Log output to console" } }
第四步:测试是否添加成功
测试方法: 新建vue后缀文件,输入vue,按下tab(enter)键,OK
缺点是:无法像sublime一样新建一个vue文件就可以自动带上对应的模板。
使用vscode,新建.vue文件,tab(enter)自动生成vue代码模板
标签:put 用户 对象 ret 页面 int 生命周期 str tor
原文地址:https://www.cnblogs.com/binky/p/12672242.html