VS Code 创建 Vue 模板

步骤一

文件->首选项->用户片段

步骤二

1. 新建全局代码片段文件；
   
2. 起名为 vue.json 并回车（名字其实无所谓，后缀是 .json）就行；
   
3. 在打开的标签中输入以下内容

   {
       // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
       // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
       // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
       // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
       // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
       // Placeholders with the same ids are connected.
       // Example:
       // "Print to console": {
       // 	"scope": "javascript,typescript",
       // 	"prefix": "log",
       // 	"body": [
       // 		"console.log('$1');",
       // 		"$2"
       // 	],
       // 	"description": "Log output to console"
       // }
       "生成vue模板": {
           "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 lang='scss' scoped>",
               "//@import url($3); 引入公共css类",
               "$4",
               "</style>"
           ],
           "description": "生成VUE模板"
       },
       "http-get请求": {
           "prefix": "httpget",
           "body": [
               "this.\\$http({",
               "url: this.\\$http.adornUrl(''),",
               "method: 'get',",
               "params: this.\\$http.adornParams({})",
               "}).then(({ data }) => {",
               "})"
           ],
           "description": "httpGET请求"
       },
       "http-post请求": {
           "prefix": "httppost",
           "body": [
               "this.\\$http({",
               "url: this.\\$http.adornUrl(''),",
               "method: 'post',",
               "data: this.\\$http.adornData(data, false)",
               "}).then(({ data }) => { });"
           ],
           "description": "httpPOST请求"
       }
   }
   

步骤三

新建一个 .vue 文件，输入 vue 然后使用制表符键即可看到效果：

后期只需自己填写所需代码并格式化代码即可~