Vue 項目實戰系列（二）

時間 2019-11-22

標籤 vue 項目實戰系列简体版

原文原文鏈接

　　上一章節咱們已經把項目的初始化工做完成了，接下來咱們再來進行具體的代碼編寫。這一節咱們將完成以下的頁面。css

　　咱們在src/目錄下新建一個views文件夾，存放咱們的主要頁面文件。目錄結構以下：html

　　cinema.vue以下：vue

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

　　movie.vue以下：git

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

　　me.vue以下：github

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

　　這裏三個至關一級路由的路由頁面就有了。而後再看看具體的footerNav這個組件如何寫。一個組件通常包含三個部分：web

<template>
　　html部分
</template>
<script>
　　js代碼部分
</script>
<style>
　　css樣式部分
</style>

先看看template部分的代碼：vue-router

<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目錄下。npm

script部分以下：app

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

            }
        },
        computed: {
            route () {
                return this.$route.path
            }
            //等價於 route : function(){
            //            return this.$route.path
            //        }
            //這種寫法
            //
        }
    }
</script>

再加上style部分這個組件就算完成了。最終footerNav.vue代碼以下：ide

<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>

View Code

因爲這個部分是在整個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>

View Code

而後再對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
    }
  ]
})

View Code

最後一步工做進行在整個項目的入口文件根目錄下的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>