首页 > 其他分享 >在 JeecgBoot 项目中基于 Vue 3 配置多页面入口

在 JeecgBoot 项目中基于 Vue 3 配置多页面入口

时间:2024-07-16 15:59:11浏览次数:13  
标签:Vue ts html JeecgBoot home 页面

在现代 Web 开发中,使用 Vue 框架构建项目已经成为一种常见的选择。而 JeecgBoot 作为一个优秀的后台管理系统框架,也提供了丰富的功能和组件,方便开发人员快速搭建企业级应用。本文将介绍如何在 JeecgBoot 项目中基于 Vue 3 配置多页面入口,实现更灵活的页面管理和定制化需求。

前提

首先,确保您已经下载好 JeecgBoot 的 Vue 3 的前端项目。

源码地址:https://github.com/jeecgboot/JeecgBoot

前端 vue3 配置项目多页面入口

1. 项目根目录新建 home.html

image

<!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 文件

image

<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',
          },
        },
      },
    ],
  });

image

效果:

image

标签:Vue,ts,html,JeecgBoot,home,页面
From: https://www.cnblogs.com/jeecg158/p/18305434

相关文章

  • Vue3新特性defineOptions和defineModel 面试总结
    在Vue3中,defineOptions和defineModel是两个重要的新特性,它们分别在组件定义和v-model双向绑定方面提供了更为便捷和高效的解决方案。defineOptions定义与用途:defineOptions是Vue3.3+版本中引入的一个宏(macro),用于在<scriptsetup>语法糖中定义组件的选项,如组件名(name)、透传属......
  • vue2 简洁的行政区划选择组件封装
     vue2简洁的行政区划选择组件封装//判断变量是否为null或undefinedexportfunctionisNullOrEmpty(value){ returnvalue===null||value===undefined||value===''}//判断变量是否为null或undefinedexportfunctionisNullOrUndefined(value){ ret......
  • vue3+element-plus+typescript
    1.vue3+ts+elementui-plushttps://blog.csdn.net/qq_41737571/article/details/1390730852.自动调整font-size大小https://blog.csdn.net/qq_41737571/article/details/1401586143.简单小众电商购物项目模板:基于Vue3和Vant4的纯前端开发方案https://web-hls.blog.csdn.......
  • 2024-07-16 记录vue内置组件(ps:内容来自GPT)
    1. Transition和TransitionGroup用途:用于为单个元素或组件提供过渡效果。TransitionGroup则用于列表中的多个元素或组件的过渡效果。特点:Transition:只影响单个元素或组件,不会额外渲染DOM元素。TransitionGroup:渲染一个真实的DOM元素(默认为<span>),可以通过tag属性改变渲染......
  • Vue2的计算属性
    计算属性概念:基于现有的数据进行计算出新的数据。依赖的数据变化,自动重新计算。语法:声明在computed配置项中,一个计算属性对应的是一个函数使用起来跟普通属性一样{{计算属性名}} <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><meta......
  • vue3中如何使用vuex
    在Vue3中,可以使用Vuex来进行状态管理。下面是在Vue3中使用Vuex的步骤:安装Vuex:使用npm或yarn命令行工具安装Vuex库。npminstallvuex创建Vuexstore:在src文件夹中创建一个store文件夹,并在其中创建一个index.js文件。在index.js文件中,引入Vue和Vuex库,创建一个新的Store实......
  • 工程化Vue使用
    目录环境准备Vue项目-创建Vue项目开发流程API风格案例推荐阅读:VUE-局部使用环境准备介绍:create-vue是Vue官方提供的最新的脚手架工具,用于快速生成一个工程化的Vue项目。create-vue提供了如下功能:统一的目录结构本地调试热部署单元测试集成打包依赖环境:N......
  • 组态软件之万维组态介绍(web组态、html组态、vue2/vue3组态、组态软件、组态编辑器)
     一、什么是组态软件组态软件是一种用于创建、配置和管理监控和控制系统的软件工具。组态是指不需要编写计算机程序、通过配置的方式完成工业应用开发的系统。它们通常用于工业自动化领域,用于实时监视和控制工业过程。组态软件提供了丰富的功能和工具,使用户能够创建用户界......
  • React+TS前台项目实战(三十)-- 首页构建之基于react-query和性能hook实现全页面数据渲染
    文章目录前言一、效果展示二、首页源码+详细注释说明+技术分析1.页面功能分析2.代码+详细注释总结前言前三篇文章详细介绍了首页的响应式布局,采用关注点分离进行模块拆解,现在只需按需引入模块,页面更加简洁,代码的维护性得到提升。今天将进入首页的收尾阶段,即完成......
  • 基于Java+SpringBoot+Vue的创新创业教育中心项目申报管理系统的设计与开发(源码+lw+部
    文章目录前言项目背景介绍技术栈后端框架SpringBoot前端框架Vue数据库MySQL(MyStructuredQueryLanguage)具体实现截图详细视频演示系统测试系统测试目的系统功能测试系统测试结论代码参考数据库参考源码获取前言......