VsCode生成vue2、vue3代码片段

一、点击文件 ----> 首选项 ----> 配置用户代码片段

 二、弹出框中输入vue

三、将vue.json里的内容替换为

 1 {
 2     // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
 3     // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
 4     // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
 5     // same ids are connected.
 6     // Example:
 7     "vue3": {
 8         "prefix": "vue3",
 9         "body": [
10             "<template>",
11             "$2",
12             "</template>",            
13             "<script lang=\"ts\" setup>",
14             "$1",
15             "</script>",
16             "<style lang=\"less\" scoped>",
17             "$3",
18             "</style>"
19         ],
20         "description": "vue3"
21     },
22     "vue2": {
23         "prefix": "vue2",
24         "body": [
25           "<!-- 我的页面$1 -->",
26           "<template>",
27           "  <div class='my_page'>",
28           "    <el-container>",
29           "      <el-header>Header</el-header>",
30           "      <el-main>Main</el-main>",
31           "      <el-footer>Footer</el-footer>",
32           "    </el-container>",
33           "  </div>",
34           "</template>",
35           "",
36           "<script>",
37           "// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
38           "// 例如：import 《组件名称》 from '《组件路径》'",
39           "",
40           "export default {",
41           "  // import引入的组件需要注入到对象中才能使用",
42           "  components: {},",
43           "  data () {",
44           "    // 这里存放数据",
45           "    return {",
46           "",
47           "    }",
48           "  },",
49           "  // 监听属性 类似于data概念",
50           "  computed: {},",
51           "  // 监控data中的数据变化",
52           "  watch: {},",
53           "  // 生命周期 - 创建完成（可以访问当前this实例）",
54           "  created () {",
55           "",
56           "  },",
57           "  // 生命周期 - 挂载完成（可以访问DOM元素）",
58           "  mounted () {",
59           "",
60           "  },",
61           "  beforeCreate () { }, // 生命周期 - 创建之前",
62           "  beforeMount () { }, // 生命周期 - 挂载之前",
63           "  beforeUpdate () { }, // 生命周期 - 更新之前",
64           "  updated () { }, // 生命周期 - 更新之后",
65           "  beforeDestroy () { }, // 生命周期 - 销毁之前",
66           "  destroyed () { }, // 生命周期 - 销毁完成",
67           "  activated () { }, // 如果页面有keep-alive缓存功能，这个函数会触发",
68           "  // 方法集合",
69           "  methods: {",
70           "",
71           "  }",
72           "}",
73           "</script>",
74           "",
75           "<style lang='less' scoped>",
76           "//@import url($3); 引入公共css类",
77           "$4",
78           "</style>",
79           ""
80         ],
81         "description": "Log output to console"
82       }    
83 }

 

posted @ 2025-03-11 10:27  疯狗强尼  阅读(427)  评论(0)    收藏  举报