如果您想从0到1开始搭建自己的项目，可以选择这种最基础的模版进行构建，以下是对模板进行讲解

项目简介

本文主要讲解 项目未来发展 、开发中遇到的问题

🎉 该模板以 vue3 + ts + ElementPlus 为主 , 为 yf-vue-admin 的基础模板 , 可用来编写前台或后台页面。 目前提供主题配置，动画配置，界面配置 🎉

在线访问地址

gitee源码地址

项目首页截图

1. PC 端

1. 平板

   

2. 移动端

项目配置截图

项目未来发展

🎉 由于很多小伙伴都想学习开源项目，但是在看项目的时候会有以下疑问 : 1 、不明白为什么会这样写?     2、什么时候可以这样?     3、 这个地方写的什么? 为了解决这个问题，我会在编写完成后录制视频讲解这个开源项目以及大家感兴趣的开源项目( 保证不收费 , 纯个人爱好 )

🎉 以下功能未开源，预计在页面基础模块完成后开源 🎉 正在持续更新项目中 , 后台采用 SpringBoot17 进行编写 ， 后续会更新更多功能

筹划功能 ：

1. 登录功能 （ 部分完成 , 进行中 ... ） :

   • 设计模式采用 ： 简单工厂模式 、模版方法模式、责任链模式
   • 功能 ： 第三方登录( 目前整合gitee、github ) ，数据权限， 统一 token 颁发 ， 一个号只能一个设备登录，刷新 token , 邮箱登录 , 手机号登录

2. 分布式多规则限流 （ √ 已完成 , 优化中 ... ） :

   • 功能 ：对于 ip、userid、方法等进行多种规则限流 ， 是否对参数限流待考虑
   • 不采用 Sentinel

3. 分布式 websocket（√ 已完成 ，优化中 ...）:

   • 功能 : 部署在不同机器的 socket 也可以进行通讯，主要用于系统消息通知

4. 文件上传、图片修剪、视频剪辑（ 部分完成 , 进行中 ... ）:

   • 功能 : 普通上传、大文件上传、多个平台选择上传 （目前支持本地、阿里云、七牛云）

5. Spring AI ( 部分完成 , 进行中 ... ) :

   • 功能 : 结合 ChatGPT 、ollama 进行 AI 聊天 ， 图片生成

6. 代码生成器 ( 未完成 , 进行中 ... ) :

   • 功能 : 通过 FreeMarker 生成前后端代码

7. excel导入导出 ( √ 已完成 ) :

   • 设计模式采用 : 策略模式

   • 功能 : excel 导入导出

8. 其他小功能

   • OCR : 图片识别文字 (已完成)
   • 文件上传 : 鉴别黄色暴力 （TensorFlow + NSFW ,已完成）
   • 阿里云支付 : （ 附带秒杀 , 已完成 ）
   • 数据脱敏 : (已完成)
   • 系统日志 : (已完成)
   • 协同过滤推荐算法 : （ 进行中 ... , 采用 TensorFlow ，后续可能会用到 Word2Vec ，目前未解决‘冷启动问题’）
   • 等等 ...

目前模版项目中遇到的问题 ↓↓↓

keep-alive 不缓存问题

1. 目录结构

    | keepAliveTest                 ( 目录 )
    | | index.vue                   ( 文件 )
    | home                          ( 目录 )
    | | index.vue                   ( 文件 )

1. AppMain 组件

    <!-- 假设为 cachedViews=['Home','KeepAliveTest'] -->
    <keep-alive :include="cachedViews">
        <component :is="Component" :key="route.path"/>  
    </keep-alive>

1. 出现问题 : 未缓存

   • 版本 vue3.2 并且使用了"setup" 无需手动添加name，name 会自动根据文件名生成
   • 目前生成的 name 为 index ， 所以未加载

2. 解决方案 , 采用 defineOptions

defineOptions({  
name: "需要缓存的组件名",  
inheritAttrs: false,      // 存入组件的参数，是否在 html 页面展示
});

el-scorll 被 el-affix 压住

项目中前期使用，后期抛弃

错误代码复现地址 : 地址

水印被 el-affix 压住问题

项目中前期使用，后期抛弃了 el-affix

z-index 低于 el-affix

   <!-- 开启水印 z-index > el-affix(z-index = 100) 即可 :locale="'zh-cn'" -->  
    <el-watermark  
        v-if="watermarkEnabled"  
        :z-index="101"  
        :font="{ color: fontColor }"  
        :content="defaultSettings.title"  
    >  
        <router-view/>  
    </el-watermark>  
    <!-- 关闭水印 -->  
    <router-view v-else/>

数据拷贝问题

浅拷贝导致拷贝的数据位复制对象的引用

    app: {...defaultSettings.app},  
    // 解决浅拷贝对象指向同一地址问题  
    settings: _.cloneDeep(defaultSettings.settings)

部署问题

路由采用 createWebHashHistory 方式 :

• 本地可直接访问
• 会携带 #

比较简单不会有什么问题，本地也可以访问，不做讲解，只做对比

路由采用 createWebHistory 方式 :

• 本地不可直接访问
• 不会携带 #

1. 需要 nginx 部署 ， 具体配置如下 :

        location / {
            root /www/server/nginx/html/dist/;
            index index.html index.htm;
            try_files $uri $uri/ /index.html; # 尝试匹配文件，否则重定向到 index.html
        }

2. 我部署时看了一下网上的错误文章，请大家不要出现这样的错误

vue.config.js

    module.exports = { 
        //根目录 
        publicPath: './', 
    };

以上这样是错误的，如果按照以上这样配置，部署之后会导致在多级路由下访问错误

正确路径演示

    http://ip:host/xx    ====> 访问资源配置为 /  则访问    /css/index.DIJBD2Q0.css
    http://ip:host/xx    ====> 访问资源配置为 ./ 则访问    /css/index.DIJBD2Q0.css

错误路径演示

    http://ip:host/xx/xx    ====> 访问资源配置为 /  则访问    /css/index.DIJBD2Q0.css
    http://ip:host/xx/xx    ====> 访问资源配置为 ./ 则访问    /xx/css/index.DIJBD2Q0.css

本人菜鸡一枚，如果有写的不好请见谅。对于目前项目中遇到的问题其实很多，但是在写文章的时候又感觉自己遇到的问题都不算是问题，所以挑出几个粗略讲解了一下 后端大部分已经开发，就是本人前端水平一般开发比较慢，平常也有一些其他事，望体谅 项目聊天群 →→→ 在 gitee源码地址 中查看