Vue ts 项目实战

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 入口文件

   // 路由匹配到的组件将显示在这里


// 完善 router
const List = () => import('../views/List.vue')
export enum RouteNames {
  List = 'List',
}

const routes: Array = [
  {
    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组件引入该组件即可

2，首页 Banner 模块

@/components下创建Banner组件

home组件：

Slider组件：

Banner组件：

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('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;