Vue 项目实战系列 （二）

　　上一章节我们已经把项目的初始化工作完成了，接下来我们再来进行具体的代码编写。这一节我们将完成如下的页面。

 

　　我们在src/目录下新建一个views文件夹，存放我们的主要页面文件。目录结构如下：

　　

　　cinema.vue如下：

<template>
    <div>
        cinema
    </div>
</template>

　　movie.vue如下：

<template>
    <div>
        movie
    </div>
</template>

　　me.vue如下：

<template>
    <div>
        me
    </div>
</template>

　　这里三个相当一级路由的路由页面就有了。然后再看看具体的footerNav这个组件如何写。一个组件一般包含三个部分：

<template>
　　html部分
</template>
<script>
　　js代码部分
</script>
<style>
　　css样式部分
</style>

先看看template部分的代码：

<template>
    <footer>
        <section class="footer mint-1px-t">
            <!-- 当route是 / 的时候会有cur-page 这个class-->
              <nav class="nav nav-movie" :class="{'cur-page': route === '/'}">
                  <!-- router-link标签配置vue-router插件会路由到to 后面对应的页面 -->
                  <router-link to="/">
                      <div class="nav-icon">
                          <!-- 根据当前的路径展示不同的图片 -->
                          <img v-show="route !== '/'" src="../assets/images/hno.svg" alt="">
                          <img v-show="route === '/'" src="../assets/images/hok.svg" alt="">
                      </div>
                  </router-link>
              </nav>
              <nav class="nav nav-cinama" :class="{'cur-page': route === '/cinema'}">
                <router-link to="cinema">
                    <div class="nav-icon">
                        <img v-show="route !== '/cinema'" src="../assets/images/mno.svg" alt="">
                        <img v-show="route === '/cinema'" src="../assets/images/mok.svg" alt="">
                    </div>
                </router-link>
              </nav>
              <nav class="nav nav-me" :class="{'cur-page': route === '/me'}">
                  <router-link to="me">
                      <div class="nav-icon">
                          <img v-show="route !== '/me'" src="../assets/images/eno.svg" alt="">
                          <img v-show="route === '/me'" src="../assets/images/eok.svg" alt="">
                      </div>
                  </router-link>
              </nav>
          </section>
    </footer>
</template>

文件里对应的图片文件可以到 https://github.com/EzrealDeng/Taopiaopiao/tree/master/src/assets 上面获取，放到src assets目录下。

script部分如下：

<script>
    export default{
        data(){
            return {

            }
        },
        computed: {
            route () {
                return this.$route.path
            }
            //等价于 route : function(){
            //            return this.$route.path
            //        }
            //这种写法
            //
        }
    }
</script>

再加上style部分这个组件就算完成了。最终footerNav.vue代码如下：

<template>
    <footer>
        <section class="footer mint-1px-t">
            <!-- 当route是 / 的时候会有cur-page 这个class-->
              <nav class="nav nav-movie" :class="{'cur-page': route === '/'}">
                  <!-- router-link标签配置vue-router插件会路由到to 后面对应的页面 -->
                  <router-link to="/">
                      <div class="nav-icon">
                          <!-- 根据当前的路径展示不同的图片 -->
                          <img v-show="route !== '/'" src="../assets/images/hno.svg" alt="">
                          <img v-show="route === '/'" src="../assets/images/hok.svg" alt="">
                      </div>
                  </router-link>
              </nav>
              <nav class="nav nav-cinama" :class="{'cur-page': route === '/cinema'}">
                <router-link to="cinema">
                    <div class="nav-icon">
                        <img v-show="route !== '/cinema'" src="../assets/images/mno.svg" alt="">
                        <img v-show="route === '/cinema'" src="../assets/images/mok.svg" alt="">
                    </div>
                </router-link>
              </nav>
              <nav class="nav nav-me" :class="{'cur-page': route === '/me'}">
                  <router-link to="me">
                      <div class="nav-icon">
                          <img v-show="route !== '/me'" src="../assets/images/eno.svg" alt="">
                          <img v-show="route === '/me'" src="../assets/images/eok.svg" alt="">
                      </div>
                  </router-link>
              </nav>
          </section>
    </footer>
</template>
<script>
    export default{
        data(){
            return {

            }
        },
        computed: {
            route () {
                return this.$route.path
            }
            //等价于 route : function(){
            //            return this.$route.path
            //        }
            //这种写法
            //
        }
    }
</script>
<style>
    /*这里是样式文件*/
    .footer {
        background-color: #fff;
        position: fixed;
        width: 100%;
        bottom: 0px;
        height: 50px;
        display: -webkit-box; 
        padding-top: 7px;
        box-sizing: border-box;
        z-index: 10000;
    }
    .footer nav {
        -webkit-box-flex: 1;
        text-align: center;
        color: #8a869e;
    }
    .footer .cur-page.nav{
        color: #ff4d64;
    }
    .nav-icon {
        width: 22px;
        height: 22px;
        margin: 0 auto;
    }
    .nav-icon img {
        width: 100%;
        height: 100%;
    }
    .nav-movie::after,
    .nav-cinama::after,
    .nav-me::after {
        padding-top: 2px;
        text-align: center;
        width: 30px;
        display: inline-block;
        font-size: 12px;
    }
    .nav-movie::after {
        content: "电影";
    }
    .nav-cinama::after {
        content: "影院";
    }
    .nav-me::after {
        content: "我的";
    }
    .go-back {
        background: #ff2c43;
    }
    .back {
        font-size: 30px;
        color: #fff;
        padding-left: 35px;
        margin-top: -4px;
        transform: scaleY(1.5);
    }
</style>

由于这个部分是在整个app里都是会显示的，所以我们在App.vue里对组件进行引用。修改App.vue,如下：

<template>
  <div id="app">
    <router-view></router-view>
    <!--使用我们的footerNav组件 -->
    <footerNav></footerNav>
  </div>
</template>

<script>
//使用前必须进行引入
import footerNav from './components/footerNav.vue'
export default {
  data(){
    return {

    }
  },
  components:{
    footerNav
  }
}
</script>

<style>

</style>

然后再对route里的index.js进行修改，配置页面的路由策略，如下：

import Vue from 'vue'
import Router from 'vue-router'
//所有组件都要进行引用
import movie from '@/views/movie.vue'
import me from '@/views/me.vue'
import cinema from '@/views/cinema.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',//路径
      name: 'movie',
      component: movie //对应的组件
    },{
      path: '/me',
      name: 'me',
      component: me
    },{
      path: '/cinema',
      name: 'cinema',
      component: cinema
    }
  ]
})

最后一步工作进行在整个项目的入口文件根目录下的index.html文件做一个移动端的简单适配，加入meta标签，修改后如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- 移动端适配 -->
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
    <title>淘票票</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

然后npm run build 启动项目，如果一切顺利应该会有如下页面。

 

注：本文出自博客园 https://home.cnblogs.com/u/mdengcc/ ，转载请注明出处。