哔哩哔哩移动端项目：Vue3.2 + TS + Axios入门到实战

素颜马尾好姑娘i 2024-04-08 11:45 19阅读 0赞

【课程简介】

Vue3.2 终于定稿了 <script setup> 语法糖，作者尤雨溪自信放话：\`<script setup> + TS + Volar = 真香\`，黑马前端立刻给大家分享最新的 Vue3.2 + TS 入门到项目实战，做一个B 站移动端项目!对于只了解了 Vue3，ypeScript 语法，缺少项目实战经验的同学，千万不要错过！这次实战能让大家了解到 Vue3 + TypeScript 的真实开发情况。格局打开，拥抱技术未来！

【课程推荐】[手写B站移动端：Vue3.2 + TS + Axios入门到实战][B_Vue3.2 _ TS _ Axios]

【主讲内容】

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

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

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

## 项目预览 ##

[http://javascript.zbztb.cn/tsbilibili/\#/][http_javascript.zbztb.cn_tsbilibili]

## 项目截图 ##

![1be5b54406904f17a54f84008ab5c870.png][]

## 用到的技术 ##

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 的最新更新，目前连插件图标都还没制作好 (可以理解，哈哈)

![18d8ab04057e45d7a987528f4c868d59.png][]

Chrome 安装 vue3\_devtools

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

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

3. 把 vue3\_devtools.crx 拖放进去安装。

## 创建 Vue3+TypeScript 项目 ##

**使用 @vue/cli 创建项目**

![9adff600ffc64ea58d68b7559c516753.png][]

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

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

**选择 Vue3 + TypeScript 配置**

![00a4d5c885a842e2aae224e3b97e13fb.png][]

![95aa26f597084bc29cebbbbc58841051.png][] ![e9333741fc8c4b1886a3ff552ef1dce4.png][]

![2b6d682ec3774062a3b945a7308cc80b.png][] ![915ef3b4cff04356838c7fd9c6715e29.png][]

![27658cf3fb874990b7e5779924c840da.png][] ![b55a52b76422448e9cdfb06d8f23e149.png][]

### 下载成功提示 ###

![15e58f980f18424b9ee00755ee8109e7.png][]

## 清理项目多余文件 ##

**操作步骤**

删除 assets 文件夹下所有文件

删除 components 文件夹下所有文件

删除 views 文件夹下所有文件

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

修改 src\\router\\index.ts 文件内容

**新建两个页面**

新建首页 src\\views\\Home\\index.vue

![d8e311a871454fa4addb5ae454262631.png][]

新建视频详情页 src\\views\\Video\\index.vue

![535c7f74ae104b6688d1af1d6f0e6082.png][]

**修改 src\\router\\index.ts 文件内容**

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

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

![18eb8d047eb54ccc9bfe8d515772e6d2.png][]

**修改 src\\router\\index.ts 文件内容**

![7422b02c863d40e4b65e795526ef7cca.png][]

## 运行 Vue3 + TS 项目 ##

**升级到 Vue3 最新版本**

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

![4dbf1cada9d041a89b38f5b4fb0a2ae4.png][]![e1fe5b623c2845c4bdbbd65e8f0b2997.png][]

## 项目素材准备 ##

**前言**

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

**操作步骤**

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

**项目入口素材样式**

项目入口文件： src\\main.ts

![d2f9aa0af3e34e958a6a43513fde88bc.png][]

## 项目首页 ##

**前 言**

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

**页 面 组 件 分 析**

![b4e88727a7364746aa971800a1f1f7b0.png][]

**新建首页三个组件备用**

频道组件： src\\views\\Home\\components\\home-channel.vue

轮播组件： src\\views\\Home\\components\\home-swipe.vue

视频列表组件： src\\views\\Home\\components\\home-video-list.vue

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

![27ea941b53de4665b8d042a93f905c19.png][]

![2f33d39ec1fd4e65a77de93fa77c6003.png][]

未完待续，实战项目资料比较多， 感兴趣的同学，可以一起讨论

[B_Vue3.2 _ TS _ Axios]: http://yun.itheima.com/open/702.html
[http_javascript.zbztb.cn_tsbilibili]: http://javascript.zbztb.cn/tsbilibili/#/
[1be5b54406904f17a54f84008ab5c870.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/f49f7f06bc72498ea2126ef224ac69da.png
[18d8ab04057e45d7a987528f4c868d59.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/d24549fa8866436188f5adceff5aade4.png
[9adff600ffc64ea58d68b7559c516753.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/c590e9d4b15f4bbeb2aada8ce6caed54.png
[00a4d5c885a842e2aae224e3b97e13fb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/016b05ad830f40a69f091bb003b70221.png
[95aa26f597084bc29cebbbbc58841051.png]: https://img-blog.csdnimg.cn/95aa26f597084bc29cebbbbc58841051.png
[e9333741fc8c4b1886a3ff552ef1dce4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/79978323df784beaa97dd7f46767f66a.png
[2b6d682ec3774062a3b945a7308cc80b.png]: https://img-blog.csdnimg.cn/2b6d682ec3774062a3b945a7308cc80b.png
[915ef3b4cff04356838c7fd9c6715e29.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/8205424495a9414f81e4260b09a24baa.png
[27658cf3fb874990b7e5779924c840da.png]: https://img-blog.csdnimg.cn/27658cf3fb874990b7e5779924c840da.png
[b55a52b76422448e9cdfb06d8f23e149.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/c140b9c6cbce4758b9ad0564d6f2f802.png
[15e58f980f18424b9ee00755ee8109e7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/86043ba1339b47bdb1078874178cd2f0.png
[d8e311a871454fa4addb5ae454262631.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/8d2ec2dbf1764d35a44bb6addc732eff.png
[535c7f74ae104b6688d1af1d6f0e6082.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/0b274da35cfc4f05b07a0887f95a1532.png
[18eb8d047eb54ccc9bfe8d515772e6d2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/c9f969f9d7e34828bfeae84be3976dcf.png
[7422b02c863d40e4b65e795526ef7cca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/4425483860b24950ad0d8b63c7fca621.png
[4dbf1cada9d041a89b38f5b4fb0a2ae4.png]: https://img-blog.csdnimg.cn/4dbf1cada9d041a89b38f5b4fb0a2ae4.png
[e1fe5b623c2845c4bdbbd65e8f0b2997.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/b1a3c2215310453e93f0cf98fda06dbb.png
[d2f9aa0af3e34e958a6a43513fde88bc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/91165e7031604c42b8536cc81617c3f9.png
[b4e88727a7364746aa971800a1f1f7b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/e3bf2c7a31a84d1a86dcd86063be3c10.png
[27ea941b53de4665b8d042a93f905c19.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/08acb84b30a94db193cf792d3aa3b7bb.png
[2f33d39ec1fd4e65a77de93fa77c6003.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/9c479a3ca94043aab1da864545661050.png