Vue ts 项目实战

首先，没装vue-cli的，可以使用下列任一命令安装这个新的包:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装完成，可以通过 vue -V 检查其版本。

1，脚手架创建 vue 项目

可以根据自己的喜好自行选择哦，以下是我创建项目的选项仅供参考

我们使用 vue cli 脚手架新建项目：vue create vue-demo

2, 梳理需求

首页
文章/视频列表，可以滚动
列表里可以搜索
详情页
axios 请求 Mock 数据
vuex 的使用
router + router 的动效

3，构建路由

1, 创建 home、list、detail组件
2，构建路由：

// 修改 App 入口文件
<div id="app"><router-view/> // 路由匹配到的组件将显示在这里
</div>// 完善 router
const List = () => import('../views/List.vue')
export enum RouteNames {List = 'List',
}const routes: Array<RouteConfig> = [{path: '/',name: 'Home',component: Home},{path: '/list',name: RouteNames.List,component: List},{path: '/detail/:id',name: RouteNames.Detail,component: Detail}
]

移动端项目，我这里就使用 rem + 媒体查询了，有更好的方案欢迎大佬加我交流呦

htmlwidth 100%height 100%font-size 10px
// 实际的 px = html.font-size * rem
@media only screen and (max-width: 338px)htmlfont-size 9px !import// iPhone Plus
@media only screen and (max-width: 411px)htmlfont-size 11px !import// Android Pad
@media only screen and (max-width: 450px)htmlfont-size 12px !import
@media only screen and (max-width: 525px)htmlfont-size 14px !import// Nexus 7
@media only screen and (max-width: 600px)htmlfont-size 16px !import// iPad or Browser
@media only screen and (max-width: 768px)htmlfont-size 20px !import

4，构建首页

1，首页顶部 slider，单独创建个组件

@/components下创建Slider组件，然后Home组件引入该组件即可

<template><div class="slider"><ul><li v-for="(item, idx) in tabs" :key="item + idx" class="tab-item" :class="{active: activeTab === idx}"@click="changeActiveTab(idx)">{{item}}</li></ul></div>
</template><script lang="ts">
import { Component, Vue } from 'vue-property-decorator';@Component({components: {},
})
export default class Slider extends Vue {tabs: string[] = ['推荐', '视频', '娱乐', '文章', '发现', '小说', '交友', '我的']activeTab = 0changeActiveTab(v: number) {this.activeTab = v}
}
</script>
<style lang="stylus" scoped>
.slidermargin 2rem 0uldisplay flexalign-items centeroverflow scroll&::-webkit-scrollbarwidth 0.tab-itemflex: 0 0 25%color #353535text-align centerfont-size 1.6remline-height 2.6remtransition all .3s ease-in-out&.activefont-weight boldcolor #3a3a3atransform: scale(1.2)
</style>

2，首页 Banner 模块

@/components下创建Banner组件

home组件：

Slider组件：

Banner组件：

3, 首页推荐列表（以下代码我不全部贴出来了，项目整体代码地址，有需要的，可自行下载）

这里开始涉及到请求数据，这里用的是 fastmock模拟的接口请求

import axios from 'axios'
import { HomeRecommend } from './types'
export default class Services {static init() {axios.defaults.baseURL = 'https://www.fastmock.site/mock/e200ea8676a01209d5de4aaa1b515353/yuri/'}// 推荐列表static async getHomeRecommend () {this.init()// 请求回来的结果 res.data 是 HomeRecommend[] 类型的return axios.get<HomeRecommend>('recommend').then(res => res.data)}
}

3，services 下新建 types.ts

export interface HomeRecommend {text: string;image: string;
}

1，其他涉及到的内容

// 展示两行 超出部分省略号
text-overflow ellipsis
display -webkit-box
-webkit-line-clamp 2
overflow hidden
-webkit-box-orient vertical// 元素在可视区内relative，离开可视区fixed
position: sticky;
top: 0;

Vue ts 项目实战相关推荐

vue 3 项目实战一（绘制登录界面）
目录一.概述二.创建vue项目三.需求分析四.构建组件五.vue组件之间的通信一.概述本文记录了项目实现的详细步骤以及原理,十分适合初学vue的萌新练手,也是阶段性学习的一个总结,可能会 ...
vue+ts项目中import图片时报错Cannot find module ‘xxx‘ or its corresponding type declarations
TS项目中import图片时报错Cannot find module 'xxx' or its corresponding type declarations 在vue+ts项目中使用import的形 ...
vue.js项目实战运用篇之抖音视频APP-第二节：项目基础架构搭建
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
Vue + Element-UI —— 项目实战（零）（项目概述）
Vue + ElementUI 后台管理项目实战内容参考链接一 Vue + Element-UI -- 项目实战(零)(项目概述[附源码]) 二 Vue + Element-UI -- 项目实战 ...
vue.js项目实战运用篇之抖音视频APP-第十一节：注册登录及验证码功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
vue.js项目实战运用篇之抖音视频APP-第八节：视频播放功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
vue.js项目实战运用篇之抖音视频APP-第一节：项目环境搭建
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
vue.js项目实战运用篇之抖音视频APP-第四节：顶部导航栏组件功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
vue.js项目实战运用篇之抖音视频APP-第十节：评论列表功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...

Vue ts 项目实战

Vue ts 项目实战

1，脚手架创建 vue 项目

2, 梳理需求

3，构建路由

4，构建首页

1，首页顶部 slider，单独创建个组件

2，首页 Banner 模块

3, 首页推荐列表（以下代码我不全部贴出来了，项目整体代码地址，有需要的，可自行下载）

1，其他涉及到的内容

Vue ts 项目实战相关推荐

最新文章

热门文章

Vue ts 项目实战

Vue ts 项目实战

1，脚手架创建 vue 项目

2, 梳理需求

3，构建路由

4，构建首页

1，首页顶部 slider，单独创建个组件

2，首页 Banner 模块

3, 首页推荐列表 （以下代码我不全部贴出来了，项目整体代码地址，有需要的，可自行下载）

1，其他涉及到的内容

Vue ts 项目实战相关推荐

最新文章

热门文章

3, 首页推荐列表（以下代码我不全部贴出来了，项目整体代码地址，有需要的，可自行下载）