[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-4XVgY9Ti":3,"public-project-articles-4XVgY9Ti":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},36,"4XVgY9Ti",39,"03. Vue脚手架搭建","\n## 课程演示代码\n[https:\u002F\u002Fpan.baidu.com\u002Fs\u002F1IsFsMT8y1IhVQKvWFngmSw?pwd=t56j](https:\u002F\u002Fpan.baidu.com\u002Fs\u002F1IsFsMT8y1IhVQKvWFngmSw?pwd=t56j)\n\n## Vue 起步（Vue2）\n\n文档 [https:\u002F\u002Fv2.cn.vuejs.org\u002F](https:\u002F\u002Fv2.cn.vuejs.org\u002F)\n语法\n\n```javascript\nvar example1 = new Vue({\n  el: '#example-1',\n  data: {\n    counter: 0\n  }\n})\n```\n\n- {{  }} 变量、表达式渲染\n- v-html html 模板，渲染 html\n- v-model 绑定值（双向绑定）\n- v-if v-else-if v-else 判断\n- **v-bind 简写 : 绑定属性**\n- **v-on 简写 @ 事件绑定**\n- **v-for 循环**\n- **动态 class style**\n\n下载软件 nodejs v16  \n安装 node & npm\nnpm 配置淘宝镜像：\n**npm config set registry **[**http:\u002F\u002Fregistry.npm.taobao.org\u002F**](http:\u002F\u002Fregistry.npm.taobao.org\u002F)\n\n## Vue 脚手架搭建\n\n**正式项目开启**\n**新建目录 **小白做毕设 2024\n脚手架工具：[https:\u002F\u002Fcli.vuejs.org\u002Fzh\u002Fguide\u002F](https:\u002F\u002Fcli.vuejs.org\u002Fzh\u002Fguide\u002F)\n\n```\nnpm install -g @vue\u002Fcli\n\nvue --version\n\n\u002F\u002F 进入目录小白做毕设2024\nvue create vue\n```\n\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1691155247451-627cea0d-26cf-413f-9403-0fc4744b6ec3.png#averageHue=%231f1f1e&clientId=u7794909f-b86a-4&from=paste&height=511&id=u6de9e85f&originHeight=639&originWidth=1223&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=51735&status=done&style=none&taskId=u59d702ee-89a8-4d33-b503-6664f6124fd&title=&width=978.4)\n\n```\ncd vue\nnpm run serve\n```\n\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1691155324672-565d5ca8-be13-4935-b849-67e4e5a6547b.png#averageHue=%231e1e1d&clientId=u7794909f-b86a-4&from=paste&height=511&id=ude07206e&originHeight=639&originWidth=1223&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=28546&status=done&style=none&taskId=ue1a5f46e-9927-429e-9349-1322ff29fe2&title=&width=978.4)\n配置\nvue.config.js\n\n```\nconst { defineConfig } = require('@vue\u002Fcli-service')\nmodule.exports = defineConfig({\n  transpileDependencies: true,\n  devServer: {\n    port: 7000\n  },\n  chainWebpack: config =>{\n    config.plugin('html')\n        .tap(args => {\n          args[0].title = \"青哥哥好帅啊\";\n          return args;\n        })\n  }\n})\n```\n\nApp.vue\n\n```\n\u003Ctemplate>\n  \u003Cdiv id=\"app\">\n    \u003Crouter-view\u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\nHomeView.vue\n\n```\n\u003Ctemplate>\n  \u003Cdiv>\n    主页\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n\nexport default {\n  name: 'HomeView'\n}\n\u003C\u002Fscript>\n\n```\n\nrouter.js\n\n```\nimport Vue from 'vue'\nimport VueRouter from 'vue-router'\n\nVue.use(VueRouter)\n\nconst routes = [\n  {\n    path: '\u002F',\n    name: 'home',\n    component: () => import('..\u002Fviews\u002FHomeView.vue')\n  }\n]\n\nconst router = new VueRouter({\n  mode: 'history',\n  base: process.env.BASE_URL,\n  routes\n})\n\nexport default router\n\n```\n\nglobal.css\n\n```\n* {\n    box-sizing: border-box;\n}\nbody {\n    color: #333;\n    font-size: 14px;\n    margin: 0;\n    padding: 0;\n}\n```\n","coding",1,3719,58,"2025-04-08 11:27:46","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,43,50,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":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":44,"uuid":45,"project_id":6,"title":46,"type":9,"status":10,"public_enabled":10,"views":47,"sort":48,"created_at":49,"updated_at":14,"project_title":15,"project_slug":16},37,"S8vLLLvk","04. Git速成，推送代码到云端",1585,59,"2025-04-08 11:27:41",{"id":51,"uuid":52,"project_id":6,"title":53,"type":9,"status":10,"public_enabled":10,"views":54,"sort":55,"created_at":56,"updated_at":14,"project_title":15,"project_slug":16},38,"9EbwnGDp","05. 网页布局神器ElementUI速成",2670,60,"2025-04-08 11:27:37",{"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"]