[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-Ni0HTQnR":3,"public-project-articles-Ni0HTQnR":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},1222,"Ni0HTQnR",60,"04. Vue3零基础快速入门实战","vue3 官网：[https:\u002F\u002Fcn.vuejs.org\u002F](https:\u002F\u002Fcn.vuejs.org\u002F)\n\n学习几个基本的标签\n\n+ {{ msg }} \n+ v-if  (v-else)\n+ v-for\n+ v-bind\n+ v-on\n+ v-model\n\n## 搭建脚手架\n\n安装 NodeJS20 版本\n\n[https:\u002F\u002Fnodejs.org\u002Fzh-cn\u002Fdownload](https:\u002F\u002Fnodejs.org\u002Fzh-cn\u002Fdownload)\n\n\u003C!-- 这是一张图片，ocr 内容为：下载NODE.JSR 和 获得适用于 的NODE.JSR 且使用 WINDOWS DOCKER NPM V22.22.0(LTS) 提示 WANT NEW FEATURES SOONER? GET THE LATEST NODEIS VERSION INSTEAD AND AND TRY THE LATESTIMPROVEMENTS DOCKER对每个操作系统都有特定的安装指导. 非DOCL 非 请参考HTTPS:\u002F\u002FDOCKER.COM\u002FGET-STARTED\u002F给出的官方文档 23 4 非 拉取 NODE.JS DOCKER 镜像: 48789  DOCKER PULL NODE:22-ALPINE 非 创建 NODE.JS 容器并启动一个 SHELL 会话: DOCKER RUN -IT --IM --ENTRYPOINT SH NODE:22-ALPINE 非验证NODE.JS 版本: 10 # SHOULD PRINT \"V22.22.0\". 11 NODE 12 13 非验证 NPM 版本: 14 NPM -V # SHOULD PRINT \"10.9.4\". 复制到剪贴板 POWERSHELL DOCKER是一个容器化平台.如果遇到任何问题,请访问DOCKER的网站7 平台的NODEJSR构建. 或者获得适用于 WINDOWS X64 独立文件(.ZIP) WINDOWS安装程序(.MSI) -->\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2026\u002Fpng\u002F751015\u002F1770690356630-6d77c149-39d1-49e5-8ac3-12caae518111.png)\n\n配置淘宝镜像：\n\n```javascript\nnpm config set registry https:\u002F\u002Fregistry.npmmirror.com\n```\n\n## 开始搭建 Vue3 工程\n\n```javascript\nnpm create vue@latest\n```\n\n\u003C!-- 这是一张图片，ocr 内容为：D:\\项目实战\\从0带敲\\SPRINGBOOT-VUE零基础入门教学\\SPRINGBOOT-VUE>NPM CREATE VUEQLATE VUEQLATEST NPX CREATE-VUE VUE.JS - THE PROGRESSIVE JAVASCRIPT FRAMEWORK 请输入项目名称: VUE (个\u002F切换,空格选择,A全选,回车确认) 请选择要包含的功能: ROUTER(单页面应用开发) 选择要包含的试验特性:(个\u002F切换,空格选择,A全选,回车确认) NONE 跳过所有示例代码,创建一个空白的VUE项目? YES 正在初始化项目 D:\\项目实战\\从0带敲\\SPRINGBOOT+VUE零基础入门教学\\SPRINGBOOT-YUE\u002FVUE.. 项目初始化完成,可执行以下命令: CD VUE NPM INSTALL NPM RUN DEV -->\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2026\u002Fpng\u002F751015\u002F1770690443080-f85ad76f-0edc-4c71-aae2-dd313df6dc42.png)\n\n安装运行\n\n```javascript\ncd vue\nnpm install\nnpm run dev\n```\n\n访问：[http:\u002F\u002Flocalhost:5173\u002F](http:\u002F\u002Flocalhost:5173\u002F)\n\n\u003C!-- 这是一张图片，ocr 内容为：YOU DID IT! VISIT VUEJS.ORG TO READ THE DOCUMENTATION -->\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2026\u002Fpng\u002F751015\u002F1770690486972-82df90d4-c8fa-4ca8-b249-8f0a6367272a.png)\n\n卸载 dev-tools\n\n```javascript\nnpm uninstall vite-plugin-vue-devtools\n```\n\n\u003C!-- 这是一张图片，ocr 内容为：SPRINGBOOTAPPLICATION.JAVA VITE.CONFIG.JS INDEX.JS PACKAGE.JSON - FILEURLTOPATH, URL } FROM 'NODE:URL' IMPORT  SPRINGBOOT VUE D:\\项目实战从0带敲\\SPRINGBOOT+VUE .IDEA IMPORT { DEFINECONFIG } FROM 'VITE' SPRINGBOOT 3 STC  VUE FROM '@VITEJS\u002FPLUGIN-VUE' PORT TARGET VUEDEVTOOLS FROM 'VITE-PLUGIN-VUE-DEVTOOLS' IMPORT M POM.XML VUE HTTPS:\u002F\u002FVITE.DEV\u002FCONFIG\u002F NODE MODULES LIBRARY ROOT 8 EXPORT DEFAULT DEFINECONFIG( CONFIG:{ PUBLIC PLUGINS: [ 9 SRC VUE (), 10 ROUTER INDEX JS 11 VUEDEVTOOLS(), APP.VUE MAIN.JS 13 RESOLVE:{ GITIGNORE ALIAS: { 14 INDEX.HTML '@': FILEURLTOPATH(NEW URL('.\u002FSRC', IMPORT.META.URL)) 15 JSCONFIG.JSON 16 PACKAGE.JSON 17 PACKAGE-LOCKJSON 18 VITE.CONFIG.JS EXTERNAL LIBRARIES 19 SCRATCHES AND CONSOLES -->\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2026\u002Fpng\u002F751015\u002F1770690867348-ab230082-e6ee-407e-9d1f-22319c87711c.png)\n\n## 使用 Element-Plus\n\n[https:\u002F\u002Felement-plus.org\u002Fzh-CN\u002Fcomponent\u002Foverview](https:\u002F\u002Felement-plus.org\u002Fzh-CN\u002Fcomponent\u002Foverview)\n\n\n\n安装\n\n```javascript\nnpm install element-plus --save\n```\n\n\n\n```javascript\nimport { createApp } from 'vue'\nimport App from '.\u002FApp.vue'\nimport router from '.\u002Frouter'\nimport ElementPlus from 'element-plus'\nimport 'element-plus\u002Fdist\u002Findex.css'\nimport zhCn from 'element-plus\u002Fes\u002Flocale\u002Flang\u002Fzh-cn'\n\nconst app = createApp(App)\n\napp.use(router).use(ElementPlus, {\n    locale: zhCn,\n})\n\napp.mount('#app')\n```\n\n\n\n## 页面的标准模板\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\n\u003C\u002Fscript>\n```\n\n## 安装图标\n\n```vue\n npm install @element-plus\u002Ficons-vue\n```\n\n```vue\nimport * as ElementPlusIconsVue from '@element-plus\u002Ficons-vue'\n\nconst app = createApp(App)\nfor (const [key, component] of Object.entries(ElementPlusIconsVue)) {\n  app.component(key, component)\n}\n```\n\nmain.js\n\n```vue\nimport { createApp } from 'vue'\nimport App from '.\u002FApp.vue'\nimport router from '.\u002Frouter'\nimport ElementPlus from 'element-plus'\nimport 'element-plus\u002Fdist\u002Findex.css'\nimport zhCn from 'element-plus\u002Fes\u002Flocale\u002Flang\u002Fzh-cn'\nimport '@\u002Fassets\u002Fcss\u002Fglobal.css'\nimport * as ElementPlusIconsVue from '@element-plus\u002Ficons-vue'\n\nconst app = createApp(App)\n\napp.use(router).use(ElementPlus, {\n    locale: zhCn,\n})\n\nfor (const [key, component] of Object.entries(ElementPlusIconsVue)) {\n    app.component(key, component)\n}\n\napp.mount('#app')\n\n\n\n```\n\n消除边框\n\n\u003C!-- 这是一张图片，ocr 内容为： -->\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2026\u002Fpng\u002F751015\u002F1770693149153-4a0b19fd-4f86-4abf-b7aa-9fa869cfc8ed.png)\n\n## Router\n\n```vue\nimport { createRouter, createWebHistory } from 'vue-router'\n\nconst router = createRouter({\n  history: createWebHistory(import.meta.env.BASE_URL),\n  routes: [\n    {\n      path: '\u002Fmanager',\n      component: () => import('@\u002Fviews\u002FManager.vue'),\n      children: [\n        { path: 'home', component: () => import('@\u002Fviews\u002FHome.vue') },\n        { path: 'admin', component: () => import('@\u002Fviews\u002Fmanager\u002FAdmin.vue') },\n      ]\n    }\n  ],\n})\n\nexport default router\n\n```\n\n## 封装 axios\n\n安装 axios\n\n```vue\nnpm install axios\n```\n\n\n\n后端配置跨域\n\n```java\npackage com.example.common;\n\nimport org.springframework.context.annotation.Bean;\nimport org.springframework.context.annotation.Configuration;\nimport org.springframework.web.cors.CorsConfiguration;\nimport org.springframework.web.cors.UrlBasedCorsConfigurationSource;\nimport org.springframework.web.filter.CorsFilter;\n\n\u002F**\n * 跨域配置\n *\u002F\n@Configuration\npublic class CorsConfig {\n\n    @Bean\n    public CorsFilter corsFilter() {\n        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();\n        CorsConfiguration corsConfiguration = new CorsConfiguration();\n        corsConfiguration.addAllowedOrigin(\"*\"); \u002F\u002F 1 设置访问源地址\n        corsConfiguration.addAllowedHeader(\"*\"); \u002F\u002F 2 设置访问源请求头\n        corsConfiguration.addAllowedMethod(\"*\"); \u002F\u002F 3 设置访问源请求方法\n        source.registerCorsConfiguration(\"\u002F**\", corsConfiguration); \u002F\u002F 4 对接口配置跨域设置\n        return new CorsFilter(source);\n    }\n}\n```\n\n\n\n封装的  request.js\n\n```javascript\nimport axios from \"axios\";\n\nconst request = axios.create({\n    baseURL: 'http:\u002F\u002Flocalhost:9090',  \u002F\u002F 配置后端的请求地址\n    timeout: 30000  \u002F\u002F 后台接口超时时间\n})\n\n\u002F\u002F response 拦截器\n\u002F\u002F 可以在接口响应后统一处理结果\nrequest.interceptors.response.use(\n    response => {\n        return response.data;\n    },\n    error => {\n        return Promise.reject(error)\n    }\n)\n\nexport default request\n```\n\n","coding",1,228,2387,"2026-02-10 11:39:21","2026-05-03 22:49:02","2026最新基于SpringBoot4+Vue3零基础入门项目实战教学","springboot4-vue3-tutorial",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,28,35,42],{"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},1219,"zz39u4vv","01. SpringBoot4零基础入门实战",745,2376,"2026-02-05 12:35:53","2026-05-07 15:36:12.649662+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},1220,"mbxrGCSA","02. 学习SpringBoot4+JPA基本的增删改查接口",257,2377,"2026-02-06 12:26:55",{"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},1221,"eQlrBI25","03. 使用代码生成器自动生成后端代码",195,2381,"2026-02-09 11:13:19",{"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}]