springboot整合前端环境学习笔记

Node环境准备

1. 安装maven插件

   <plugin>
       <groupId>com.github.eirslett</groupId>
       <artifactId>frontend-maven-plugin</artifactId>
       <version>1.8.0</version>
       <configuration>
           <nodeVersion>v10.16.3</nodeVersion>
       </configuration>
       <executions>
           <execution>
               <id>install-npm</id>
               <goals>
                   <goal>install-node-and-npm</goal>
               </goals>
           </execution>
           <execution>
               <id>npm-install</id>
               <goals>
                   <goal>npm</goal>
               </goals>
           </execution>
           <execution>
               <id>npm-build</id>
               <goals>
                   <goal>npm</goal>
               </goals>
               <configuration>
                   <arguments>run-script build</arguments>
               </configuration>
           </execution>
       </executions>
   </plugin>
   

2. 项目根目录新建npm文件

   #!/bin/sh
   cd $(dirname $0)
   PATH="$PWD/node/":$PATH
   node "node/node_modules/npm/bin/npm-cli.js" "$@"
   

创建业务项目（以angular项目为例）

1. 项目根目录新建ng文件

   #!/bin/sh
   cd $(dirname $0)
   PATH="$PWD/node/":"$PWD":$PATH
   node_modules/@angular/cli/bin/ng "$@"
   

2. git bash进入项目根目录执行命令

   4.1 安装ng命令行工具: ./npm install @angular/[email protected]
   4.2 ng新建一个hello项目: ./ng new hello
   4.3 安装bootstrap和jquery: ./npm install bootstrap@3 jquery --save
   4.3 将hello目录中的文件全部移到项目根目录中
   

3. 修改angular.json中outputPath的输出路径为src/main/resources/static
4. 执行命令编译源码

   ./ng build --watch
   

5. 启动springboot项目