[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-9EbwnGDp":3,"public-project-articles-9EbwnGDp":17},{"id":4,"uuid":5,"project_id":6,"title":7,"content":8,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},38,"9EbwnGDp",39,"05. 网页布局神器ElementUI速成","\n## ElementUI 官网\n\n[https:\u002F\u002Felement.eleme.cn\u002F#\u002Fzh-CN](https:\u002F\u002Felement.eleme.cn\u002F#\u002Fzh-CN)\n\n## Vue 安装 ElementUI\n\n一个命令搞定\n\n```\nnpm i element-ui -S\n```\n\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1691585617566-9f01ebfd-f144-48c7-8bff-5e3ab7388642.png#averageHue=%232e2d2c&clientId=ua3fd209b-0afa-4&from=paste&height=169&id=ud9747012&originHeight=211&originWidth=1866&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=36373&status=done&style=none&taskId=ue7cb933e-fa89-46b3-b056-40870e1ca1f&title=&width=1492.8)\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1691585660732-0cc85805-2945-4713-b8b3-57209ee19100.png#averageHue=%235e6e20&clientId=ua3fd209b-0afa-4&from=paste&height=136&id=u87b48dc4&originHeight=170&originWidth=376&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=10355&status=done&style=none&taskId=ufb0101e2-2c40-4ab4-a061-a53b302c9c2&title=&width=300.8)![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1691585673046-8e8c9456-44d1-46c7-8519-092807fd4b95.png#averageHue=%23504c3f&clientId=ua3fd209b-0afa-4&from=paste&height=93&id=u92dccabe&originHeight=116&originWidth=396&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=5262&status=done&style=none&taskId=u8aeb1f19-a4fe-44f5-a37c-6303afdbec4&title=&width=316.8)\n\n没搞定的检查下 npm 镜像，修改镜像源为淘宝\n\n```\nnpm config set registry https:\u002F\u002Fregistry.npmmirror.com\n```\n\n查看 npm 镜像\n\n```\nnpm config get\n```\n\n或者安装 nrm，管理 npm 镜像\n\n```\nnpm install nrm -g\n```\n\nnrm 切换镜像为 taobao\n\n```\nnrm ls\nnrm use taobao\nnrm current\n```\n\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1691587364456-35f880ef-8189-483c-a750-bc94eb09e3d4.png#averageHue=%232e2e2d&clientId=ua3fd209b-0afa-4&from=paste&height=207&id=u802a3d1d&originHeight=259&originWidth=778&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=40110&status=done&style=none&taskId=u981a5c3d-0330-4cf1-bc5b-0149edbca68&title=&width=622.4)\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1691587394872-94ee0aa1-50c9-499f-85a0-a08954064fc5.png#averageHue=%2331302f&clientId=ua3fd209b-0afa-4&from=paste&height=49&id=uab0f175a&originHeight=61&originWidth=646&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=7987&status=done&style=none&taskId=u2de55129-8987-4b8e-9a67-b39cbd70daa&title=&width=516.8)\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1691587411488-655ba39b-fd4f-47fa-8b97-195253540685.png#averageHue=%23302e2d&clientId=ua3fd209b-0afa-4&from=paste&height=167&id=u2ae2e71b&originHeight=209&originWidth=684&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=32886&status=done&style=none&taskId=u6f770321-88c7-4020-8a26-773321c27ba&title=&width=547.2)\n\n**Vue 配置安装 ElementUI**\n在 main.js 里引入下面的内容\n\n```\nimport ElementUI from 'element-ui';\nimport 'element-ui\u002Flib\u002Ftheme-chalk\u002Findex.css';\n\nVue.use(ElementUI, { size: 'small' });\n```\n\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1691588085681-71bfea81-c8cb-48db-8f0d-68cb0bdec20f.png#averageHue=%23f6f2ee&clientId=ua3fd209b-0afa-4&from=paste&height=337&id=ua0033498&originHeight=421&originWidth=1223&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=180191&status=done&style=none&taskId=ua1016072-ee62-4a6c-b284-1e5131c831c&title=&width=978.4)\nel-row + el-col\n\n## 按钮 Button\n\n属性：type、plain、round、circle\ncircle 按钮使用 icon 设置图标\n禁用状态\n文字按钮（可改变颜色）\n事件：click\n\n```\n\u003Cel-button>默认按钮\u003C\u002Fel-button>\n\u003Cel-button type=\"primary\">主要按钮\u003C\u002Fel-button>\n```\n\n## 表单 Form\n\n输入框\ntype\nshow-password\nclearable\nsuffix-icon=\"el-icon-date\"\n\n```\n\u003Cel-input v-model=\"input\" placeholder=\"请输入内容\">\u003C\u002Fel-input>\n```\n\n强制要求你必须有**v-model**\n\n输入建议表单\n\n```\n\u003Cel-autocomplete style=\"width: 300px\" placeholder=\"请输入内容，我来帮你猜一猜\" :fetch-suggestions=\"querySearch\"\n:trigger-on-focus=\"false\" v-model=\"value3\">\u003C\u002Fel-autocomplete>\n\ncoffees: [{ value: '1星巴克咖啡' },{ value: '1栖巢咖啡' }, {value: '2瑞幸咖啡'}, {value: '3库迪咖啡'}]\n\u002F\u002F 值必须带value\n\nquerySearch(query, cb) {  \u002F\u002F callback\n  let result =  query ? this.coffees.filter(v => v.value.includes(query)) : this.coffees\n  console.log(result)\n  cb(result);\n}\n```\n\n下拉框\nclearable\nmultiple\nfilterable 可搜索\n\n```\n\u003Cel-select v-model=\"value\" placeholder=\"请选择\">\n  \u003Cel-option value=\"青哥哥\">\u003C\u002Fel-option>\n  \u003Cel-option value=\"亲哥哥\">\u003C\u002Fel-option>\n  \u003Cel-option value=\"情哥哥\">\u003C\u002Fel-option>\n\u003C\u002Fel-select>\n\n\u003Cel-select v-model=\"value\" placeholder=\"请选择\">\n  \u003Cel-option\n    v-for=\"item in options\"\n    :key=\"item.value\"\n    :label=\"item.label\"\n    :value=\"item.value\">\n  \u003C\u002Fel-option>\n\u003C\u002Fel-select>\n```\n\n单选\n\n```\n\u003Cel-radio-group v-model=\"radio\">\n  \u003Cel-radio label=\"男\">\u003C\u002Fel-radio>\n  \u003Cel-radio label=\"女\">\u003C\u002Fel-radio>\n\u003C\u002Fel-radio-group>\n```\n\n多选\n\n```\n\u003Cel-checkbox-group v-model=\"checkList\">\n  \u003Cel-checkbox label=\"复选框 A\">\u003C\u002Fel-checkbox>\n  \u003Cel-checkbox label=\"复选框 B\">\u003C\u002Fel-checkbox>\n\u003C\u002Fel-checkbox-group>\n```\n\n日期时间\nformat\nvalue-format\n\n```\n\u003Cel-date-picker v-model=\"date\" type=\"date\" placeholder=\"选择日期\">\u003C\u002Fel-date-picker>\n\u003Cel-date-picker v-model=\"datetime\" type=\"date\" placeholder=\"选择日期时间\">\u003C\u002Fel-date-picker>\n\n\u003Cel-date-picker v-model=\"daterange\" type=\"daterange\"\n      start-placeholder=\"开始日期\"\n      end-placeholder=\"结束日期\">\n\u003C\u002Fel-date-picker>\n```\n\nWed Aug 09 2023 00:00:00 GMT+0800 (中国标准时间)\n\n一定要设置 value-format\n年月日：value-format=\"yyyy-MM-dd\"\n年月日时分秒：value-format=\"yyyy-MM-dd HH:mm:ss\"\n\n## 表格 el-table\n\n```\n\u003Cel-table :data=\"tableData\" border :header-cell-style=\"{ background: 'aliceblue', fontSize: '16px' }\">\n  \u003Cel-table-column label=\"序号\" prop=\"id\" align=\"center\">\u003C\u002Fel-table-column>\n  \u003Cel-table-column label=\"名称\" prop=\"name\" align=\"center\">\u003C\u002Fel-table-column>\n  \u003Cel-table-column label=\"年龄\" prop=\"age\" align=\"center\">\u003C\u002Fel-table-column>\n  \u003Cel-table-column label=\"地址\" prop=\"address\" align=\"center\">\u003C\u002Fel-table-column>\n  \u003Cel-table-column label=\"操作\">\n    \u003Ctemplate v-slot=\"scope\">\n      \u003Cel-button type=\"primary\" @click=\"edit(scope.row)\">编辑\u003C\u002Fel-button>\n    \u003C\u002Ftemplate>\n  \u003C\u002Fel-table-column>\n\u003C\u002Fel-table>\n\ntableData: [\n        {  name: '青哥哥哥', address: '安徽省合肥市', id: 1, age: '30' },\n        {  name: '青哥哥哥', address: '安徽省合肥市', id: 1, age: '30' },\n        {  name: '青哥哥哥', address: '安徽省合肥市', id: 1, age: '30' },\n        {  name: '青哥哥哥', address: '安徽省合肥市', id: 1, age: '30' },\n        {  name: '青哥哥哥', address: '安徽省合肥市', id: 1, age: '30' },\n        {  name: '青哥哥哥', address: '安徽省合肥市', id: 1, age: '30' },\n        {  name: '青哥哥哥', address: '安徽省合肥市', id: 1, age: '30' },\n      ],\n```\n\n## 提示信息\n\nmessage\nnotify\nconfirm\n\n```\n\u002F\u002F alert(row.name)\n\u002F\u002F this.$message.success(row.name)\n\u002F\u002F this.$message.warning(row.name)\n\u002F\u002F this.$notify.success(row.name)\n\nthis.$confirm('这是什么个玩意儿？', '提示', {\n  type: 'warning'\n}).then(res => {\n  this.$message.success(\"ok 我点击了确认\")\n}).catch(() => {\n  this.$message.warning(\"ok 我点击了取消\")\n})\n```\n\n## 弹窗 dialog\n\n... 更多内容请在实战项目里跟青哥哥学一波\n","coding",1,2670,60,"2025-04-08 11:27:37","2026-05-03 22:49:02","【青哥带小白做毕设2024】完整教程资料汇总","qingge-graduation-project-2024",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,28,35,42,49,56,57,63,70,77,84,91,98,105,112,119,126,133,140,147,154,161,168],{"id":21,"uuid":22,"project_id":6,"title":23,"type":9,"status":10,"public_enabled":10,"views":24,"sort":25,"created_at":26,"updated_at":27,"project_title":15,"project_slug":16},33,"R1oMCsCX","00. 从0开始带小白做SpringBoot+Vue+uniapp微信小程序实战项目",12130,55,"2025-04-08 11:28:17","2026-05-07 15:33:28.189425+00",{"id":29,"uuid":30,"project_id":6,"title":31,"type":9,"status":10,"public_enabled":10,"views":32,"sort":33,"created_at":34,"updated_at":14,"project_title":15,"project_slug":16},34,"s3u3u8W7","01. 网页布局技巧",3326,56,"2025-04-08 11:28:13",{"id":36,"uuid":37,"project_id":6,"title":38,"type":9,"status":10,"public_enabled":10,"views":39,"sort":40,"created_at":41,"updated_at":14,"project_title":15,"project_slug":16},35,"21zUHQYS","02. JavaScript入门",2017,57,"2025-04-08 11:27:55",{"id":43,"uuid":44,"project_id":6,"title":45,"type":9,"status":10,"public_enabled":10,"views":46,"sort":47,"created_at":48,"updated_at":14,"project_title":15,"project_slug":16},36,"4XVgY9Ti","03. Vue脚手架搭建",3719,58,"2025-04-08 11:27:46",{"id":50,"uuid":51,"project_id":6,"title":52,"type":9,"status":10,"public_enabled":10,"views":53,"sort":54,"created_at":55,"updated_at":14,"project_title":15,"project_slug":16},37,"S8vLLLvk","04. Git速成，推送代码到云端",1585,59,"2025-04-08 11:27:41",{"id":4,"uuid":5,"project_id":6,"title":7,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},{"id":6,"uuid":58,"project_id":6,"title":59,"type":9,"status":10,"public_enabled":10,"views":60,"sort":61,"created_at":62,"updated_at":14,"project_title":15,"project_slug":16},"tmzahWer","06. Vue管理系统速成",3744,61,"2025-04-08 11:27:32",{"id":64,"uuid":65,"project_id":6,"title":66,"type":9,"status":10,"public_enabled":10,"views":67,"sort":68,"created_at":69,"updated_at":14,"project_title":15,"project_slug":16},40,"2agqAUQK","07. SpringBoot速成",3654,62,"2025-04-08 11:27:27",{"id":71,"uuid":72,"project_id":6,"title":73,"type":9,"status":10,"public_enabled":10,"views":74,"sort":75,"created_at":76,"updated_at":14,"project_title":15,"project_slug":16},41,"SXPAzgy7","08. Http扫盲，让小白也能听懂",2337,63,"2025-04-08 11:27:20",{"id":78,"uuid":79,"project_id":6,"title":80,"type":9,"status":10,"public_enabled":10,"views":81,"sort":82,"created_at":83,"updated_at":14,"project_title":15,"project_slug":16},42,"ostBIxAV","09. SpringBoot集成Mybatis实现增删改查",4190,64,"2025-04-08 11:27:13",{"id":85,"uuid":86,"project_id":6,"title":87,"type":9,"status":10,"public_enabled":10,"views":88,"sort":89,"created_at":90,"updated_at":14,"project_title":15,"project_slug":16},43,"6Sv7afpa","10. Vue封装前后端数据交互工具",3716,65,"2024-04-16 02:33:13",{"id":92,"uuid":93,"project_id":6,"title":94,"type":9,"status":10,"public_enabled":10,"views":95,"sort":96,"created_at":97,"updated_at":14,"project_title":15,"project_slug":16},44,"d53BPIQs","11. Vue登录（含验证码）、注册页面开发",4867,66,"2024-04-16 02:33:08",{"id":99,"uuid":100,"project_id":6,"title":101,"type":9,"status":10,"public_enabled":10,"views":102,"sort":103,"created_at":104,"updated_at":14,"project_title":15,"project_slug":16},45,"m033ng06","12. SpringBoot集成JWT token实现权限验证",3243,67,"2024-04-16 02:33:00",{"id":106,"uuid":107,"project_id":6,"title":108,"type":9,"status":10,"public_enabled":10,"views":109,"sort":110,"created_at":111,"updated_at":14,"project_title":15,"project_slug":16},46,"7xzyVD06","13. SpringBoot+Vue实现单文件、多文件上传和下载",2784,68,"2024-04-16 02:32:52",{"id":113,"uuid":114,"project_id":6,"title":115,"type":9,"status":10,"public_enabled":10,"views":116,"sort":117,"created_at":118,"updated_at":14,"project_title":15,"project_slug":16},47,"BdOLUenp","14. 多角色登录（Vue-Router路由守卫）",2318,69,"2024-04-16 02:32:39",{"id":120,"uuid":121,"project_id":6,"title":122,"type":9,"status":10,"public_enabled":10,"views":123,"sort":124,"created_at":125,"updated_at":14,"project_title":15,"project_slug":16},48,"2Wkx3igg","15. Vue个人信息修改、修改密码、重置密码",2092,70,"2024-04-16 02:32:33",{"id":127,"uuid":128,"project_id":6,"title":129,"type":9,"status":10,"public_enabled":10,"views":130,"sort":131,"created_at":132,"updated_at":14,"project_title":15,"project_slug":16},49,"BDvVa4By","16. SpringBoot+Vue管理系统实现增删改查",2598,71,"2024-04-16 02:32:29",{"id":134,"uuid":135,"project_id":6,"title":136,"type":9,"status":10,"public_enabled":10,"views":137,"sort":138,"created_at":139,"updated_at":14,"project_title":15,"project_slug":16},50,"FJVl0rCu","17. SpringBoot+Vue实现数据的批量导入和导出",1684,72,"2024-04-16 02:32:26",{"id":141,"uuid":142,"project_id":6,"title":143,"type":9,"status":10,"public_enabled":10,"views":144,"sort":145,"created_at":146,"updated_at":14,"project_title":15,"project_slug":16},51,"FvW9oHgj","18. SpringBoot+Vue项目部署上线",2845,73,"2024-04-16 02:32:22",{"id":148,"uuid":149,"project_id":6,"title":150,"type":9,"status":10,"public_enabled":10,"views":151,"sort":152,"created_at":153,"updated_at":14,"project_title":15,"project_slug":16},52,"xyqrxxiR","19. SpringBoot+Vue集成富文本编辑器",1499,74,"2024-04-16 02:32:18",{"id":155,"uuid":156,"project_id":6,"title":157,"type":9,"status":10,"public_enabled":10,"views":158,"sort":159,"created_at":160,"updated_at":14,"project_title":15,"project_slug":16},53,"XAaCXz8W","20. SpringBoot+Vue集成系统公告",1043,75,"2024-04-16 02:32:14",{"id":162,"uuid":163,"project_id":6,"title":164,"type":9,"status":10,"public_enabled":10,"views":165,"sort":166,"created_at":167,"updated_at":14,"project_title":15,"project_slug":16},54,"2havlmaC","21. SpringBoot+Vue集成AOP系统日志",1159,76,"2024-04-16 02:32:11",{"id":25,"uuid":169,"project_id":6,"title":170,"type":9,"status":10,"public_enabled":10,"views":171,"sort":172,"created_at":173,"updated_at":14,"project_title":15,"project_slug":16},"ObvLqJdX","22. SpringBoot+Vue实现Echarts数据报表（柱状图、饼图、折线图）",1688,99,"2024-04-16 02:30:25"]