用 Vue 写个移动 SPA 应用

柔情只为你懂 2022-04-27 22:54 112阅读 0赞

最近看了 Vue 的文档，想着应该写点什么加深下印象，能力有限，就照着葫芦画下吧?，这次的葫芦是 [图灵社区][Link 1] 移动端页面  
Github: [github.com/Jimzjy/itur…][github.com_Jimzjy_itur]  
预览: [jimzjy.github.io/ituring-mob…][jimzjy.github.io_ituring-mob]  
前端新手，CSS / TS / JS 写的很烂，望见谅

## 准备工作 ##

使用 vue-cli 创建项目，我的配置是

vue-router
    vuex
    dart-sass
    babel
    typescript
    eslint
    复制代码

删除自动创建的 HelloWorld，About 等组件、页面以及路由

## 页面结构 ##

### 剖析页面 ###

我们看下要做的部分的大体导航结构

概括为（上面的图少 more-books 的页面）

- pages
        - [pages-content]
            - header-bar
            - home / book / article
        - [user-info]
        - bottom-navbar
    - login
    - more-books
    复制代码

### 创建基本结构组件 ###

新建以下文件

views/
        Pages.vue
        PgaesContent.vue
        Login.vue
        MoreBooks.vue
        NotFound.vue
        pagesContents/
            Home.vue
            Book.vue
            Article.vue
            User.vue    // 对应上文结构中的 user-info, 按照结构其实应该直接放在 views/ 目录下
    components/
        HeaderMenu.vue
        HeaderNav.vue   // 两个 Header 组件一起对应 header-bar
        BottomNavbar.vue
    复制代码

添加 route

routePageNames = ['home', 'book', 'article', 'user']
    
    {
      path: '/',
      component: Pages,
      children: [
        {
          path: '',
          component: PagesContent,
          children: [
            {
              path: '',
              component: Home,
              name: routePageNames[0]
            },
            {
              path: 'book',
              component: Book,
              name: routePageNames[1],
            },
            {
              path: 'article',
              component: Article,
              name: routePageNames[2],
            }
          ]
        },
        {
          path: 'user',
          component: User,
          name: routePageNames[3],
        }
      ]
    },
    {
      path: '/login',
      component: Login,
      name: 'login',
    },
    {
      path: '/more-books',
      component: MoreBooks,
      name: 'more-books',
    }
    {
      path: '*',
      component: NotFound,
      name: 'not-found'
    }
    复制代码

OK，现在文件结构已经满足了上面结构，接下来开始填充结构内容

## 开始填充架构 ##

### 准备工作 ###

用 **MockJS** 来模拟数据

npm install mockjs
    npm install @types/mockjs -D
    复制代码

新建文件

src/
        mock/
            index.ts    // mock 数据
        service/
            index.ts    // 获取数据的 Url
    复制代码

### 头部 ###

头部由两个组件组成 HeaderMenu 和 HeaderNav, 代码可以在最上面的链接中找到  
**HeaderMenu**

**HeaderNav** 有两种样子  
在 Home 页面的  
在 Book 和 Article 页面的  
我们使用 BottomNavbar 来切换页面，但是 HeaderNav 和 BottomNavbar 既不是父子也不是兄弟，那么我们不能直接传参，那么我们可以通过 Vuex 设置一个判断 Home 和 其它 两种状态的 state，但是这样需要在 route 上设置守卫或者在 Home 和 Article 组件上操作，或者还可以通过监听 **$route**，让 HeaderNav 自己去处理，这里我选择后者

service/index.ts
    const topicsUrl = api + '/topics'
    
    mock/index.ts
    Mock.mock(`${topicsUrl}/${routePageNames[0]}`, shuffle(topicsHome).concat('最新上线', '每周特价'))
    Mock.mock(`${topicsUrl}/${routePageNames[1]}`, topicsBook)
    Mock.mock(`${topicsUrl}/${routePageNames[2]}`, topicsArticle)
    // 内容都可以在源码中找到，篇幅有限就只列重点了，下同
    
    HeaderNav.vue
    
    @Watch('$route')
    updateTopics () {
        this.isHome = this.$route.name === routePageNames[0] // 通过 isHome 来判断是否是 Home，routePageNames 是之前在 route 里写的
        this.$http.get(`${topicsUrl}/${this.$route.name}`).then((resposne: any) => {
            this.topicsData = resposne.data
        })
    }
    
    <div v-if="isHome">...</div>
    <div v-if="!isHome">...</div>
    复制代码

