vsc 自定义快速生成vue模板

2019-11-20 16:01:01 阅读：219 来源： 互联网

1.安装vscode

官网地址：https://code.visualstudio.com/

2.安装一个插件，识别vue文件

插件库中搜索Vetur，下图中的第一个，点击安装，安装完成之后点击重新加载

3.新建代码片段

文件-->首选项-->用户代码片段-->点击新建代码片段--取名vue.json 确定

4.删除不要的代码

5.粘入自己写的.vue模板

 1 {
 2     "Print to console": {
 3         "prefix": "vue",
 4         "body": [
 5             "<!-- $1 -->",
 6             "<template>",
 7             "<div class='$2'>$5</div>",
 8             "</template>",
 9             "",
10             "<script>",
11             "//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
12             "//例如：import 《组件名称》 from '《组件路径》';",
13             "",
14             "export default {",
15             "//import引入的组件需要注入到对象中才能使用",
16             "components: {},",
17             "data() {",
18             "//这里存放数据",
19             "return {",
20             "",
21             "};",
22             "},",
23             "//监听属性 类似于data概念",
24             "computed: {},",
25             "//监控data中的数据变化",
26             "watch: {},",
27             "//方法集合",
28             "methods: {",
29             "",
30             "},",
31             "//生命周期 - 创建完成（可以访问当前this实例）",
32             "created() {",
33             "",
34             "},",
35             "//生命周期 - 挂载完成（可以访问DOM元素）",
36             "mounted() {",
37             "",
38             "},",
39             "beforeCreate() {}, //生命周期 - 创建之前",
40             "beforeMount() {}, //生命周期 - 挂载之前",
41             "beforeUpdate() {}, //生命周期 - 更新之前",
42             "updated() {}, //生命周期 - 更新之后",
43             "beforeDestroy() {}, //生命周期 - 销毁之前",
44             "destroyed() {}, //生命周期 - 销毁完成",
45             "activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
46             "}",
47             "</script>",
48             "<style lang='scss' scoped>",
49             "//@import url($3); 引入公共css类",
50             "$4",
51             "</style>"
52         ],
53         "description": "Log output to console"
54     }
55 }

6.上面代码中的 "prefix": "vue", 就是快捷键；保存好之后，新建.vue结尾的文件试试

输入vue 按键盘的tab就行
注意：
这里直接保存文件就可以自动执行了。

自己写的模板可以按照自己需要的在里面添加就可以啦。

标签：文件,插件,生命周期,自定义,代码,vue,vsc,组件
来源： https://www.cnblogs.com/yushihao/p/11898354.html