[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-U58ISSFR":3,"public-project-articles-U58ISSFR":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},476,"U58ISSFR",47,"02. 从0带你搭建Vue3工程","## 开发工具\n\nnodejs16+版本、IntelliJIDEA\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728460368811-d4af15fa-cc88-40a4-b290-34d328a6959e.png)\n\n## npm\n\nnpm 是一个包管理工具，可以帮助我们下载 vue 工程所需的依赖，npm 需要配置淘宝镜像，否则下载速度非常慢。配置方法：在命令行输入下面的指令\n\n```vue\nnpm config set registry http:\u002F\u002Fregistry.npmmirror.com\n```\n\n## Vue官方网站\n\n[https:\u002F\u002Fcn.vuejs.org\u002F](https:\u002F\u002Fcn.vuejs.org\u002F)\n\n## 创建 Vue 工程\n\n```vue\nnpm create vue@latest\n```\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728460709069-90b2a617-df96-4bbf-91f8-2e50429830d9.png)\n\n\n\n安装 vue 工程依赖\n\n```vue\ncd vue\nnpm install\nnpm run dev\n```\n\n这里是 下载 vue 项目所需的依赖包\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728460836505-47e6d914-a578-4a12-a748-a157d99fddcd.png)\n\n\n\n当你看到这个页面，说明 Vue3 项目启动成功\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728460959593-40b749d7-0346-47cb-9ef8-596379830eb1.png)\n\n\n\n## idea 启动 vue3\n\n先使用 idea 打开这个 xm-pro 目录\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728461084916-1986ea7a-f587-4be6-bdcc-7c736155dcfc.png)\n\ntrust\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728461109333-0d4274dd-e5b4-4c55-83c6-c5529cd361ac.png)\n\n删除文件\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728461212541-56e1130a-d58a-45a8-87e1-401561a0ac9a.png)\n\n在 idea 里面启动 vue3 工程\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728461299832-2ed50cbb-1c4b-4979-a229-9743f84e8992.png)\n\n## 项目瘦身\n\n1. 删除文件\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728461465860-19b79962-d752-4027-bfff-3992e3f85895.png)\n\nsetup 是必备的属性，他是语法糖，有这个就可以使用 Vue3 的语法特性\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728461599091-e183f500-0bcc-43e6-a4de-06feecea81f6.png)\n\n2. 改造 Home.vue，删除 AboutView.vue\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728461682049-93f09a3e-b857-4dc9-8818-3b6eaa0bdeef.png)\n\n3. 精简路由\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728461812533-31e45834-32e7-4665-99d2-5e3264d192dd.png)\n\n4. 精简 App.vue 只是作为项目的入口文件\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728461959403-48abf3bd-dc83-46da-a312-1752d8245133.png)\n\n5. main.js 删除无用的导包\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728462016799-3fee8f91-c614-4589-8dd3-e875858807c8.png)\n\n## main.js 里面引入全局的 css\n\nglobal.css\n\n```css\nbody {\n    margin: 0;\n    padding: 0;\n    font-size: 14px;\n    color: #333;\n}\n```\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728462369521-8dd50fbf-f207-4c93-9794-406d3110b609.png)\n\n## Css 基础教程\n\n画 2 小时时间简单了解一下即可\n\n[https:\u002F\u002Fwww.runoob.com\u002Fcss\u002Fcss-tutorial.html](https:\u002F\u002Fwww.runoob.com\u002Fcss\u002Fcss-tutorial.html)\n\n## Vue 基本的语法介绍\n\n[https:\u002F\u002Fwww.runoob.com\u002Fvue3\u002Fvue3-tutorial.html](https:\u002F\u002Fwww.runoob.com\u002Fvue3\u002Fvue3-tutorial.html)\n\n\n\n### {{  }}\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728462873926-0a1d4bd6-51c0-4f05-8f4c-71c884d9ea71.png)\n\n### v-model\n\n双向绑定：数据可以在用户输入的时候发生实时的变化\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728463086811-6db621da-82cf-4325-914e-d879766ccce1.png)\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728463109235-421d0c6d-5c8d-471c-98ca-3aad071377f4.png)\n\n### v-if  v-else\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728463391825-9552f061-498a-45a3-8c6e-fdb6ea801029.png)\n\n### v-for\n\n```vue\n\u003Cselect style=\"width: 200px\">\n  \u003Coption v-for=\"item in data.fruits\">{{ item }}\u003C\u002Foption>\n\u003C\u002Fselect>\n\n\u003Cscript setup>\nimport {reactive, ref} from \"vue\";\n\u003C\u002Fscript>\n```\n\n### @（v-on:）\n\n@click 点击事件\n\n```vue\n\u003Cbutton @click=\"click\">点我加好运\u003C\u002Fbutton>\n\nconst click = () => {\n  alert(\"好运+1\")\n}\n```\n\n### : （v-bind:）\n\n[https:\u002F\u002Fwww.runoob.com\u002Fwp-content\u002Fuploads\u002F2017\u002F01\u002Fvue.png](https:\u002F\u002Fwww.runoob.com\u002Fwp-content\u002Fuploads\u002F2017\u002F01\u002Fvue.png)\n\n```vue\n\u003Cdiv>\n  \u003Cdiv :style=\"data.box\">\u003C\u002Fdiv>\n  \u003Cdiv>\n    \u003Cimg :src=\"data.img\" alt=\"\">\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\nconst data = reactive({\n  box: {\n    width: '100px',\n    height: '100px',\n    backgroundColor: 'red'\n  },\n  img: 'https:\u002F\u002Fwww.runoob.com\u002Fwp-content\u002Fuploads\u002F2017\u002F01\u002Fvue.png'\n})    \n```\n\n\n\n## onMounted\n\n就是在页面元素完全加载完成之后触发，页面元素加载需要时间\n\n```vue\nonMounted(() => {\n  console.log('页面加载完成')\n})\n```\n\n","coding",1,12899,911,"2024-10-11 16:47:49","2026-05-03 22:49:02","1天学会SpringBoot3+Vue3实战项目开发","learn-springboot-vue",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,27,28,36,43,50,57,64,71,78,85,92,99,106,113,120],{"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":14,"project_title":15,"project_slug":16},475,"OgrBbww7","01. 1天学会SpringBoot3+Vue3实战项目课程介绍",17862,910,"2024-10-11 16:50:50",{"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":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},478,"tK3YUYq8","03. Vue3集成Element-Plus",9899,919,"2024-10-14 22:18:17","2026-05-07 15:33:28.189425+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},488,"J2MV6UAG","04. Element-Plus组件使用速成",8093,938,"2024-10-11 16:49:40",{"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},489,"zGi4XJsb","05. Vue3集成Vue-Router实现路由跳转",7443,939,"2024-10-12 15:44: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},499,"cwsTdvo9","06. Vue3搭建后台管理系统",7421,964,"2024-10-14 16:02:49",{"id":58,"uuid":59,"project_id":6,"title":60,"type":9,"status":10,"public_enabled":10,"views":61,"sort":62,"created_at":63,"updated_at":14,"project_title":15,"project_slug":16},501,"JlXltpKA","07. Mysql语法简介（速成）",5208,973,"2024-10-15 16:52:18",{"id":65,"uuid":66,"project_id":6,"title":67,"type":9,"status":10,"public_enabled":10,"views":68,"sort":69,"created_at":70,"updated_at":14,"project_title":15,"project_slug":16},509,"c3XrOTcU","08. 从0带你搭建SpringBoot3工程",9397,992,"2024-10-16 15:43:13",{"id":72,"uuid":73,"project_id":6,"title":74,"type":9,"status":10,"public_enabled":10,"views":75,"sort":76,"created_at":77,"updated_at":14,"project_title":15,"project_slug":16},516,"QsKwbDX7","09. SpringBoot3集成Mybatis",10348,1004,"2024-10-17 16:36:15",{"id":79,"uuid":80,"project_id":6,"title":81,"type":9,"status":10,"public_enabled":10,"views":82,"sort":83,"created_at":84,"updated_at":14,"project_title":15,"project_slug":16},519,"qKG13ySo","10. SpringBoot3+Vue3实现基本的增删改查功能",9572,1013,"2024-10-18 16:34:55",{"id":86,"uuid":87,"project_id":6,"title":88,"type":9,"status":10,"public_enabled":10,"views":89,"sort":90,"created_at":91,"updated_at":14,"project_title":15,"project_slug":16},527,"7uED9n7e","11. Vue3开发登录注册页面",7106,1031,"2024-10-21 17:35:30",{"id":93,"uuid":94,"project_id":6,"title":95,"type":9,"status":10,"public_enabled":10,"views":96,"sort":97,"created_at":98,"updated_at":14,"project_title":15,"project_slug":16},535,"poUfWrWc","12. Vue3管理系统开发个人信息、修改密码页面",5777,1050,"2024-10-22 17:50:30",{"id":100,"uuid":101,"project_id":6,"title":102,"type":9,"status":10,"public_enabled":10,"views":103,"sort":104,"created_at":105,"updated_at":14,"project_title":15,"project_slug":16},542,"FxHR3hNR","13. SpringBoot3+Vue3实现文件上传下载功能",4489,1057,"2024-10-23 17:31:02",{"id":107,"uuid":108,"project_id":6,"title":109,"type":9,"status":10,"public_enabled":10,"views":110,"sort":111,"created_at":112,"updated_at":14,"project_title":15,"project_slug":16},548,"VPZNSTxr","14. SpringBoot3+Vue3实现富文本编辑器功能",3931,1072,"2024-10-24 17:38:21",{"id":114,"uuid":115,"project_id":6,"title":116,"type":9,"status":10,"public_enabled":10,"views":117,"sort":118,"created_at":119,"updated_at":14,"project_title":15,"project_slug":16},555,"nal0yVxM","15. SpringBoot3+Vue3实现数据批量导入导出功能",3577,1090,"2024-10-28 17:39:21",{"id":121,"uuid":122,"project_id":6,"title":123,"type":9,"status":10,"public_enabled":10,"views":124,"sort":125,"created_at":126,"updated_at":14,"project_title":15,"project_slug":16},564,"XxSPPFGi","16. SpringBoot3+Vue3实现数据统计图表功能",4236,1109,"2025-01-09 09:40:57"]