Vue3 + TypeScript 开发移动 WebAPP 项目

TIP

从本节开始，我们将正式进入 Vue3 项目开发阶段的学习，带领大家从 0 到 1，前端 + 服务端 RESTful API 接口开发到上线部署。

【扫码体验】：艾编程外卖 WebApp 项目

在接下来的课程中，项目中的每个代码都会手把手带着大家一行一行敲出来，保证大家能学会。

以下是项目中需要用到的技术栈、项目涉及页面、项目涉及功能、项目用到的技术。

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

本项目所涉及到的页面有：首页、购物车、订单、我的、商家店铺、商品详情、订单支付、登录、注册、地址管理、编辑地址、搜索页。

移动 WebApp 项目蓝湖设计稿，部分截图

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 代码检查和代码格式化工具