在 PagesContent.vue 添加 HeaderNav 和 HeaderMenu

<header>
      <header-menu></header-menu>
      <header-nav></header-nav>
    </header>
    <router-view/>  // Home / Book / Article
    <div id="bottom-space"></div>   // 为 BottomNavbar 留底部空间
    复制代码

### 底部 ###

BottomNavbar 用到了 vue-awesome 这个 icon 库

npm install vue-awesome
    复制代码

在这个项目中我用的都是自定义icon，可以在 **src/asstes/icon/customIcons.ts** 中找到  
通过 fill 和 .router-link-active 一起配合，可以很轻松的实现根据不同路由改变 icon 的颜色

.fa-icon {
        ...
    
        fill: #C8CDD4;
    }
    
    .navbar-tab {
        ...
    
        &.router-link-active {
            color: $primary-color;
    
            .fa-icon {
                fill: $primary-color;
            }
        }
    }
    复制代码

在 Pages.vue 中添加 BottomNavbar

<router-view/>  // PagesContent
    <bottom-navbar></bottom-navbar>
    复制代码

### 用户和登录 ###

登录状态可以用 Vuex 来设置一个 loginStatus（true为登录）

state: {
      loginStatus: false
    },
    mutations: {
      login (state) {
        state.loginStatus = true
      },
      logout (state) {
        state.loginStatus = false
      }
    },
    复制代码

当用户登录状态为 false 时，不允许用户进入 /user ，所以我们在 /user 上添加一个路由守卫

{
      path: 'user',
      component: User,
      name: routePageNames[3],
      + beforeEnter: authGuard
    }
    
    function authGuard (to: Route, from: Route, next: Function) {
      if ($store.state.loginStatus) {
        next()
        return
      }
    
      next({ name: 'login', query: { to: to.name } })
    }
    复制代码

在上面的代码中给到 login 的路由加了 **query: \{ to: to.name \} \}** ，之后我们在 Login 组件中就可以获取到本来用户想要去的路由，在登录后就可以跳转到用户原来想要取得路由，我们可以通过 $route.query 获取到信息，或者可以使用

route.ts
    {
      path: '/login',
      component: Login,
      name: 'login',
      + props: (route) => ({ to: route.query.to })
    }
    
    Login.vue
    @Prop({ default: 'home' }) readonly to!: string
    复制代码

在路由中添加 props 将 query.to 变成添加给 Login 的属性  
在 Login 中添加 login 方法，在 User 中添加 logout 方法

Login.vue
    onLoginClick () {
        this.$store.commit('login')
        this.$router.push({ name: this.to })
    }
    
    User.vue
    onLogoutClick () {
        this.$store.commit('logout')
        this.$router.push('/')
    }
    复制代码

## 开始填充内部 ##

开始填充 PagesContent 内部，MoreBooks 中的组件会复用内部用过的，所以会和内部一起说明

### Home ###

#### Swiper ####

Home 中的第一个组件是一个 Swiper，使用 vue-swipe

npm install vue-swipe
    复制代码

再新建 components/Swiper.vue 再封装下 vue-swipe

Swiper.vue
    
    <swipe :showIndicators=false :speed=3000>
      <swipe-item v-for="(item, index) in data" :key="index" class="swipe-item">
        <p class="title">{
        { item.title }}</p>
        <p class="content">{
        { item.content }}</p>
      </swipe-item>
    </swipe>
    
    @Prop() readonly data!: Array<InfoSwipe>
    复制代码

在 Home 中通过 Mock 获取数据，传给 Swiper

created () {
        this.updateData()
    }
    
    updateData () {
        this.$http.get(homeDataUrl).then((resposne: any) => {
            this.data = resposne.data
        })
    }
    
    <swiper :data="data.infoSwipe"></swiper>
    复制代码

#### SpecialView ####

在 Home 中有两种组件有着同样的外组件  
**书的列表**

**文章的列表**新建 components/SpecialView.vue

SpecialView.vue
    <div class="title">
      <div class="title-content">
        ...
      </div>
      <router-link class="more" v-if="more" :to="{ name: 'more-books', query: { title } }">更多</router-link>
    </div>
    <slot></slot>
    
    Home.vue
    <special-view :title="item.title" :more="item.books.length > 4">
      ...
    </special-view>
    复制代码

这里我偷了下懒，更多按钮只去 /more-books

#### BookListView ####

书的列表也有两种样子  
**横向滚动**

**wrap**

