基于vue3,vite开发的简约，通用型官方网站&首页模板

ainow
908 阅读7分钟

1. 相关链接

2. 项目概要

  • keywords(全): vue3 | vite | vant | Element Plus | json-server | Axios | Pinia | Vuex | Vue Router | ...
  • 采用vue3,vite开发的通用型官方网站模板,而且还提供了许多小demo,帮助你快速上手vue3工程化开发！
  • 阅读本项目需要一定的基础：
    vue3工程化开发入门1
    ...

3. 项目详情

3.1. 前，后端简述

  • 前端： vue3 | vite | vant | Element Plus | json-server | Axios，Pinia | Vuex | Vue Router | ......
    • 采用 vue3 + vite 工程化，语言基于 html + js + css
    • 库和工具： Vant | Element Plus | layui-vue | json-server | Axios | Pinia | Vuex | Vue Router......
    • 知识点： 样式(scss, less)，组件mixins，vue-router(导航守卫，动态加载路由，权限路由)，状态管理(vuex, pinia(持久化))，网络(Axios，请求/响应拦截器，api模块封装)，消除异步(回调函数，Promise，)，三方库的按需引入，模拟后端接口(json-sever, mock-sever)，通用销抖函数，自定义指令封装(v-loading...)......
    • 知识点-UI： clip-path剪裁任意形状，带偏移且平滑滚动的hash定位，音频可视化，canvas(动画，贝塞尔曲线，), css动效(出场，入场，打字机，文本扫光)
  • 后端：
    • 后端接口还未完工，可先参考 Q免签支付。
    • 库和工具： Hutool-captcha，......
    • 知识点： JWT登录鉴权，

3.2. 前端部分详述

Vant，Element Plus，layui-vue按需引入，及组件推荐

  • Vant4，Element Plus，layui-vue
  • 弹出层：layui-vue弹层
  • 图片(懒加载，预览)：el-image(src不支持path alias)，el-image-viewer
  • 滚动条：默认 > el-scrollbar
    • main content的滚动条使用document的滚动条而非改到main div，否则可能会有一系列问题，如会影响整个document的高度，影响懒加载机制，document的scroll监听失效等问题,
    • 只有局部滚动的时候才开启局部div的滚动条
  • 进度条：顶部进度条nprogress
  • 骨架：el-skeleton
  • 地图：百度地图
  • 文字提示：el-tooltip
  • 打字机动效：vue-typed-js
  • index管理
    • 999 弹出层
    • 90 图片预览
    • 50 mainlayout/navbar
    • 45 悬浮按钮（MusicPlayer）
    • 0 标准流（ 未设置定位，为0，且z-index无效，除非position: relative;）
    • -1 HomeView的Index

Anxios请求/响应拦截器

在请求或响应被 then 或 catch 处理前拦截它们，实现统一处理请求和响应的逻辑，减少代码冗余，提高代码的可维护性和灵活性。

// 添加请求拦截器  
axios.interceptors.request.use(function (config) {  
// 在发送请求之前做些什么  
return config;  
}, function (error) {  
// 对请求错误做些什么  
return Promise.reject(error);  
});  

// 添加响应拦截器  
axios.interceptors.response.use(function (response) {  
// 2xx 范围内的状态码都会触发该函数。  
// 对响应数据做点什么  
return response;  
}, function (error) {  
// 超出 2xx 范围的状态码都会触发该函数。  
// 对响应错误做点什么  
return Promise.reject(error);  
});

Less支持

  • less是一种动态样式表语言，它扩展了 CSS 的功能，增加了变量、嵌套规则、运算等功能。
  • vue工程化，可通过包管理器引入less，less-loader使得在组件样式支持less

组件 Mixins

  • 组件 Mixins 是 Vue.js 中用于复用组件逻辑的一种机制。通过将共享的代码块定义为 mixin，并在多个组件中引入该 mixin，可以避免重复编写相同的逻辑。这有助于减少代码冗余，提高代码的可维护性和复用性。Mixins 可以包含组件选项，如 data、methods、computed 等，使得这些选项能够在多个组件之间共享。

clip-path: polygon div形状剪裁，自定义

//实现缺角矩形div
clip-path: polygon( 0 0,100% 0,100% 100%,70% 100%,0 30%)

VueRouter(导航守卫，动态路由，权限路由...)

  • 导航守卫
    导航守卫是 Vue Router 提供的一种机制，用于在路由发生变化时执行特定的逻辑。通过定义导航守卫，可以在路由进入、离开或更新前后执行一些操作，如权限验证、数据获取、页面跳转/取消跳转等。
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})
  • 动态路由，权限路由
