在 JeecgBoot 项目中基于 Vue 3 配置多页面入口
ccwgpt 2024-10-28 15:02 32 浏览 0 评论
在现代 Web 开发中，使用 Vue 框架构建项目已经成为一种常见的选择。而 JeecgBoot 作为一个优秀的后台管理系统框架，也提供了丰富的功能和组件，方便开发人员快速搭建企业级应用。本文将介绍如何在 JeecgBoot 项目中基于 Vue 3 配置多页面入口，实现更灵活的页面管理和定制化需求。
前提
首先，确保您已经下载好 JeecgBoot 的 Vue 3 的前端项目。
源码地址：https://github.com/jeecgboot/JeecgBoot
前端 vue3 配置项目多页面入口
1. 项目根目录新建 home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= title %></title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
2.src 目录下新建 multiPage/home 目录及 App.vue 和 main.ts 文件
<template>
<div>home 页面</div>
</template>
<script setup lang="ts"></script>
<style scoped>
div {
background-color: red;
color: #fff;
}
</style>
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.mount('#app');
3. 替换 build/vite/plugin/html.ts 中的 htmlPlugin
const htmlPlugin: PluginOption[] = createHtmlPlugin({
minify: isBuild,
pages: [
{
entry: `src/main.ts`,
template: `index.html`,
filename: 'index.html',
injectOptions: {
// 修改模板html的标题
data: {
title: VITE_GLOB_APP_TITLE,
},
// 将app.config.js文件注入到模板html中
tags: isBuild
? [
{
tag: 'script',
attrs: {
src: getAppConfigSrc(),
},
},
]
: [],
},
},
{
entry: `src/multiPage/home/main.ts`,
template: `home.html`,
filename: 'home.html',
injectOptions: {
// 向ejs模板中注入数据
data: {
title: 'home',
},
},
},
],
});
效果：
相关推荐
- 想快速上手Python网络爬虫?这份实战指南你不能错过!
-
以下是关于Python网络爬虫实战的详细指南，涵盖基础知识、常用工具、实战案例及注意事项：一、爬虫基础概念1.什么是网络爬虫？o通过自动化程序从网页上抓取并提取数据的工具。o核心步骤：请求网...
- python爬虫怎么副业接单
-
其实这个问题也挺重要的，花了时间花了经历去学了python爬虫，本想靠着这个技能去补贴家用或者挣点零花钱，但是发现有时候的单子是自己力所不能及的，有的东西真的是不会，又或者不知从何下手。那么这篇文章主...
- 用Python写了一个图像文字识别OCR工具
-
人生苦短，快学Python！在之前的文章里，我们多次尝试用Python实现文本OCR识别！今天我们要搞一个升级版：直接写一个图像文字识别OCR工具！引言最近在技术交流群里聊到一个关于图像文字识别的...
- taskPyro:为 Python 任务与爬虫插上自动化翅膀的开源利器
-
在数据驱动的时代，无论是数据采集、ETL流程，还是定期的系统维护脚本，高效、可靠的任务调度成为了许多开发者和运维人员的刚需。特别是对于Python开发者而言，如何优雅地管理和调度日益增多的爬虫任...
- 网络爬虫:Python动态网页爬虫2种技术方式及示例
-
作者：糖甜甜甜https://mp.weixin.qq.com/s/5Dwh5cbfjpDfm_FRcpw1Ug这一讲，我将会为大家讲解稍微复杂一点的爬虫，即动态网页的爬虫。动态网页技术介绍动态网页爬...
- 30个小时搞定Python网络爬虫(全套详细版)
-
【课程介绍】适用人群1、零基础对Python网络爬虫感兴趣的学员2、想从事Python网络爬虫工程师相关工作的学员3、想学习Python网络爬虫作为技术储备的学员课程目标1、本课程的目标是将大家培养成...
- python爬虫常用工具库总结
-
说起爬虫，大家可能第一时间想到的是python，今天就简单为大家介绍下pyhton常用的一些库。请求库：实现基础Http操作urllib:python内置基本库，实现了一系列用于操作url的功能。...
- 玛森:Python爬虫书籍推荐
-
Python爬虫书籍推荐什么?玛森科技徐老师介绍，网络爬虫现在很火，不管业内人士或业外人士，大家对爬虫或多或少都有一些了解，网络爬虫通俗的讲，就是通过程序去互联网上面爬取想要的内容，并且爬取的过程...
- 如何入门python爬虫?
-
1.很多人一上来就要爬虫，其实没有弄明白要用爬虫做什么，最后学完了却用不上。大多数人其实是不需要去学习爬虫的，因为工作所在的公司里有自己的数据库，里面就有数据来帮助你完成业务分析。什么时候要用到爬虫呢...
- 爬虫修炼手册，Python爬虫学习入门Scrapy
-
爬虫就如同江湖中的神秘侠客，应运而生，成为了我们获取数据的得力助手。爬虫，正式名称是网络爬虫（WebCrawler），也被叫做网页蜘蛛、网络机器人，它是一段神奇的计算机代码，能够自动在互联网的信息...
- 如何入门 Python 爬虫?
-
1.很多人一上来就要爬虫，其实没有弄明白要用爬虫做什么，最后学完了却用不上。大多数人其实是不需要去学习爬虫的，因为工作所在的公司里有自己的数据库，里面就有数据来帮助你完成业务分析。什么时候要用到爬虫呢...
- 有了这4张思维导图，带你Python(爬虫)轻松入门
-
刚接触Python爬虫，该怎么学更有效？指南君给大家带来了这四张思维导图。非常适合刚开始学Python爬虫的同学用于回顾知识点、巩固学习情况等。话不多说，快来学习Python爬虫入门的最强干货吧！P...
- python爬虫教程之爬取当当网 Top 500 本五星好评书籍
-
我们使用requests和re来写一个爬虫作为一个爱看书的你（说的跟真的似的）怎么能发现好书呢？所以我们爬取当当网的前500本好五星评书籍怎么样？ok接下来就是学习python的正确姿...
- 超实用!Python 在爬虫和自动化领域的 8 类工具与技术大盘点
-
Python在爬虫和自动化领域拥有丰富的工具库和框架，以下是一些常用工具和技术的分类整理，帮助你高效实现数据抓取和自动化任务：1.基础HTTP请求库oRequestso简洁的HTTP库...
- 学习Python的第四天之网络爬虫
-
30岁程序员学习Python的第四天之网络爬虫的Scrapy库Scrapy库的基本信息Scrapy库的安装在windows系统中通过管理员权限打开cmd。运行pipinstallscrapy即可安...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- MVC框架 (46)
- spring框架 (46)
- 框架图 (58)
- bootstrap框架 (43)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- laravel框架 (46)
- express框架 (43)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- grpc框架 (55)
- ppt框架 (48)
- 内联框架 (52)
- winform框架 (46)
- gui框架 (44)
- cad怎么画框架 (58)
- ps怎么画框架 (47)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)
- oracle提交事务 (47)