jeecg-boot 前端Vue项目的入口流程

最新推荐文章于 2025-05-21 18:42:42 发布
原创 最新推荐文章于 2025-05-21 18:42:42 发布 · 1w 阅读 · 45 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

该博客主要介绍了Vue项目的路由配置与渲染路径。入口文件为public目录下的index.html，main.js引入App.vue并渲染到index.html。App.vue通过router-view标签引入路由内容，index.js设置全局路由，参数配置在router.config.js，还解析了其内容及展示了效果。

jeecg-boot 前端Vue项目的入口流程

1、路径： index.html → main.js → app.vue → index.js → components/组件

2、入口文件 public目录下的index.html文件

在这里插入图片描述

3、main.js文件引入App.vue文件，渲染到index.html中

在这里插入图片描述

4、App.vue文件中主要的是router-view标签，这里的内容其实是通过路由引入进来的，router-view的内容是在index.js，请看第5点中的截图

在这里插入图片描述

5、index.js中设置一个全局的路由，参数配置是在router.config.js文件中

在这里插入图片描述

6、router.config内容解析，UserLayout.vue的router-view标签呈现什么内容在router.config的children属性中设置好了，如果浏览器访问的是localhost://8080/user/login，则是把Login.vue嵌入到UserLayout.vue，效果如第7点的截图。

在这里插入图片描述
在这里插入图片描述

7、效果展示

在这里插入图片描述
在这里插入图片描述

