今天给大家带来最新的vue 3.2 +TS入门到项目实战，做一个B站移动端项目。

项目预览

在线预览：http://javascript.zbztb.cn/tsbilibili/#/

项目截图：

本文收获

1. 完成带数据交互的B站移动端
2. 学习Vue3 + TypeScript 的开发环境配置 Volar +DevTools
3. 学习到 Vant 3 组件库 +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 请求库
6. Volar 插件
7. 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 create 项目名称

🔔 温馨提醒：

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

选择 Vue 3 + TypeScript配置

下载成功提示：

清理项目多余文件

操作步骤

删除 assets 文件夹下所有文件
删除 components 文件夹下所有文件
删除 views 文件夹下所有文件
新建 Home 首页 和 Video 视频播放页
修改 srcrouterindex.ts 文件内容
修改 srcrouterindex.ts 文件内容

新建两个页面

新建首页 srcviewsHomeindex.vue

 
  
Bilibili 主页
 
  点我去视频详情页 

新建视频详情页 srcviewsVideoindex.vue

  
视频详情页
 
  点我回首页

修改 srcrouterindex.ts 文件内容

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

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

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
-import Home from '../views/Home.vue' 

const routes: Array = [ 
+ { path: '/', component: () => import('@/views/Home/index.vue') }, 
+ { path: '/video/:id', component: () => import('@/views/Video/index.vue') }

- {
- path: '/',
- name: 'Home',
- component: Home
- },
- {
- path: '/about',
- name: 'About',
- // route level code-splitting
- // this generates a separate chunk (about.[hash].js) for this route
- // which is lazy-loaded when the route is visited.
- component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
- }
  ]

  const router = createRouter({ 
    history: createWebHashHistory(), 
    routes 
  })

export default router

修改 srcrouterindex.ts 文件内容

- 

- Home |
- About
- 
  
-
-#app {
- font-family: Avenir, Helvetica, Arial, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-align: center;
- color: #2c3e50;
-}
-#nav {
- padding: 30px;
- a {
- font-weight: bold;
- color: #2c3e50;
- &.router-link-exact-active {
- color: #42b983;
- }
- }
-}
-

运行 Vue 3 + Ts项目

升级到Vue3 最新版本

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

npm i vue@next

项目运行命令

打开终端工具，输入 npm run serve 即可运行项目。

npm run serve

运行截图：

运行成功提示：

项目素材准备

前言

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

操作步骤

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

项目入口素材样式

项目入口文件： srcmain.ts

import { createApp } from 'vue' 
import App from './App.vue' 
import router from './router' 

+import '@/assets/styles/base.less' 
+import '@/assets/styles/iconfont.less' 

const app = createApp(App) 

app.use(router)
app.mount('#app')

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net