[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-nmjXCdVH":3,"public-project-articles-nmjXCdVH":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},767,"nmjXCdVH",49,"01. 前端Vue3 框架的快速搭建以及项目工程的讲解","## 安装软件 NodeJS\n\nvue3推荐使用 nodejs **v22.13.1** （up 使用的版本，肯定没错）\n\nnpm 版本：**10.9.2**\n\nnpm 使用之前一定要配置淘宝镜像：\n\n```powershell\nnpm config set registry https:\u002F\u002Fregistry.npmmirror.com\n```\n\n查看镜像：\n\n```vue\nnpm config get registry\n```\n\n## 搭建 Vue工程\n\nVue官网：[https:\u002F\u002Fcn.vuejs.org\u002F](https:\u002F\u002Fcn.vuejs.org\u002F)\n\n快速上手：[https:\u002F\u002Fcn.vuejs.org\u002Fguide\u002Fquick-start.html](https:\u002F\u002Fcn.vuejs.org\u002Fguide\u002Fquick-start.html)\n\n\n\n运行命令创建 Vue 工程：\n\n```vue\nnpm create vue@latest\n```\n\n通过交互式的指令去创建 Vue3 工程\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1739434824521-05060aba-aedf-4568-a919-1cd3a6699be4.png)\n\n在命令行 根据提示运行命令\n\n```vue\ncd vue\nnpm i\nnpm run dev\n```\n\n打开运行后出现的网址：[http:\u002F\u002F127.0.0.1:5173\u002F](http:\u002F\u002F127.0.0.1:5173\u002F)\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1739435016949-abff5251-8588-488b-983d-3b36b86a4f88.png)\n\n在 CMD 命令行里面按两次 Ctrl +C 可以关闭正在运行的vue 工程\n\n## vue 工程精简\n\n删除无用的文件\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1739435174852-491336b8-68d5-4024-8229-93b6cd8fa725.png)\n\n## 在 idea 里面启动 vue 工程\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1739435298298-c389f94c-aaa0-44ee-8b76-a5bb43ee0ad9.png)\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1739435535412-a81b9261-aa46-4ddd-9a9a-802554a65c94.png)\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1739435417986-08ef1674-b0e7-48b8-902d-49d02db38173.png)\n\n\n\nHomeView.vue 改名成** Home.vue**\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n    主页\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\n\n\u003C\u002Fscript>\n```\n\n\n\nApp.vue 删除无用的代码：\n\n```vue\n\u003Ctemplate>\n  \u003CRouterView \u002F>\n\u003C\u002Ftemplate>\n```\n\n\n\nrouter.js 删除无用的代码：\n\n```vue\nimport { createRouter, createWebHistory } from 'vue-router'\n\nconst router = createRouter({\n  history: createWebHistory(import.meta.env.BASE_URL),\n  routes: [\n    { path: '\u002F', name: 'home', component: import('..\u002Fviews\u002FHome.vue'),},\n  ],\n})\n\nexport default router\n```\n\n\n\nmain.js 精简：\n\n```vue\nimport { createApp } from 'vue'\nimport App from '.\u002FApp.vue'\nimport router from '.\u002Frouter'\n\nconst app = createApp(App)\n\napp.use(router)\n\napp.mount('#app')\n\n```\n\n## vue 工程目录解读\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1739435853273-f43d4ba4-9b49-4b18-aeed-2b5b103ed414.png)\n\n**node_modules**：不是我们的源码文件，这个是依赖包下载之后的存放目录\n\n**public**：存放全局的静态文件，比如说网页的 icon\n\n**src**\n\n+ **assets**：一般是存放代码引用的静态文件，比如：css、js、img\n+ **components**：放一下 vue 的组件（可复用的代码块，就叫组件）\n+ **router**：定义路由文件的目录\n+ **views**：存放 vue 网页文件的目录\n+ **App.vue**：vue 页面全局的入口，所有 vue 文件的父级\n+ **main.js**：代码的配置文件，引入第三方的组件或者我们自己定义的一些组件、css、js 等\n\n**index.html**：vue编译成网页才能在浏览器渲染\n\n**jsconfig.json**：内部配置文件\n\n**package.json**：定义依赖库的文件\n\n**package-lock.json**：在你下载依赖的时候锁定版本的一个文件\n\n**vite.config.js**：全局的配置文件\n\n[https:\u002F\u002Fvitejs.cn\u002Fvite3-cn\u002Fguide\u002Ffeatures.html](https:\u002F\u002Fvitejs.cn\u002Fvite3-cn\u002Fguide\u002Ffeatures.html)\n\n## 设置网页标题\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1739436639761-58984ede-d5b4-4e84-bfcf-2ef5359f4c34.png)\n\n## 全局css  global.css\n\n```css\n* {\n    box-sizing: border-box;\n}\n\nbody {\n    margin: 0;\n    padding: 0;\n    color: #333;\n    font-size: 14px;\n}\n\na {\n    text-decoration: none;\n}\n\n```\n\n\n\n在 main.js 里面引入 global.css\n\n```vue\nimport '.\u002Fassets\u002Fcss\u002Fglobal.css'\n```\n\n## 路由配置\n\nrouter\u002Findex.js\n\n```vue\nimport { createRouter, createWebHistory } from 'vue-router'\n\nconst router = createRouter({\n  history: createWebHistory(import.meta.env.BASE_URL),\n  routes: [\n    { path: '\u002FnotFound', component: () => import('@\u002Fviews\u002F404.vue') },\n    { path: '\u002F:pathMatch(.*)', redirect: '\u002FnotFound' }\n  ]\n})\n\nexport default router\n\n```\n\n## 定义404页面\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fjpeg\u002F751015\u002F1739428355554-56ce9e34-5ce2-4b0a-a792-e73d948d2b5d.jpeg)\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv style=\"height: 100vh; display: flex; align-items: center; justify-content: center\">\n    \u003Cdiv style=\"width: 50%\">\n      \u003Cimg style=\"width: 100%\" src=\"@\u002Fassets\u002Fimgs\u002F404.jpg\" alt=\"\">\n      \u003Cdiv style=\"text-align: center; padding: 20px 0; font-size: 20px;\">\u003Ca style=\"color: #3741fb\" href=\"\u002F\">返回主页\u003C\u002Fa>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\n## ","coding",1,15797,1513,"2025-02-13 17:13:40","2026-05-03 22:49:02","带小白做毕设2025系列课程","graduation-project-2025",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,28,29,36,43,50,57,64,71,78,85,92,99,106,113,120,127,134,141,148,155],{"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},766,"XmlcAcY0","00. 带小白做毕设2025课程介绍",19012,1512,"2025-02-22 15:29:01","2026-05-07 15:33:28.189425+00",{"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":30,"uuid":31,"project_id":6,"title":32,"type":9,"status":10,"public_enabled":10,"views":33,"sort":34,"created_at":35,"updated_at":14,"project_title":15,"project_slug":16},768,"pMdPrVeH","02. 使用Vue3集成Element-Plus快速搭建一个管理系统的页面框架",15959,1514,"2025-02-14 11:25:07",{"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},771,"8PikYMQU","03. Springboot3框架的快速搭建以及项目工程的讲解",12768,1517,"2025-02-21 17:21:51",{"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},772,"Q1TCG9Jj","04. Springboot3整合MyBatis实现数据库操作",11144,1518,"2025-03-07 15:50:30",{"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},773,"De7YPnEc","05. Springboot3+vue3实现增删改查、分页查询、批量删除（上）",10827,1519,"2025-02-22 15:09:19",{"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},774,"YKEHfsPd","06. Springboot3+vue3实现增删改查、分页查询、批量删除（下）",7760,1520,"2025-02-22 22:00:02",{"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},775,"sNDKpWVJ","07. Springboot3+Vue3实现excel批量导入导出",6552,1521,"2025-02-23 10:49:24",{"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},776,"1uMP9O6C","08. Springboot3+vue3实现登录注册功能",7964,1522,"2025-02-23 18:14:13",{"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},777,"WahvQp1v","09. Springboot3+vue3实现JWT登录鉴权",7151,1523,"2025-02-23 21:58:00",{"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},778,"QFFAqZh1","10. Springboot3+vue3实现文件上传和下载",6171,1524,"2025-02-24 14:16:27",{"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},1278,"S2eL2g5L","11. Springboot3+vue3实现个人中心、修改密码",5945,1525,"2025-02-24 18:10:59",{"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},1279,"LkN8Mmsn","12. Springboot3+Vue3实现系统公告功能",4967,1526,"2025-02-25 11:50:13",{"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},1280,"i7wziuEN","13. Springboot3+Vue3实现角色权限控制",4446,1527,"2025-02-25 11:51:38",{"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},1281,"pGwiTCRn","14. Springboot3+Vue3实现富文本编辑器功能",4578,1528,"2025-02-26 16:04:58",{"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},1282,"tZ8iDql5","15. Springboot3+Vue3实现模块之间的关联",4454,1529,"2025-02-26 18:28:55",{"id":128,"uuid":129,"project_id":6,"title":130,"type":9,"status":10,"public_enabled":10,"views":131,"sort":132,"created_at":133,"updated_at":14,"project_title":15,"project_slug":16},1283,"gb01JPC2","16. Springboot3+Vue3实现echarts数据统计",4307,1530,"2025-03-03 16:58:21",{"id":135,"uuid":136,"project_id":6,"title":137,"type":9,"status":10,"public_enabled":10,"views":138,"sort":139,"created_at":140,"updated_at":14,"project_title":15,"project_slug":16},1284,"59bDkSFf","17. Springboot3+Vue3实现提交审核业务功能",3793,1531,"2025-03-04 11:58:16",{"id":142,"uuid":143,"project_id":6,"title":144,"type":9,"status":10,"public_enabled":10,"views":145,"sort":146,"created_at":147,"updated_at":14,"project_title":15,"project_slug":16},1285,"gApyb58X","18. Springboot3+Vue3实现预约审核业务功能",3332,1532,"2025-03-05 20:07:24",{"id":149,"uuid":150,"project_id":6,"title":151,"type":9,"status":10,"public_enabled":10,"views":152,"sort":153,"created_at":154,"updated_at":14,"project_title":15,"project_slug":16},1286,"XfpY5re0","19. Springboot3+Vue3实现前台首页的设计",3508,1533,"2025-03-05 20:08:12",{"id":156,"uuid":157,"project_id":6,"title":158,"type":9,"status":10,"public_enabled":10,"views":159,"sort":160,"created_at":161,"updated_at":14,"project_title":15,"project_slug":16},1287,"BnSPRBOc","20. Springboot3+Vue3实现前台轮播图和详情页的设计",4062,1534,"2025-03-17 17:13:36"]