前台项目基础框架之vue前端(vue@3.2.6)
一，一个前台项目的基础框架:
前端地址:
https://gitee.com/liuhongdi/apiweb
后端地址:
https://gitee.com/liuhongdi/apiback
后端框架的介绍请访问:
说明：刘宏缔的架构森林是一个专注架构的博客，
网站：https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/05/28/qian-tai-xiang-mu-ji-chu-kuang-jia-zhi-vue-qian-duan-vue-3/
对应的源码可以访问这里获取： https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明：作者:刘宏缔 邮箱: 371125307@qq.com
二，前端框架apiweb所用到的技术栈
liuhongdi@lhdpc:/data/vue/apiweb$ npm list apiweb@0.1.0 /data/vue/apiweb ├── @vue/cli-plugin-babel@4.5.13 ├── @vue/cli-plugin-eslint@4.5.13 ├── @vue/cli-service@4.5.13 ├── @vue/compiler-sfc@3.2.6 ├── axios@0.21.1 ├── babel-eslint@10.1.0 ├── better-scroll@2.4.2 ├── core-js@3.16.4 ├── element-plus@1.1.0-beta.7 ├── eslint-plugin-vue@7.17.0 ├── eslint@6.8.0 ├── less-loader@7.0.0 ├── less@3.13.1 ├── mitt@3.0.0 ├── nprogress@0.2.0 ├── swiper@6.8.4 ├── vue-router@4.0.11 └── vue@3.2.6
说明：这些第三方库不是必需的，
例如element-plus通常只用于管理后台的前端，
而面向终端用户的前台通常会使用专门设计的ui
所以在实际使用时可以替换掉这些不必要的第三方库
三，前端框架apiweb所实现的功能
1,登录功能
2，需要用户登录时，例如：打开个人中心或购物车等，
检查用户是否登录，如未登录则跳转到登录页面
3, api返回需要登录(401)时，跳转到登录页面
4, 登录后需要能跳转回登录之前的页面
5, 登录后有一些需要做的操作，要完成后再跳转回登录前的页面，
例如：把商品加入购物车
6, 访问api等可能耗时的操作，要出现loading界面，
避免用户反复点击提交表单的按钮等操作
7,包含了轮播图的demo
8,包含了下拉刷新/上拉加载更多的分页demo
说明：这些功能是我们在开发一个前台的前端项目常用到的
四，效果演示
五，查看vue的版本:
liuhongdi@lhdpc:/data/vue/apiweb$ npm list vue apiweb@0.1.0 /data/vue/apiweb ├─┬ @vue/cli-plugin-babel@4.5.13 │ └─┬ @vue/babel-preset-app@4.5.13 │ └── vue@3.2.6 deduped ├─┬ element-plus@1.1.0-beta.7 │ └── vue@3.2.6 deduped ├─┬ vue-router@4.0.11 │ └── vue@3.2.6 deduped └── vue@3.2.6