通过 wrap 属性改变 class 来改变样式

components/BookListView.vue
    <div :class="['book-list-view', wrap ? 'wrap-list' : '']">
        ...
    </div>
    
    @Prop() readonly books!: Array<Book>
    @Prop({ default: false }) readonly wrap!: boolean
    
    Home.vue
    <div v-for="(item, index) in data.booksWithTitle" :key="index" >
      <special-view :title="item.title" :more="item.books.length > 4">
        <book-list-view :books="item.books"></book-list-view>
      </special-view>
      <sepline></sepline>
    </div>
    
    MoreBooks.vue
    <book-list-view :books="books" :wrap=true></book-list-view>
    复制代码

### Book ###

#### TopicTabView ####

在 Book 和 Article 中都有一个 tabview

点击 tab 时要更新 Book 的内容，所以在 TopicTabView 上可以加一个监听

components/TopicTabView.vue
    @Emit()
    onTopicClick (n: number) {
        this.topicChecked = n
        return n
    }
    
    Book.vue
    <topic-tab-view @on-topic-click="onTopicChange"></topic-tab-view>
    
    onTopicChange (n: number) {
        this.updateData()
    }
    
    updateData () {
        this.$http.get(moreBooksUrl).then((response: any) => {
            this.books = response.data
        })
    }
    复制代码

#### 内容 ####

Book 的内容可以直接复用 BookListView 的 wrap 模式

### Article ###

#### ArticleListView ####

Article 和 Home 中都有文章的列表，样式相差并不多，可以像之前一样通过属性改变 class

components/ArticleListView.vue
    <div v-if="showTag">
      ...
    </div>
    <div v-if="!showTag">
      ...
    </div>
    
    Article.vue
    <article-list-view :articles="articles" class="articles"></article-list-view>
    
    Home.vue
    <special-view title="推荐文章">
      <article-list-view :articles="data.articles" :showTag=false></article-list-view>
    </special-view>
    复制代码

### 内容更新 ###

现在从样子的角度来说已经构建完了，但是还有一个问题，当在 Book 和 Article 中点击 HeaderNav 的选项不会有任何效果，因为 HeaderNav 和 Book 以及 Article 的 内容部分，既不是父子也不是兄弟，我们又不能直接传参或者监听了  
那我们可以通过在 route 上加属性，HeaderNav 通过 route 上的属性切换，点击后改变 route 的属性刷新页面，嗯...，感觉消耗有点大  
那我们还可以通过 Vuex

state: {
        + currentHeaderNav: 0
    },
    mutations: {
        + changeCurrentHeaderNav (state, n) {
          state.currentHeaderNav = n
        }
    },
    复制代码

我们添加了一个 currentHeaderNav 用于表示现在的 HeaderNav 序号

<div :class="[isCurrentNav(index) ? 'topic-content-foucused' : 'topic-content']" @click="onTopicClick(index)">{
        { topic }}</div>
    
    isCurrentNav (n: number): boolean {
        return this.currentHeaderNav === n
    }
    
    onTopicClick (n: number) {
        this.$store.commit('changeCurrentHeaderNav', n)
    }
    复制代码

在 Book 和 Article 中添加监听

created () {
        this.updateData()
        this.subscription = this.$store.subscribe(mutation => {
            if (mutation.type === 'changeCurrentHeaderNav') {
                this.updateData()
            }
        })
    }
    
    destroyed () {
        this.subscription()
    }
    复制代码

现在已经可以正常更新内容了，但是还有一个问题，在 Book 和 Article 中序号是共享的，所以我们要在进入 Book 和 Article 前初始化序号，不然的话序号就乱套了，添加路由守卫

{
      path: 'book',
      component: Book,
      name: routePageNames[1],
      + beforeEnter: refreshHeaderNav
    },
    {
      path: 'article',
      component: Article,
      name: routePageNames[2],
      + beforeEnter: refreshHeaderNav
    }
    
    function refreshHeaderNav (to: Route, from: Route, next: Function) {
      $store.commit('changeCurrentHeaderNav', 0)
    
      next()
    }
    复制代码

OK！现在就完成了

## End ##

[Link 1]: https://link.juejin.im?target=http%3A%2F%2Fm.ituring.com.cn%2F
[github.com_Jimzjy_itur]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FJimzjy%2Fituring-mobile-imitate
[jimzjy.github.io_ituring-mob]: https://link.juejin.im?target=https%3A%2F%2Fjimzjy.github.io%2Fituring-mobile-imitate%2F