1.
在文件——首选项-----用户代码片段—搜索vue.json，这是设置的vue文件里边生成模板的，
如果需要在js文件下生成注释的，就搜索javascript。json
2.
把下面的代码复制进去
3.
重启vscode，新建页面的时候输入vue，回车，快速生成vue模板
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div></div>",
"</template>",
"",
"<script>",
"export default {",
" components: {},",
" props: {},",
" data() {",
" return {",
" };",
" },",
" watch: {},",
" computed: {},",
" methods: {},",
" created() {},",
" mounted() {}",
"};",
"</script>",
"<style lang=\"scss\" scoped>",
"</style>"
],
"description": "A vue file template"
},
"Print to zhushi": {
"prefix": "zhushi",
"body": [
"<!--",
"* @Description: $0",
"* @Author: your name",
"* @Date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
"* @LastEditTime: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
"* @LastEditors: Please set LastEditors",
"-->"
],
"description": "a zhushi mode"
},
"Print to func": {
"prefix": "func",
"body": [
"/**",
" * @func $1",
" * @Description $2",
" * @Author: your name",
" * @param {$3} $4 $5",
" * @return {$6} $7",
" */"
],
"description": "a func mode"
}
================================分割线==================================
修改了一下vue版本的升级模板vue。json
"Print to console": {
"prefix": "vue",
"body": [
"<!--",
"* @Description: $0",
"* @Author: your name",
"* @Date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
"* @LastEditTime: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
"* @LastEditors: Please set LastEditors",
"-->",
"",
"<template>",
" <div></div>",
"</template>",
"",
"<script>",
"export default {",
" // 组件名称",
" name: '',",
" // 组件参数 接收来自父组件的数据",
" props: {},",
" // 局部注册的组件",
" components: {},",
" // 组件状态值",
" data() {",
" return {",
" };",
" },",
" // 计算属性",
" computed: {},",
" // 侦听器",
" watch: {},",
" // 组件方法",
" methods: {},",
" // 以下是生命周期钩子 注：没用到的钩子请自行删除",
" /**",
" * 在实例初始化之后，组件属性计算之前，如data属性等",
" */",
" beforeCreate() {},",
" /**",
" * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在",
" */",
" created() {},",
" /**",
" * 在挂载开始之前被调用：相关的 render 函数首次被调用。",
" */",
" beforeMount() {},",
" /**",
" * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。",
" * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。",
" */",
" mounted() {}",
"};",
"</script>",
"<!-- Add 'scoped' attribute to limit CSS to this component only -->",
"<!-- 使用了scoped属性之后，父组件的style样式将不会渗透到子组件中， -->",
"<!-- 然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响， -->",
"<!-- 这么设计的目的是父组件可以对子组件根元素进行布局。 -->",
"<style lang=\"scss\" scoped>",
"</style>"
],
"description": "A vue file template"
},
javascript.json文件
"Print to shuoming": {
"prefix": "shuoming",
"body": [
"/*",
"* @Description: $0",
"* @Author: your name",
"* @Date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
"* @LastEditTime: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
"* @LastEditors: Please set LastEditors",
"*/"
],
"description": "a zhushi mode"
},
"Print to zhushi": {
"prefix": "zhushi",
"body": [
"/**",
" * @Description $1",
" * @Author $2",
" * @param {$3} $4 $5",
" * @return {$6} $7",
" */"
],
"description": "a func mode"
}
网友评论