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

image

image

image

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 + 媒体查询了，有更好的方案欢迎大佬加我交流呦

html
  width 100%
  height 100%
  font-size 10px
// 实际的 px = html.font-size * rem
@media only screen and (max-width: 338px)
  html
    font-size 9px !import

// iPhone Plus
@media only screen and (max-width: 411px)
  html
    font-size 11px !import

// Android Pad
@media only screen and (max-width: 450px)
  html
    font-size 12px !import
@media only screen and (max-width: 525px)
  html
    font-size 14px !import

// Nexus 7
@media only screen and (max-width: 600px)
  html
    font-size 16px !import

// iPad or Browser
@media only screen and (max-width: 768px)
  html
    font-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 = 0

  changeActiveTab(v: number) {
    this.activeTab = v
  }
}
</script>
<style lang="stylus" scoped>
.slider
  margin 2rem 0
  ul
    display flex
    align-items center
    overflow scroll
    &::-webkit-scrollbar
      width 0
    .tab-item
      flex: 0 0 25%
      color #353535
      text-align center
      font-size 1.6rem
      line-height 2.6rem
      transition all .3s ease-in-out
      &.active
        font-weight bold
        color #3a3a3a
        transform: scale(1.2)
</style>

image

2，首页 Banner 模块

@/components下创建Banner组件

home组件：

image

Slider组件：

image

Banner组件：

image

image

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

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

• 1，安装 axios: yarn add axios
• 2, 新建 services -> index.ts，并引入 axios

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;