vscode创建自定义vue模板

最新推荐文章于 2024-05-17 09:28:01 发布

河神—圣加伊乌斯

最新推荐文章于 2024-05-17 09:28:01 发布

阅读量1.5k

点赞数

分类专栏： vscode vue 文章标签： vue.js vscode 前端

本文链接：https://blog.csdn.net/Youisbeautiful/article/details/129323694

版权

vue 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

vscode

1 篇文章 0 订阅

订阅专栏

一、模板创建

文件 -> 首选项 -> 配置用户代码片段。

新建一个全局代码片段

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h2CyMveA-1677833886493)(C:\Users\31244\AppData\Roaming\Typora\typora-user-images\image-20230303165048308.png)]$

输入使用模板命令
在这里插入图片描述

这是我自己创建的模板，配合element-ui使用，大家可以根据所需模板进行自定义

{
"Print to console": {
    "prefix": "vue2-table",
    "body": [
      "<template>",
      "  <div>",
      "   <el-form v-model=\"form\" inline>",
      "     <el-form-item label=\"搜索项\" prop=\"prop\">",
      "       <el-input",
      "         type=\"text\"",
      "         v-model=\"form.input\"",
      "         placeholder=\"请输入搜索项\"",
      "         clearable />",
      "     </el-form-item>",
      "     <el-row>",
      "       <el-button type=\"\" size=\"mini\" @click=\"getDataList\">查询</el-button>",
      "       <el-button type=\"primary\" size=\"mini\" @click=\"openDialog('添加')\"",
      "         >添加</el-button>",
      "     </el-row>",
      "   </el-form>",
      "   <el-table",
      "     :data=\"tableList\"",
      "     size=\"mini\"",
      "     v-loading=\"loading\"",
      "     border",
      "     style=\"margin-top:10px;\"",
      "     >",
      "       <el-table-column",
      "         label=\"label\"",
      "         prop=\"prop\"",
      "         align=\"center\"",
      "         ></el-table-column>",
      "       <el-table-column label=\"操作\" prop=\"\" align=\"center\">",
      "         <template slot-scope=\"scope\">",
      "           <el-row>",
      "             <el-button type=\"text\" @clcik=\"openInfo(scope.row)\" size=\"mini\"",
      "               >详情</el-button",
      "             >",
      "             <el-button",
      "               type=\"primary\"",
      "               size=\"mini\"",
      "               @click=\"openDialog('编辑', scope.row)\"",
      "               >编辑</el-button",
      "             >",
      "             <el-popconfirm",
      "               title=\"确定要删除吗？\"",
      "               confirm-button-text=\"确定\"",
      "               cancel-button-text=\"取消\"",
      "               icon=\"el-icon-info\"",
      "               icon-color=\"red\"",
      "               @confirm=\"delRecord('alone', scope.row)\"",
      "             >",
      "               <el-button slot=\"reference\" type=\"danger\" size=\"mini\"",
      "                 >删除</el-button",
      "               >",
      "             </el-popconfirm>",
      "           </el-row>",
      "         </template>",
      "       </el-table-column>",
      "   </el-table>",
      "   <!-- 分页 -->",
      "   <el-pagination",
      "     @size-change=\"sizeChangeHandle\"",
      "     @current-change=\"currentChangeHandle\"",
      "     :current-page=\"pageIndex\"",
      "     :page-sizes=\"[10, 20, 50, 100]\"",
      "     :page-size=\"pageSize\"",
      "     :total=\"totalPage\"",
      "     layout=\"total, sizes, prev, pager, next, jumper\"",
      "   >",
      "   </el-pagination>",
      "</div>",
      "</template>",
      "<script>",
      "export default {",
      "  name: 'APP',",
      "  data () {",
      "    return {",
      "       pageIndex: 1,",
      "       pageSize: 10,",
      "       totalPage: 0,",
      "       form: {",
      "         agreementNamae: ''",
      "       },",
      "       tableList: [],",
      "    }",
      "  },",
      "  methods: {",
      "   getDataList() {",
      "     this.loading = true;",
      "     this.$$http({",
      "       url: this.$$http.adornUrl(\"/sys/contract/queryPage\"),",
      "       method: \"get\",",
      "       params: this.$$http.adornParams({",
      "       contractName: this.form.agreementNamae",
      "     })",
      "   })",
      "    .then(res => {",
      "      this.loading = false;",
      "      if (res.data.code === 0) {",
      "        let page = res.data.page;",
      "        this.tableList = page.list;",
      "        this.totalPage = page.totalCount;",
      "      } else {",
      "        this.$$message.error(\"数据获取失败!\");",
      "      }",
      "    })",
      "    .catch(err => {",
      "      this.loading = false;",
      "      this.$$message.error(\"数据获取失败！\");",
      "    });",
      "   },",
      "    // 每页数",
      "   sizeChangeHandle(val) {",
      "     this.pageSize = val;",
      "     this.pageIndex = 1;",
      "     this.getDataList();",
      "   },",
      "   // 当前页",
      "   currentChangeHandle(val) {",
      "     this.pageIndex = val;",
      "     this.getDataList();",
      "   }",
      "  },",
      "  created () {",
      "  },",
      "  mounted () {",
      "  this.getDataList();",
      "  },",
      "}",
      "</script>",
      "<style lang=\"scss\" scoped>\n",
      "</style>",
      "$2"
    ],
    "description": "Log output to console"
  }
}