学习 Spring Boot(十):集成 Vue 实现前后端分离

前后端分离是降低项目耦合的方式:前端工程师专注于实现前端开发,后端工程师专注于实现后端开发,前后端通过 REST API 进行交互。

Vue

创建 Maven 前端模块 web,使用 Vue Cli 在 web 模块根目录创建 Vue 工程:

vue create vue

之后提示选择默认配置还是手动配置,选择默认即可。

打包

编辑 pom.xml 文件,添加构建配置:

<build>  
    <plugins>
        <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>1.6</version>
            <configuration>
                <workingDirectory>vue</workingDirectory>
                <installDirectory>bin</installDirectory>
            </configuration>
            <executions>
                <execution>
                    <id>install node and npm</id>
                    <goals>
                        <goal>install-node-and-npm</goal>
                    </goals>
                    <configuration>
                        <nodeVersion>${node.version}</nodeVersion>
                        <npmVersion>${npm.version}</npmVersion>
                    </configuration>
                </execution>

                <execution>
                    <id>npm install</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <arguments>install</arguments>
                    </configuration>
                </execution>

                <execution>
                    <id>npm build</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <arguments>run build</arguments>
                    </configuration>
                </execution>
            </executions>
        </plugin>
        <plugin>
            <artifactId>maven-resources-plugin</artifactId>
            <version>3.0.2</version>
            <executions>
                <execution>
                    <id>copy-resources</id>
                    <phase>validate</phase>
                    <goals>
                        <goal>copy-resources</goal>
                    </goals>
                    <configuration>
                        <outputDirectory>${basedir}/target/classes/public</outputDirectory>
                        <nonFilteredFileExtensions>
                            <nonFilteredFileExtension>otf</nonFilteredFileExtension>
                            <nonFilteredFileExtension>eot</nonFilteredFileExtension>
                            <nonFilteredFileExtension>svg</nonFilteredFileExtension>
                            <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
                            <nonFilteredFileExtension>woff</nonFilteredFileExtension>
                            <nonFilteredFileExtension>woff.bak</nonFilteredFileExtension>
                            <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
                        </nonFilteredFileExtensions>
                        <resources>
                            <resource>
                                <directory>${basedir}/vue/dist</directory>
                                <excludes>
                                    <exclude>src/**</exclude>
                                    <exclude>target/**</exclude>
                                    <exclude>pom.xml</exclude>
                                    <exclude>.DS_Store</exclude>
                                </excludes>
                                <filtering>true</filtering>
                            </resource>
                        </resources>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

打包步骤如下:

① 下载 node 和 npm 二进制可执行文件;

② 在 vue 目录下,执行 npm install 命令,安装依赖;

③ 在 vue 目录下,执行 npm run build 命令,构建项目;

④ 拷贝 vue/dist 到 target/classes/public 目录。

编辑后端 server 模块 pom.xml 文件,添加前端 web 模块依赖:

<dependency>  
    <groupId>com.dyingbleed</groupId>
    <artifactId>web</artifactId>
    <version>${project.version}</version>
</dependency>
我来评几句
登录后评论

已发表评论数()

相关站点

热门文章