Vue3 + TypeSciprt+Vant 项目框架构建

哔哩哔哩移动端 - 项目实战

前言

• 今年8月，Vue3.2 终于定稿了

项目实现效果图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ApjGDxQM-1655734119007)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4bcd5ea8327c4b2d855e1acb1f9d9975~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

用到的技术

1. Vue Cli cli.vuejs.org/zh/guide/in…
2. Vue3.2 v3.cn.vuejs.org/
3. VueRouter4 next.router.vuejs.org/zh/guide/
4. Vant 3 组件库 vant-contrib.gitee.io/vant/v3/#/z…
5. TypeScript www.typescriptlang.org/zh/play
6. Axios 请求库
7. Volar 插件
8. VueDevtools 调试工具

Vue3 + TypeSciprt 开发环境准备^

VScode 安装 Volar

Chrome 安装 vue3_devtools^

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

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

3. 把 vue3_devtools.crx 拖放进去安装。（vue3_devtools.crx评论区的文件里包含有）

创建 Vue3+TypeScript 项目

使用 @vue/cli 创建项目

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

vue create vue3-ts 

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

Vue3 + TypeScript 配置如下图：

清理项目多余文件

操作步骤

• 删除 assets 文件夹下所有文件
• 删除 components 文件夹下所有文件
• 删除 views 文件夹下所有文件

新建两个页面

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

<template>
    <h1>Bilibili 主页</h1>
    <router-link to="/video/1">点我去视频详情页</router-link>
</template> 

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

<template>
    <h2>视频详情页</h2>
    <router-link to="/">点我回首页</router-link>
</template> 

修改路由文件：src/router/index.ts 文件内容

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
    {
    path: '/',
        component: () => import('@/views/Home/index.vue')
    },
    {
    path: '/video/:id',
        component: () => import('@/views/Video/index.vue')
    }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes
})
export default router 

修改 src/App.vue 文件内容

<template>
    <router-view/>
</template> 

这样就可以看见我们新建的首页页面了。

运行 Vue3 + TS 项目

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

npm run serve 

项目素材准备

前言

评论区里提供了项目 图片素材 和 样式文件，下载直接使用就可。

操作步骤

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

项目入口素材样式

项目入口文件 src\main.ts 里导入base.less、iconfont.less文件：

import { createApp } from 'vue&#