maven+springboot+npm+vue 创建项目

本文是一个项目下多个模块，创建父模块，然后创建子模块。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下文件便是项目打包之后生成的文件