Springboot+Vue管理类小项目结构搭建

创建一个Maven项目，在pom.xml文件中导入Springboot需要的依赖，这部分依赖可以去网上找复制一份，这里也准备了一份比较完整的项目需要的依赖,需要哪个部分的话可以单独使用

        
        
            org.springframework.boot
            spring-boot-starter-web
        
        
        
            mysql
            mysql-connector-java
        
        
        
            org.springframework.boot
            spring-boot-starter-jdbc
        
        
        
            org.springframework.boot
            spring-boot-starter-test
        
        
        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            1.1.1
        
        
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        
        
        
            org.springframework.boot
            spring-boot-devtools
            true
        
        
        
            com.github.pagehelper
            pagehelper-spring-boot-starter
            1.2.5
        
    

新建一个包，这个包自己取名，建好之后，在里面新建一个启动类，用于启动这个项目。

@SpringBootApplication // SpringBoot启动类注解
@MapperScan("cn.itsource.mapper") // 扫描包的路径
public class App {
    public static void main(String[] args) {
        SpringApplication.run(App.class);
    }
}

在resources文件夹中新建一个application.yml配置文件，用于配置项目需要的配置。

#配置数据源
spring:
  datasource:
    username: root
    password: root
    url: jdbc:mysql:///auth
    driver-class-name: com.mysql.jdbc.Driver
#配置mybatis
mybatis:
  type-aliases-package: cn.itsource.domain, cn.itsource.query #配置别名
  mapper-locations: classpath:cn/itsource/mapper/*Mapper.xml #可以省略，约定大于配置
#配置打印的日志
logging:
  level:
    cn:
      itsource: trace
    root: info

上述的两个文件，缺一个都不可以，都会报错，因此需要准备好springboot的启动环境。启动后默认端口是8080，可以在上面的配置文件中对端口进行配置。

首先需要创建一个StaticWeb项目，

打开底部的命令行窗口

输入指令：vue init webpack，初始化一个vue项目，初始化项目的时候会有些简单的命令选择，

E:ideaworkspaceVue-Test>vue init webpack
// 在当前项目路径创建 选择 Y
? Generate project in current directory? Yes 
// 项目名称
? Project name vueproject
// 项目的描述信息
? Project description A Vue.js project
// 作者
? Author westwei
? Vue build standalone
// 安装路由选择 Y，这个一定要选择
? Install vue-router? Yes
// N
? Use ESLint to lint your code? No
// N
? Set up unit tests No
// N
? Setup e2e tests with Nightwatch? No
// 选择npm进行安装
? Should we run `npm install` for you after the project has been created? (recommended) npm

项目初始化的时间会比较久，中途也可能遇到一些问题，可能出现超时的情况，出现这种情况，会报错，有一条信息是说在那个目录里面的.log文件已经有了，

出现这种错误需要将目录找到从node-cache这里删除这个文件夹。然后重新输入初始化项目的命令。

运行vue项目： npm run dev

当输入命令，运行完成之后，在浏览器地址栏中输入这个地址，出现图中的样式，则代表vue项目初始化完成了，就可以进行接下来的编写了。