let dynamicRoutesLoaded = false
router.beforeEach(async (to, from, next) => {

    // load dynamic routes at first time
    if (!dynamicRoutesLoaded) {
        // get routes according to user permissions
        const data: MainRouteRecordRaw = await getRoutes()
        // set component
        const routes = setComp([data]);
        // console.log("routes", routes);
        routes.forEach((route) => {
                router.addRoute(route);
        });
        dynamicRoutesLoaded = true
        next({...to, replace: true});
        return
    }

    // other logic
    next()

})

sass升级出现废弃警告

.an-text-1 {
    @include an-text-1;
    color: aqua;
}
/*
上述写法报错
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.
尝试降低sass版本，该Deprecation Warning并没有消失
*/

// 解决方案1，只会生成1个类，但并不能覆盖混入样式中的样式
.an-text-1 {
    color: aqua;
    @include an-text-1;
}

// 解决方案2，会生成2个类，可覆盖混入样式中的样式
// 目前推荐方法
.an-text-1 {
    @include an-text-1;
    &{
        color: aqua;
    }
}
// 还有，这种写法也会出现上述警告
body{
    .an-text-2{
        color:blue;
    }
    color: red;
}
// 解决方案1，
body{
    color: red;
    .an-text-2{
        color:blue;
    }
}
// 解决方案2，每个&{}都会单独生成对应css选择器
body{
    .an-text-2{
        color:blue;
    }
    &{
        color: red;
    }
}

3.2. 前端踩坑

这些坑都会消耗或多或少时间，精力，【笑哭，泪目】

父子组件生命周期执行流程

不要自以为父组件的生命周期先于子组件执行 参考文章-子组件调用父组件的接口回调数据的坑

......

3.3. 后端详述

Hutool-captcha

  • Hutool是一个小而全的Java工具类库，通过静态方法封装，降低相关API的学习成本，提高工作效率，使Java拥有函数式语言般的优雅
  • Hutool-captcha Hutool中加入验证码生成和校验功能
//定义图形验证码的长、宽、验证码字符数、干扰线宽度
ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(200, 100, 4, 4);
//ShearCaptcha captcha = new ShearCaptcha(200, 100, 4, 4);
//图形验证码写出，可以写出到文件，也可以写出到流
captcha.write("d:/shear.png");
//验证图形验证码的有效性，返回boolean值
captcha.verify("1234");

4. 功能，特点，优化

4.1. 功能,效果：

  • MusicPlayer
  • AffixNav
    • 平滑滚动的hash定位，backToTop
  • 全响应式布局(各种分辨率的屏幕都能友好显示)
  • Header组件封装
    • 可切换模式：自动隐藏，总是显示，标题模式
    • 导航高亮，手机适配方案

4.2. 后期完善功能

  • 邮箱验证码登录
  • 图形验证码

4.3. 交互效果

  • 优化——响应速度，性能优化，用户体验，
    • loading 蒙层
    • 静态资源压缩处理
  • 待优化
  • 服务器静态资源缓存策略
# 服务器将负责为这些文件提供适当的 HTTP 头部，包括缓存策略
# `nginx.conf`
location /assets/audio/ {
    expires 30d; # 设置缓存过期时间为30天
    add_header Cache-Control "public, max-age=2592000"; # 与 expires 类似，但更灵活
    # 其他配置...
}

文件名哈希：Vite 默认会为构建后的静态文件（包括 JS、CSS 和其他静态资源）生成基于文件内容的哈希值作为文件名的一部分。这确保了当文件内容发生变化时，其 URL 也会发生变化，从而强制浏览器下载新的文件而不是从缓存中加载。参考：www.sohu.com/a/782311977…

  • 静态资源访问最佳实践
    • 先调用接口获取最新静态资源链接
    • 消费该链接
    • 此方法可轻松实现防盗链，跨项目共享静态资源，缓存更新

4.4. 待探究

  • 为了实现解耦/功能点组合，对统一属性开多个watch，性能消耗情况
    • 建议使用function来组合功能点

5. 简单使用

  • node -v; npm -v; yarn -v;
  • Project Setup
    • yarn install | npm install
  • Compile and Hot-Reload for Development
    • yarn dev | npm run dev
  • Compile and Minify for Production 
    npm run build
npm run preview

6. 常见问题

  • build 打包失败
    • 由于我没把一些demo dir/files 推送到git，所以导致 vite.config.js 中 build.rollupOptions.input配置会导致找不到文件
    • 解决办法：注释掉，例如
      // p1: resolve(__dirname, './pages-demo/sub/index.html'),

已经到文章末尾了，感谢您的阅读！

avatar
文章
阅读
粉丝