[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-v00b56h7":3,"public-project-articles-v00b56h7":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},1162,"v00b56h7",57,"01. 零基础小白直接上手Vue","## 本节课最终实现效果\n\n\u003C!-- 这是一张图片，ocr 内容为： -->\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2026\u002Fpng\u002F751015\u002F1767520564870-972ccee5-9423-48ec-892e-da8f0ae23e96.png)\n\n## 前置内容\n\nHTML、CSS、JS\n\n[https:\u002F\u002Fwww.runoob.com\u002F](https:\u002F\u002Fwww.runoob.com\u002F)\n\n## 环境准备\n\nNodejs20+、Pycharm（VsCode）\n\nNodejs20： [https:\u002F\u002Fnodejs.org\u002Fzh-tw\u002Fdownload\u002F](https:\u002F\u002Fnodejs.org\u002Fzh-tw\u002Fdownload\u002F)\n\n\n\n下载Pycharm：[https:\u002F\u002Fwww.jetbrains.com\u002Fzh-cn\u002Fpycharm\u002Fdownload](https:\u002F\u002Fwww.jetbrains.com\u002Fzh-cn\u002Fpycharm\u002Fdownload)\n\n## 镜像\n\n```plain\nnpm config set registry https:\u002F\u002Fregistry.npmmirror.com\n```\n\n## 使用官方的最简单脚手架\n\nVue 官网：[https:\u002F\u002Fcn.vuejs.org\u002F](https:\u002F\u002Fcn.vuejs.org\u002F)\n\n```plain\nnpm create vue@latest\n```\n\n安装完成：\n\n\u003C!-- 这是一张图片，ocr 内容为： -->\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2026\u002Fpng\u002F751015\u002F1767517050722-54e9a98a-a9a2-4d0b-98ca-beef43b0998d.png)\n\n\n\n学习：**v-if    v-for    v-on( @ )     v-bind( : )**\n\n\n\n\u003C!-- 这是一张图片，ocr 内容为： -->\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2026\u002Fpng\u002F751015\u002F1767517236992-b3ff03a2-f7d6-4297-afde-1c3295ef3f77.png)  \n\n再 Pycharm 里面启动 vue 工程\n\n\u003C!-- 这是一张图片，ocr 内容为： -->\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2026\u002Fpng\u002F751015\u002F1767517643370-f4af2993-5251-4879-bae5-c8527a8d1664.png)\n\n\n\n卸载默认的调试工具 devtools\n\n```plain\nnpm uninstall vite-plugin-vue-devtools\n```\n\n删除配置\n\n\u003C!-- 这是一张图片，ocr 内容为： -->\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2026\u002Fpng\u002F751015\u002F1767517830102-412628d6-97ca-4943-9695-3a21cb9fb22f.png)\n\n\n\n\n\n## 集成 ELement-plus\n\n官网：[https:\u002F\u002Felement-plus.org\u002Fzh-CN\u002F](https:\u002F\u002Felement-plus.org\u002Fzh-CN\u002F)\n\n\n\n安装：\n\n```plain\nnpm install element-plus -S\n```\n\nmain.js 里面引入 组件库\n\n\u003C!-- 这是一张图片，ocr 内容为： -->\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2026\u002Fpng\u002F751015\u002F1767518360990-1d44a821-7823-4ae2-8758-d96e624a2c55.png)\n\n\n\n导入中文包\n\n```plain\nimport zhCn from 'element-plus\u002Fes\u002Flocale\u002Flang\u002Fzh-cn'\n```\n\n\n\n## 本节课 App.vue 的代码\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv style=\"text-align: center; font-size: 30px; margin-bottom: 20px; font-weight: bold\">青哥哥带你学习FastAPI + Vue3\u003C\u002Fdiv>\n    \u003Cdiv style=\"text-align: center; margin-bottom: 50px; font-size: 18px\">学生信息管理页面（增删改查）\u003C\u002Fdiv>\n    \u003Cdiv style=\"width: 70%; margin: 30px auto\">\n      \u003Cdiv style=\"margin-bottom: 10px\">\n        \u003Cel-input clearable @clear=\"load\" style=\"width: 300px\" v-model=\"data.name\" placeholder=\"请输入姓名查询\">\u003C\u002Fel-input>\n        \u003Cel-button type=\"info\" @click=\"load\" style=\"margin-left: 5px; margin-right: 20px\">搜索\u003C\u002Fel-button>\n        \u003Cel-button type=\"primary\" @click=\"handleAdd\">新增\u003C\u002Fel-button>\n      \u003C\u002Fdiv>\n\n      \u003Cdiv>\n        \u003Cel-table border stripe :data=\"data.tableData\" style=\"width: 100%\">\n          \u003Cel-table-column prop=\"no\" label=\"学号\" \u002F>\n          \u003Cel-table-column prop=\"name\" label=\"姓名\" \u002F>\n          \u003Cel-table-column prop=\"clazz\" label=\"班级\" \u002F>\n          \u003Cel-table-column prop=\"major\" label=\"专业\" \u002F>\n          \u003Cel-table-column prop=\"college\" label=\"学院\" \u002F>\n          \u003Cel-table-column prop=\"phone\" label=\"手机\" \u002F>\n          \u003Cel-table-column prop=\"email\" label=\"邮箱\" \u002F>\n          \u003Cel-table-column prop=\"address\" label=\"地址\" \u002F>\n          \u003Cel-table-column label=\"操作\">\n            \u003Ctemplate #default=\"scope\">\n              \u003Cel-button size=\"small\" type=\"primary\" @click=\"handleEdit(scope.row)\">编辑\u003C\u002Fel-button>\n              \u003Cel-button size=\"small\" type=\"danger\" @click=\"remove()\">删除\u003C\u002Fel-button>\n            \u003C\u002Ftemplate>\n          \u003C\u002Fel-table-column>\n        \u003C\u002Fel-table>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"margin-top: 10px\">\n        \u003Cel-pagination background layout=\"total, prev, pager, next\" @current-change=\"load\" v-model:current-page=\"data.pageNum\"\n                       v-model:page-size=\"data.pageSize\" :total=\"data.total\" \u002F>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\n\u003Cscript setup>\nimport {reactive} from \"vue\";\n\nconst data = reactive({\n  name: null,\n  pageNum: 1,\n  pageSize: 2,\n  total: 4,\n  tableData: []\n})\n\nconst handleAdd = () => {\n  \u002F\u002F 新增数据\n}\n\nconst handleEdit = (row) => {\n  \u002F\u002F 编辑行数据\n  console.log(row)\n}\n\nconst remove = (id) => {\n  \u002F\u002F 根据ID删除数据\n}\n\nconst load = () => {\n  data.tableData = [\n      { no: '20231001', name: '小林1', clazz: '计科1班', major: '计算机科学与技术', college: '计算机学院', phone: '13899887766',\n      email: 'xiaolin@163.com', address: '安徽合肥' },\n    { no: '20231002', name: '小林2', clazz: '计科1班', major: '计算机科学与技术', college: '计算机学院', phone: '13899887766',\n      email: 'xiaolin@163.com', address: '安徽合肥' },\n    { no: '20231003', name: '小林3', clazz: '计科1班', major: '计算机科学与技术', college: '计算机学院', phone: '13899887766',\n      email: 'xiaolin@163.com', address: '安徽合肥' },\n    { no: '20231004', name: '小林4', clazz: '计科1班', major: '计算机科学与技术', college: '计算机学院', phone: '13899887766',\n      email: 'xiaolin@163.com', address: '安徽合肥' },\n  ]\n}\nload()  \u002F\u002F 加载数据\n\u003C\u002Fscript>\n\n\n\u003Cstyle scoped>\n\n\u003C\u002Fstyle>\n\n```\n\n","coding",1,846,2271,"2026-01-04 18:10:36","2026-05-03 22:49:02","FastAPI+Vue3零基础入门教程","fastapi-vue-zero",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,21,28,36,43],{"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":22,"uuid":23,"project_id":6,"title":24,"type":9,"status":10,"public_enabled":10,"views":25,"sort":26,"created_at":27,"updated_at":14,"project_title":15,"project_slug":16},1165,"w9DeSyXA","02. 零基础小白直接上手FastAPI",445,2275,"2026-01-05 17:01:37",{"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":35,"project_title":15,"project_slug":16},1167,"p7VJICb3","03. 零基础小白直接上手FastAPI开发增删改查接口",370,2279,"2026-01-06 17:43:27","2026-05-07 15:36:12.649662+00",{"id":37,"uuid":38,"project_id":6,"title":39,"type":9,"status":10,"public_enabled":10,"views":40,"sort":41,"created_at":42,"updated_at":14,"project_title":15,"project_slug":16},1172,"ptdUZ7z8","04. 零基础小白直接上手FastAPI+Vue3前后端分离开发",308,2292,"2026-01-07 16:54:01",{"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},1173,"ngdkfhqL","05. 课程完整源码",194,2293,"2026-01-07 16:56:13"]