首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >maven+springboot+npm+vue 创建项目

maven+springboot+npm+vue 创建项目

作者头像
用户11690639
发布2026-06-17 21:39:34
发布2026-06-17 21:39:34
1570
举报

本文是一个项目下多个模块,创建父模块,然后创建子模块。eg:项目名为demo,创建模块supervisor为父模块,其下包括两个子模块supervisor-api(springboot项目)、supervisor-web(npm项目)

  • 选中项目,选择File->New Module->Maven,next后填入group和artifactId后finish
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
  • 父模块的pom.xml如下所示:
代码语言:javascript
复制
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <packaging>pom</packaging>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.3.RELEASE</version>
    </parent>

    <groupId>com.zhanglu.demo</groupId>
    <artifactId>supervisor</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <modules>
        <module>supervisor-api</module>
        <module>supervisor-web</module>
    </modules>
   
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

注:1.由于子模块需要用到springboot,所以父模块中prarent需要引入springboot,子模块的parent指向父模块 2.子模块如果需要继承父模块中的dependency,父模块中的依赖需要括中dependencyManagement中 3.父子模块的关系是在pom.xml中体现的,父pom中需要在modules中引入module(子模块的artifactId名),子POM需要在parent中指定父模块的group及artifactId

1 创建springboot模块
  • 创建子模块supervisor-api(springboot)有两种方法,第一可以直接通过idea中的File->New Module->Spring Initializr创建,next->输入group和artifact,其中Type中选择Maven POM,即通过Maven pom Generate,然后选中需要用到的spring其它模块finsh即可,也可以通过https://start.spring.io直接gernerator。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
  • 子模块的pom.xml如下所示:
代码语言:javascript
复制
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <parent>
        <groupId>com.zhanglu.demo</groupId>
        <artifactId>supervisor</artifactId>
        <version>0.0.1-SNAPSHOT</version>
    </parent>

    <groupId>com.zhanglu.demo</groupId>
    <artifactId>supervisor-api</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>supervisor-api</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
        </dependency>
		<dependency>
		   <groupId>org.springframework.boot</groupId>
		   <artifactId>spring-boot-starter-web</artifactId>
		</dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-mongodb</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

注:如果pom中不配置web的依赖,springboot正常启动后会退出,报出Process finished with exit code 0。填 加web的依赖后,会默认其用web容器启动,就不会再退出了。

2.npm 创建web模块
  • 首先需要安装node环境,从nodejs.org中下载nodejs(自行百度),安装成功后可用node -v 和 npm -v 查看版本信息 node会自带npm,也可以通过命令npm install -g npm对npm的版本升级。(在接下来的使用中,如果npm慢的话,可百度使用taobao镜像npm install -g cnpm --registry=https://registry.npm.taobao.org)
  • 全局安装vue-cli :npm install vue-cli -g (可用vue list查看vue-cli是否安装成功)
  • 进入项目路径supervisor,通过命令vue init webpack 项目名。eg:vue init webpack supervisor-web,据说红框中如果不选no的话,后面编写项目时会有很多警告,请酌情选择。
在这里插入图片描述
在这里插入图片描述
  • 然后执行npm install来安装依赖
在这里插入图片描述
在这里插入图片描述
  • 运行项目npm run dev
在这里插入图片描述
在这里插入图片描述
  • 如果可以访问到了vue的页面即成功了
在这里插入图片描述
在这里插入图片描述
  • npm run build:然后此时你会发现项目下多了一个 dist 文件夹,dist下文件便是项目打包之后生成的文件
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2026-06-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1 创建springboot模块
  • 2.npm 创建web模块
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档