【课程简介】

【课程推荐】

【主讲内容】

1. 完成带数据交互的 B 站移动端

2. 学习到 Vue3 + TypeScript 的开发环境配置 Volar + DevTools

3. 学习到 Vant3 组件库 + Axios 请求库在项目实战中使用

项目预览

项目截图

 用到的技术

1. Vue Cli https://cli.vuejs.org/zh/guide/installation.html

2. Vue3.2 https://v3.cn.vuejs.org/

3. VueRouter4 https://next.router.vuejs.org/zh/guide/

4. Vant 3 组件库 https://vant-contrib.gitee.io/vant/v3/#/zh-CN

5. TypeScript https://www.typescriptlang.org/zh/play

6. Axios 请求库

7. Volar 插件 8. VueDevtools 调试工具

Vue3 + TypeSciprt 开发环境准备

VScode 安装 Volar

Volar 的最新更新，目前连插件图标都还没制作好 (可以理解，哈哈)

Chrome 安装 vue3_devtools

1. 浏览器地址栏输入 chrome://extensions/

2. 右上角开发者模式 - 打开开关。

3. 把 vue3_devtools.crx 拖放进去安装。

创建 Vue3+TypeScript 项目

使用 @vue/cli 创建项目

打开终端工具，输入 vue create 项目名称 创建 Vue3 + TS 项目

?? 温馨提醒： 如果创建失败，需要提前安装 @vue/cli 脚手架工具，才能通过以上命令创建项目。 如何安装 @vue/cli 官方教程：https://cli.vuejs.org/zh/guide/installation.html

选择 Vue3 + TypeScript 配置

下载成功提示

 清理项目多余文件

操作步骤

删除 assets 文件夹下所有文件

删除 components 文件夹下所有文件

删除 views 文件夹下所有文件

新建 Home 首页 和 Video 视频播放页

修改 src outerindex.ts 文件内容

修改 src outerindex.ts 文件内容

新建两个页面

新建首页 srcviewsHomeindex.vue

新建视频详情页 srcviewsVideoindex.vue

修改 src outerindex.ts 文件内容

注意：前面新增了项目的两个页面，我们需要添加路由配置才能看到页面哦。

??温馨提醒：+ 表示新增的代码，- 表示删除的代码

修改 src outerindex.ts 文件内容

 运行 Vue3 + TS 项目

升级到 Vue3 最新版本

打开终端工具，输入 npm i vue@next 即可安装 Vue3 最新版本。

 项目素材准备

前言

哔哩哔哩移动端项目提供了 图片素材 和 样式文件

操作步骤

把素材文件夹中的 assets 文件夹移动到项目中，覆盖项目的 srcassets 文件夹。

项目入口素材样式

项目入口文件： srcmain.ts

 项目首页

前 言

首页按组件划分功能模块。

页 面 组 件 分 析

新建首页三个组件备用

频道组件： srcviewsHomecomponentshome-channel.vue

轮播组件： srcviewsHomecomponentshome-swipe.vue

视频列表组件： srcviewsHomecomponentshome-video-list.vue

温馨提醒：新建三个文件备用即可，组件里面暂时不需要写入内容。