vue项目打包上线（含jeecg-boot）
不懂一休
05-17 1万+
文章目录一、安装服务端生成包1、全局安装express2、全局安装 express-generator二、生成项目架构1、生成项目2、项目目录3、启动运行三、打包上线1、删除无用文件2、将打包的 dict 目录下所有文件放入 public 目录3、使用 http-proxy-middleware代理中间件实现多重跨域1、安装中间件2、app.js 配置6、运行测试四问题 上一篇文章讲了开发环境的多重跨域问题 [多重跨域]，下面讲讲生产环境多重跨域问题(https://blog.csdn.net/qq_415
jeecgboot项目前端vue3.0项目BasicTable组件实现父子组件之间的关联， jeecgboot项目前端uni-app前端下程序项目打包
chengcheng9876的博客
04-25 885
jeecgboot项目前端vue3.0项目BasicTable组件实现父子组件之间的关联， jeecgboot项目前端uni-app前端下程序项目打包
在 JeecgBoot 项目中基于 Vue 3 配置多页面入口
weixin_42009803的博客
07-18 235
在现代 Web 开发中，使用 Vue 框架构建项目已经成为一种常见的选择。而 JeecgBoot 作为一个优秀的后台管理系统框架，也提供了丰富的功能和组件，方便开发人员快速搭建企业级应用。本文将介绍如何在 JeecgBoot 项目中基于 Vue 3 配置多页面入口，实现更灵活的页面管理和定制化需求。 前提 首先，确保您已经...
APP管理平台--前端篇，项目入口和路由（一）
Krisez的博客
02-25 1232
文章目录准备开发UI框架路由BrowerRouterHashRouter入口End 准备 在npx create-react-app project-name后，可以直接运行，但是是最基础的一个类似于Hello World的存在。还需要自己的润色，那么就从icon开始吧，直接进入iconfont找素材了。感恩~ 修改项目文件，只留下对应的index.js和App.js，一个是作为项目入口，一个用于路由配置（React项目是单页面项目，所以需要配置路由处理多页面情况） 开发 项目准备好后就得进入正式的敲代
vue项目运行入口
Seven71111的博客
11-15 6752
首先是跑前端项目，输入指令： npm install npm run dev/npm run start 命令对应的执行配置： webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 当在命令窗口输入npm run dev时，编译器会去查找build目录下的webpack.dev.con...
前端项目网址
weixin_38441551的博客
09-05 187
192.168.2.121:39080/pty
0.3、Vue-入口文件的简单介绍：Vue对象、路由、单文件组件
༺ bestcxx的专栏 ༻
02-18 4647
文章目录一图胜千言详解入口文件 main.jselrouter举例单文件组件开启 Router 渲染componentstemplate单文件组件单文件组件内容结构举例使用 一图胜千言 详解 入口文件 main.js 声明了 Vue、Router 插件的声明； 声明了指定单文件组件的引用； 声明一个新的Vue对象。 import Vue from 'vue' import App from './App' import router from './router' Vue.config.producti
vue-cli 构建打包优化（JeecgBoot-Vue2 配置优化篇）
最新发布
这个人很懒~
05-21 583
摘要： 针对jeecgboot-Vue2项目的Webpack打包优化，通过多项措施将首次打包时间缩短至2分30秒，二次构建仅需25秒。关键优化包括： CDN引入外部依赖，减少构建体积； 持久化缓存（filesystem类型）提升二次构建效率； 多线程构建（thread-loader）利用多核CPU加速； 资源压缩（Terser、CSS Minimizer、图片压缩）； 移除prefetch及Moment.js冗余语言包。配置中新增缓存策略、CDN自动注入、压缩插件集成，并在生产环境移除console，显著提
jeecgBoot-master.zip，JeecgBoot的Vue3版本的前后端源码
01-03
本次分享的JeecgBoot-master.zip包含了Vue3版本的前后端源码，这表明其将前端框架升级到了最新的Vue3，Vue3相比于Vue2带来了性能优化、功能增强以及更现代化的开发体验。例如，Vue3引入了Composition API，这是一种...
jeecg-boot集成工作流(官方画布）
热门推荐
xiaonanshidai123的博客
09-23 1万+
2.yml修改 application-dev.yml 3.修改启动类（JeecgApplication.java） 4.启动后端项目后查看工作流表是否生成 5.所需库表创建（库表创建sql文件夹下有对应的sql文件） act_expression 流程表达式 act_listener 流程监听 act_model_xml 流程模块相关 act_leave 请假demo 相关 bpmn_model_relation 流程业务关联 base_check_record 流程审核记录（可自己封装） act
jeecgboot-vue3 路由学习分享
m0_55954924的博客
03-22 3030
jeecgboot vue3 路由
启动jeecg-boot框架（vue3版本）
cai_4的博客
01-11 7898
JeecgBoot 是一款基于代码生成器的`低代码开发平台`！前后端分离架构
JeecgBoot 前端 vue3 项目，配置项目多页面入口
JEECG官方博客
07-12 891
前端 vue3 项目vite架构，如何配置项目多页面入口
jeecg前端页面对应的文件路径
winsomeWin的博客
01-06 1145
2、src\components\layouts\TabLayout.vue 这个文件定义了全局变量title ，反而.env中的VUE_APP_PLATFORM_NAME 全局搜索了都找不到有引用的地方，我试过了，要在data中定义一个属性赋值给该属性再使用双括号才能成功引用，否则会报错process未被定义。3、src\components\page\GlobalHeader.vue 上面那个组件就是引用了这个组件的，
jeecgboot前端只访问 localhost问题
qq_42672401的博客
02-25 1737
修改两个文件 index.html <!-- 全局配置 --> <script> window._CONFIG = {}; window._CONFIG['domainURL'] = 'http://192.168.124.152:8080/jeecg-boot'; </script> 2. 修改全局配置 只要修改这两个配置文件就行了，理论上需要修改index.js就行了，没试过 ...
企业级低代码平台，JeecgBoot-Vue3版 v1.3.0 版本正式发布
JEECG官方博客
06-27 2475
重大版本发布，全功能趋于稳定健壮。
vue 从后台获取菜单数据，生成菜单
hindsight_qiaoz的博客
05-28 1637
备注：getMenu(后台数据接口)，toTree（数据格式转换）如此配置，保证打开的菜单，出现在右侧菜单位置,演示效果如下。调用后台接口，获取菜单数据，为前端菜单变量赋值，为使配置生效，在index中引入menu。本文只是粗浅用法，仅供参考。1.创建菜单所在页面(
JEECG-BOOT-前端项目-路由菜单动态生成
qq_42829835的博客
01-13 5796
JEECG-BOOT-前端项目-路由菜单动态生成 前端入口文件调用情况讲解 index.html → main.js → permission.js →/store/modules/user.js → /utils/util.js permission.js中对于用户权限数据的获取 permission.js中对于前端路由菜单的生成 一、介绍详解： index.html → main.js ...
前端工程化之：webpack1-7(入口和出口)
m0_60189088的博客
01-29 1640
出口：这里的出口是针对资源列表的文件名或路径的配置。出口通过 output 进行配置。 入口：入口真正配置的是 chunk。入口通过 entry 进行配置。
jeecg-boot vue2集成watermark实现页面添加水印
11-01
Jeecg-Boot是一个基于Spring Boot的企业级快速开发平台，它结合了Java技术和前端Vue.js框架。如果你想要在Jeecg-Boot项目中集成Vue2，并实现页面添加水印功能，你可以按照以下步骤操作： 1. **引入依赖**： 首先，在你的前端项目的`main.js`或相关的入口文件中，引入Vue-Watermark这个插件，它可以帮助你在Vue组件上添加图片水印。 ```javascript import Watermark from 'vue-watermark'; Vue.use(Watermark); ``` 2. **创建组件**： 创建一个新的Vue组件，例如`WatermarkedImage.vue`，然后在模板里使用`<watermark>`标签插入带有水印的图片。这里假设水印图片是`watermark.png`。 ```html <template> <div> <img :src="imageSrc" :watermark-src="'watermark.png'" /> </div> </template> <script> export default { data() { return { imageSrc: 'your-image-url', // 你的原图URL }; }, }; </script> ``` 3. **使用组件**： 在需要显示水印的地方，如某个列表项或者详情页，将这个`WatermarkedImage`组件渲染进去。 4. **配置水印选项**： 可以通过props或计算属性设置水印的位置、透明度等属性，根据需求自定义效果。 5. **CSS样式**： 可能还需要一些额外的CSS调整来确保水印和内容布局协调。 注意，这只是一个基础示例，实际应用中可能还需要处理懒加载、服务器端图片处理等情况。此外，如果要在Jeecg-Boot的后台管理界面中集成此功能，你可能需要使用服务提供者模式（Provider Mode）或者其他方式将前端组件暴露给后端。
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值