maven+springboot+npm+vue 创建项目

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

• 选中项目，选择File->New Module->Maven，next后填入group和artifactId后finish
  
  
• 父模块的pom.xml如下所示：

    4.0.0
    pom
    
        org.springframework.boot
        spring-boot-starter-parent
        2.1.3.RELEASE
    

    com.zhanglu.demo
    supervisor
    0.0.1-SNAPSHOT
    Demo project for Spring Boot

    
        1.8
    

    
        supervisor-api
        supervisor-web
    
   
    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
    

注：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如下所示：

    4.0.0

    
        com.zhanglu.demo
        supervisor
        0.0.1-SNAPSHOT
    

    com.zhanglu.demo
    supervisor-api
    0.0.1-SNAPSHOT
    supervisor-api
    Demo project for Spring Boot

    
        1.8
    

    
        
            org.springframework.boot
            spring-boot-starter
        

        
            org.springframework.boot
            spring-boot-starter-test
        
		
		   org.springframework.boot
		   spring-boot-starter-web
		
        
            org.springframework.boot
            spring-boot-starter-data-mongodb
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
    

注：如果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下文件便是项目打包之后生成的文件