# Vue3 + TypeScript 开发移动 WebAPP 项目
TIP
从本节开始,我们将正式进入 Vue3 项目开发阶段的学习,带领大家从 0 到 1,前端 + 服务端 RESTful API 接口开发到上线部署。
在接下来的课程中,项目中的每个代码都会手把手带着大家一行一行敲出来,保证大家能学会。
以下是项目中需要用到的技术栈、项目涉及页面、项目涉及功能、项目用到的技术。
# 1、项目技术栈
TIP
本次 Vue 项目用到的技术栈、构建工具、组件库、代码检查、代码格式化工具。
如下表:
工具 | 描述 | 版本 |
---|---|---|
Node | JS 运行时环境 | 18.14.2 |
Vue | 渐进式 JS 框架 | 3.3.4 |
TypeScript | 具有类型语法的 JS | 4.4.9 |
Vite | 前端构建工具 | 5.2.0 |
Vue Router | Vue.js 的官方路由 | 4.2.4 |
Pinia | Vue.js 状态管理库 | 2.1.6 |
Vant | 移动端 Vue 组件库 | 4.7.1 |
VueUse | 基于 Vue 组合式 API 的实用函数集合 | 10.5.0 |
ESLint | 代码检查工具,统一代码规范 | 8.22.0 |
Prettier | 代码格式化工具 | 2.7.1 |
json-server | 模拟服务端接口数据 | 0.17.x |
jsonwebtoken | 生成 和 校验 token | 9.x |
axios | 异步请求 | 1.5.x |
postcss | 利用 JavaScript 的强大编程能力对 CSS 代码进行转换 | 8.x |
sass | CSS 预处理器 | 1.67.x |
...... | ..... | ..... |
# 2、项目页面
TIP
本项目所涉及到的页面有:首页、购物车、订单、我的、商家店铺、商品详情、订单支付、登录、注册、地址管理、编辑地址、搜索页。
# 3、项目功能
TIP
本项目中涉及到的一些功能主要用:
- 搜索功能
- 轮播图
- 弹出层和弹窗
- 倒计时
- 滚动菜单
- 滚动加载
- 下拉刷新
- 图片懒加载
- 单选与全选
- 加入购物车
- 地址管理(选择、新增、修改、删除、默认设置)
- 短信验证码登录与注册
- token 身份认证
# 4、项目技术点
TIP
本项目所涉及到的技术栈和相关知识点,如下
# 4.1、Vue3 框架
TIP
- 基础知识应用
- ref 和 reactive
- computed 和 watch
- 组件封装
- 自定义指令 directive
- composition API
- 生命周期
# 4.2、Vue Route4
TIP
- 基础用法
- 动态路由匹配
- 导航守卫
# 4.3、Pinia 状态管理
TIP
- 基础用法
- state
- getter
- action
- 数据本地持久化(localstorage)
# 4.4、构建工具 Vite
TIP
- Vite 构建项目
- 配置 eslint、prettier
- 设置请求代理
# 4.5、TypeScript
TIP
- 基础用法
- 函数
- 接口 interface
- 类 Class
- 泛型
# 4.6、Axios
TIP
- 创建 axios 实例
- get、post、put、deleted 请求
- axios 封装
- 请求和响应拦截器
# 4.7、Vant 组件
TIP
- Icon 图标
- Popup 弹出层
- Checkbox 复选框
- Form 表单
- Search 搜索
- PullRefresh 下拉刷新
- Lazyload 懒加载
- List 列表
- Sticky 粘性布局
- Swipe 轮播
- IndexBar 索引栏
- NavBar 导航栏
- Tab 标签页
- Tabbar 标签栏
- Area 省市区选择
- Dialog 弹出框
- CountDown 倒计时
- VueUse 基本用法
- ESLint 和 Prettier 基础配置
# 4.8、服务器端
TIP
- json-server 模拟服务端接口数据
- MockJS 生成数据
- 掌握 Http 状态码与业务状态码
- jsonwebtoken 生成和校验 token
- 如何申请短信验证码接口
在上面所提到的技术点中,95%在学习 Vue 基础时都学习过,只有一小部分没有学习过,所以在正式开发项目前,我们先把以下列出的未学习过的知识先系统学习下,然后再正式进入项目的开发。
- json-server 模拟服务端接口数据
- 如何利用 MockJS 生成随机数据
- 如何利用 jsonwebtoken 生成和校验 token,实现项目的身份认证
- 如何申请短信验证接口,帮助我们实现短信验证码登录与注册
- 学习如何使用 VueUse,帮助我们实现项目中用到的一些常用的功能
- 了解 ESLint 和 Prettier 代码检查和代码格式化工具
大厂最新技术学习分享群
![大厂最新技术学习分享群](/bulletin-box.jpg)
微信扫一扫进群,获取资料
X