项目整体架构搭建

项目地址

gitee gitee.com/Duanky_wyj/…

目录结构设计

根目录

quxing-server
quxing-web

技术点

后端
- springboot
- mybatis
- mysql
前端
- vite
- vue3
- sass
- typescript

项目搭建

1.创建父级项目quxing-app

pom.xml

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

<dependencies>  
    <!-- springboot 整合web组件-->  
    <dependency>  
        <groupId>org.springframework.boot</groupId>  
            <artifactId>spring-boot-starter-web</artifactId>  
        </dependency>  
    <dependency>  
        <groupId>org.projectlombok</groupId>  
            <artifactId>lombok</artifactId>  
        <optional>true</optional>  
    </dependency>  
</dependencies>

删除src目录

2.创建子模块

quxing.server

在src/main/java/xxx.xxxx.xxx/中创建后端基本层级

dao(持久层)
entity(实体类)
service(接口服务)
- Impl(实现类)
mapper
Application

创建启动类:

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

创建测试接口: 1: Impl:

public interface HelloService {  
    @GetMapping("/getHello")  
    String Hello();  
}

2: 实现类

@RestController  
public class HelloServiceImpl implements HelloService {  

    @Override  
    public String Hello() {  
        return "Hello world!";  
    }  
}

在子模块resources目录下创建application.yml

server:  
    # 端口
    port:  
        7070  
servlet:  
    # 接口前缀
    context-path: /quxingApi

创建前端模块

yarn create vite
选择vue,ts
进入quxing-web
yarn install

项目依赖安装

yarn add vue-router pinia vant axios
yarn add sass postcss-px-to-viewport unplugin-auto-import unplugin-vue-components -D

postcss-px-to-viewport移动端适配
unplugin-auto-import unplugin-vue-components(自动导入)

配置路由:

创建src/router/index.ts文件
配置路由

import { createRouter, createWebHashHistory, Router, RouterOptions, RouteRecordRaw } from "vue-router";  
  
const routes: RouteRecordRaw[] = [  
    ...路由配置
]  
  
const options: RouterOptions = {  
    history: createWebHashHistory(),  
    routes  
}  
  
const router: Router = createRouter(options);  
  
export default router;

配置Vuex

创建src/pinia/stateStore.ts
配置

import { defineStore } from "pinia";  
  
  
const useStateStore = defineStore("stateStore", () => {  
    return {  

    }  
})  
  
export default useStateStore;

配置postcss

web模块根目录创建postcss.config.cjs
配置

// postcss.config.cjs  
  
const autoprefixer = require('autoprefixer');  
const px2viewport = require('postcss-px-to-viewport-8-plugin');  
  
const basePx2viewport = {  
    unitToConvert: 'px', // 需要转换的单位，默认为 px  
    // viewportWidth: 750, // 设计稿的视口宽度  
    unitPrecision: 3, // 单位转换后保留的精度（很多时候无法整除）  
    propList: [  
        '*',  
    // '!font-size'  
    ], // 能转化为vw的属性列表,!font-size表示font-size后面的单位不会被转换  
    viewportUnit: 'vw', // 指定需要转换成的视口单位，建议使用 vw  
    fontViewportUnit: 'vw', // 字体使用的视口单位  
    // 指定不转换为视口单位的类，可以自定义，可以无限添加，建议定义一至两个通用的类名  
    // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。  
    // 下面配置表示类名中含有'keep-px'以及'.ignore'类都不会被转换  
    selectorBlackList: ['.ignore', 'keep-px'],  
    minPixelValue: 1, // 设置最小的转换数值，这里小于或等于 1px 不转换为视口单位  
    mediaQuery: false, // 媒体查询里的单位是否需要转换单位  
    // exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件  
    // include: [/src/], // 如果设置了include，那将只有匹配到的文件才会被转换  
};  
  
module.exports = {  
    plugins: [  
        autoprefixer(),  
        // vant  
        px2viewport({  
            ...basePx2viewport,  
            viewportWidth: 375,  
            exclude: [/^(?!.*node_modules\/vant)/],  
            // include: [/node_modules\/vant/],  
        }),  
        // 非vant  
        px2viewport({  
            ...basePx2viewport,  
            viewportWidth: 750,  
            exclude: [/node_modules\/vant/],  
        }),  
    ],  
};

配置vite.config.js

import {defineConfig} from 'vite'  
import vue from '@vitejs/plugin-vue'  
import AutoImport from 'unplugin-auto-import/vite';  
import Components from 'unplugin-vue-components/vite';  
import {VantResolver} from 'unplugin-vue-components/resolvers';  
  
// https://vitejs.dev/config/  
export default defineConfig({  
    plugins: [  
        vue(),  
        // 自动导入  
        AutoImport({  
            imports: ['vue', 'vue-router'],  
            // 设置为在src/目录下生成解决ts报错，默认是当前目录('./'，即根目录)  
            dts: 'src/auto-import.d.ts',  
            // 自动生成 eslintrc-auto-import.json 文件，在 .eslintrc.cjs 的 extends 中引入解决报错  
            // vue-global-api 这个插件仅仅解决vue3 hook报错  
            eslintrc: {  
                enabled: true,  
            },  
        }),  
        Components({  
            resolvers: [VantResolver()],  
        }),  
    ],  
})

main.js

import { createApp } from 'vue';  
import { createPinia, Pinia } from "pinia";  
import App from './App.vue';  
import router from './router';  
import "./style.scss";  
  
// 本无需引入,但是如果不进行手动导入一次,代码没有提示  
import 'vant/lib/index.css';  
import { Button } from 'vant';  
  
const pinia: Pinia = createPinia();  
  
createApp(App)  
    .use(Button)  
    .use(router)  
    .use(pinia)  
    .mount('#app');

目录结构

测试

启动Application.java 启动vite 删除不必要的目录

前端12306练手项目