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

  • 选中项目,选择File->New Module->Maven,next后填入group和artifactId后finish
    在这里插入图片描述
    在这里插入图片描述
  • 父模块的pom.xml如下所示:
<?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如下所示:
<?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下文件便是项目打包之后生成的文件

Logo

前往低代码交流专区

更多推荐