SpringBoot+Vue3第一章 搭建项目

一、使用Maven搭建SpringBoot项目

打开IDEA,  创建项目     

选择maven创建项目,JDK1.8,Maven3.5.3

设置项目的名称、项目存放的地址

一个干净的Maven项目就创建好了。

如果项目要使用SpringBoot作为开发,那么必定少不了SpringBoot相关的依赖包

<?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>

    <groupId>cn.mshanqs</groupId>
    <artifactId>SpringProject-demo</artifactId>
    <version>1.0</version>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>

    <parent>
        <artifactId>spring-boot-starter-parent</artifactId>
        <groupId>org.springframework.boot</groupId>
        <version>2.5.10</version>
    </parent>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <exclusions>
                <exclusion>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-tomcat</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-undertow</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
        </dependency>
    </dependencies>


</project>

引入了Springboot相关的依赖包之后,SpringBoot项目就完成了一半了,现在就是写SpringBoot的入口函数了,在src/main/java目录下 创建一个名为SpringProjectApplication.java的文件。按照以下的代码进行一个入口函数的编写

package cn.mshangqs;


import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringProjectApplication {


    public static void main(String[] args) {
        SpringApplication.run(SpringProjectApplication.class,args);
    }

}

      以上步骤,一个SpringBoot的项目搭建基本就算完成了。

二、使用vue-cil搭建Vue3项目

创建VUE项目,需要使用nodejs和npm或者yarn

本人使用的node 版本为 16.15.0

npm版本为 8.5.5

 项目存放的地址根据自己来,我把项目的地址放到了我电脑的D:\codeDemo\demo里面

使用vitejs快速创建一个vue项目

按下键盘的上下建进行选择创建的项目

 随后选择是使用js还是ts作为开发的一个技术中  这里选择ts作为一个技术栈

项目创建完成,现在进行一个相关依赖的下载

 

 下载相关的依赖

npm install --save

 

 

 

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
以下是使用 Maven 搭建 Spring Boot + Vue3 项目的步骤: 1. 创建一个 Maven 项目 在你的 IDE 中创建一个 Maven 项目,可以选择使用 Spring Initializr 快速生成一个 Spring Boot 项目骨架。 2. 添加 Spring Boot 依赖 在 pom.xml 文件中添加 Spring Boot 的依赖,例如: ``` <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> ``` 3. 添加 Vue3 依赖 在 pom.xml 中添加 Vue3 的依赖,例如: ``` <dependency> <groupId>org.webjars.npm</groupId> <artifactId>vue@3.0.0</artifactId> <version>3.0.0</version> </dependency> ``` 注意:这里使用了 WebJars,需要在项目中添加 WebJars 的依赖。 4. 配置 Maven 插件 在 pom.xml 文件中配置 Maven 插件,用于编译 Vue3 代码。例如: ``` <build> <plugins> <plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>1.10.0</version> <executions> <execution> <id>install node and npm</id> <goals> <goal>install-node-and-npm</goal> </goals> <configuration> <nodeVersion>v12.16.2</nodeVersion> <npmVersion>6.14.4</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> </plugins> </build> ``` 这里使用了 frontend-maven-plugin 插件来编译 Vue3 代码。 5. 创建 Vue3 项目项目根目录下创建一个名为 vue 的文件夹,用于存放 Vue3 项目代码。 在 vue 文件夹下执行以下命令,创建一个 Vue3 项目: ``` vue create . ``` 这里使用了点号(.)表示当前目录。 6. 配置 Vue3 项目vue 文件夹下创建一个 vue.config.js 文件,用于配置 Vue3 项目。例如: ``` module.exports = { outputDir: "../src/main/resources/static", indexPath: "../static/index.html", devServer: { proxy: { "/api": { target: "http://localhost:8080" } } } } ``` 这里将 Vue3 项目的输出目录设置为 src/main/resources/static,将 Vue3 项目的入口文件设置为 static/index.html,并配置了代理,将所有以 /api 开头的请求转发到 http://localhost:8080。 7. 编译项目项目根目录下执行以下命令,编译项目: ``` mvn clean install ``` 这里会自动编译 Vue3 项目,并将编译后的代码打包到 jar 包中。 8. 运行项目 在 target 目录下找到生成的 jar 包,执行以下命令,运行项目: ``` java -jar your-project.jar ``` 这里需要将 your-project.jar 替换为实际的 jar 包名称。 9. 访问应用 在浏览器中访问 http://localhost:8080,即可看到运行的应用。 以上就是使用 Maven 搭建 Spring Boot + Vue3 项目的步骤,希望对你有所帮助!
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

菜鸟学习JAVA开发

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值