前台项目基础框架之vue前端(vue@3.2.6)
2023-09-14 08:59:32 时间
一,一个前台项目的基础框架:
前端地址:
https://gitee.com/liuhongdi/apiweb
后端地址:
https://gitee.com/liuhongdi/apiback
后端框架的介绍请访问:
https://www.cnblogs.com/architectforest/p/15338336.html
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: 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
相关文章
- Vue专题 05_详解vue生命周期的每个节点
- webpack搭建基础vue项目
- Vue(3)webstorm代码格式规范设置与vue模板配置
- Angular和Vue.js 深度对比
- 这个牛逼了,基于(SpringBoot+VUE)实现的自定义拖拽式智能大屏
- 创建vue脚手架项目
- vue项目中使用postcss-px2rem的方法总结「建议收藏」
- vscode设置vue模板_vscode怎么创建vue项目
- Vue Router 搭配 NaiveUI 的进度条
- vue-cli3-项目出现跨域解决方法
- 阿里前端面试问到的vue问题
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- Vue项目引入百度地图
- Vue全家桶介绍_vue全家桶有什么好处
- 前端一面常见vue面试题汇总_2023-02-27
- Vue-cli搭建的项目中路径别名的配置
- IntelliJ IDEA使用 vue-cli 创建Vue项目
- vue如何二次封装一个高频可复用的组件
- uniapp或vue项目里如何接入第三方在线客服代码
- vue.js客服系统实时聊天项目开发(七)ES6模板字符串进行字符串变量内嵌拼接
- 我的Vue.js生态开源之旅
- Vue指令之条件渲染
- Vue取消eslint语法限制
- 配置vue环境详解编程语言
- 使用Vue技术从MSSQL中获取数据(vue获取mssql数据)
- Vue技术实现访问远程Redis的精彩之旅(vue访问远端redis)
- Vue抢跑Redis速度感受实时重磅数据(vue获取redis)
- Vue用Redis储存获取数据(vue获取redis)
- Vue如何连接Redis数据库(vue怎么连接Redis)
- 从零开始Vue项目中使用Redis(vue使用redis)