Vue2.5 去哪兒App項目學習【一】

時間 2021-04-05

標籤 css html vue webpack ios git github web ajax vue-cli 欄目 CSS 简体版

原文原文鏈接

項目前期準備

安裝Node.js
安裝vue-cli 腳手架構建工具
使用vue-cli腳手架建立工程

vue-cli建立的項目目錄結構

瞭解多頁應用與單頁應用

多頁應用

多頁應用由多個完整頁面構成，每次頁面跳轉，後臺都會返回一個新的HTML文檔。css

頁面切換慢是由於每一次切換頁面都須要發起一個HTTP請求，假設網絡較慢就會出現卡頓狀況。html

單頁應用

單頁應用由一個外殼頁面和多個頁面片斷構成。vue

用vue寫的項目是單頁應用，刷新頁面會請求一個HTML文件，切換頁面的時候，並不會發起新的請求一個HTML文件，只是頁面內容發生了變化。webpack

項目代碼的初始化——在移動設備上進行網頁的重構或開發

1.在/public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <title>travel</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

2.在 src/assets 中添加樣式初始化文件 reset.css ; border.css

3.本地引入取消延遲300毫秒的控件

npm install fastclick --saveios

4.在mian.js中引入初始化樣式文件及文件的使用

import fastClick from ‘fastclick’
import ‘./assets/reset.css’
import ‘./assets/border.css’

fastClick.attach(document.body)

項目實戰 - 旅遊網站首頁開發

header區域開發——Header.vue

本項目使用scss編寫css樣式
限制樣式只在當前頁面有用，使用scoped對css區域進行修飾。

scoped:在vue組件中，在style標籤上添加scoped屬性，以表示它的樣式做用於當下的模塊，很好的實現了樣式私有化的目的，這是一個很是好的機制。當一個style標籤擁有scoped屬性時，它的CSS樣式就只能做用於當前的組件,不會對其餘組件產生影響git

移動端佈局一般採用rem,因爲reset.css裏設置了html font-size:50px rem相對於50像素尺寸
能夠將常使用的CSS值設爲全局變量或全局方法

在styles文件夾中添加varibles.style和mixins.scss

例如：
設置如下變量
$bgColor: #00bcd4;
$darkTextColor : #333;
$headerHeight:0.86rem;

設置如下方法 實現溢出的文字省略號顯示

@mixin ellipsis() {

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

在vue.config.js文件中引入varibles.style文件.(注意：因爲scss-loader版本不一樣，loaderOptions 中 additionalData的鍵名也不一樣)

css: {

    loaderOptions: {

      scss: {

        additionalData: `@import "~@/assets/styles/varibles.scss";

        @import "~@/assets/styles/mixins.scss";`,

      }

    }

  }

直接使用全局變量或全局方法

background: $bgColor;
@include ellipsis();

使用輪播圖

在GitHub上搜索vue-awesome-swiper查看該插件與語法
安裝vue-awesome-swiper查看

cnpm install vue-awesome-swiper --savegithub

在main.js中引入vue-awesome-swiper，具體參考 vue-awesome-swiper

import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/swiper-bundle.min.css';
Vue.use(VueAwesomeSwiper /* { default options with global component } */);

完成輪播圖組件——Swiper.vue

<template>
  <div class="wrapper">
    <swiper ref="mySwiper" :options="swiperOptions" v-if="showSwiper">
      <swiper-slide v-for="item of list" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  props: {
    list: Array,
  },
  data() {
    return {
      swiperOptions: {
        loop: true,
        autoplay: 5000,
        pagination: '.swiper-pagination',
        clickable: true,
      },
    };
  },
  computed: {
    showSwiper() {
      return this.list.length;
    },
  },
};

</script>
<style scoped lang="scss">
// 深度做用選擇器 >>> 但若是是sass/less的話可能沒法識別，這時候須要使用 /deep/ 選擇器
/deep/.swiper-pagination-bullet-active {
  background-color: #fff !important;
}

.wrapper {
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 30.47%;
  background: #eee;

  .swiper-img {
    width: 100%;
  }
}

// .swiper-slide {
//   width: 3.75rem;
// }
</style>

此css樣式中：web

.wrapper {
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 30.47%;  
}

該樣式主要是防止網速過慢時頁面佈局的抖動，其含義是，wrapper 寬度 100%，高度由寬度的30.47% 自動撐開。ajax

圖標區域的開發

在iconfont中選擇圖標並下載至本地，在src/assets中放入iconfont目錄及iconfont.css
修改iconfont.css文件中src: url()路徑
在main.js中引入
```
import './assets/styles/iconfont.css';
```

使用 swiper 進行分頁，並利用computed進行計算：每8個圖表放一個頁面，實現自動構建多頁切換的功能

computed: {
    pages() {
      const pages = [];
      this.list.forEach((item, index) => {
        const page = Math.floor(index / 8);
        if (!pages[page]) {
          pages[page] = [];
        }
        pages[page].push(item);
      });
      return pages;
    },
  },

Ajax獲取首頁數據

使用 axios 進行 ajax 請求

npm install axios --savevue-cli

處理請求的api在開發環境進行重定向

將靜態資源放在public，而後創建index.json文件（注意：vue cli 3以上沒有static文件本地文件要放在public）

在vue.config.js中添加

devServer: {
    // webpack-dev-serve提供的
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite: {
          '^/api': '/mock',
        }
      }
    }
  }

使用ajax傳遞數據

在Home.vue進行引入：import axios from ‘axios’，調用其餘vue頁面將參數傳遞進去

<template>
  <div>
    <home-header :city="city"></home-header>
    <home-swiper :list="swiperList"></home-swiper>
    <home-icons :list="iconList"></home-icons>
    <home-recommend :list="recommendList"></home-recommend>
    <home-weekend :list="weekendList"></home-weekend>
  </div>
</template>

<script>
import axios from 'axios';
import HomeHeader from './components/Header.vue';
import HomeSwiper from './components/Swiper.vue';
import HomeIcons from './components/Icons.vue';
import HomeRecommend from './components/Recommend.vue';
import HomeWeekend from './components/Weekend.vue';

export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeWeekend,
  },
  data() {
    return {
      city: '',
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendList: [],
    };
  },
  methods: {
    getHomeInfo() {
      axios.get('/api/index.json').then(this.getHomeInfoSucc);
    },
    getHomeInfoSucc(res) {
      // eslint-disable-next-line no-param-reassign
      res = res.data;
      if (res.ret && res.data) {
        const { data } = res;
        this.city = data.city;
        this.swiperList = data.swiperList;
        this.iconList = data.iconList;
        this.recommendList = data.recommendList;
        this.weekendList = data.weekendList;
      }
    },
  },
  mounted() {
    this.getHomeInfo();
  },

};

</script>

被調用的頁面接收參數並進行使用

props: {
    list: Array,
  },


<swiper-slide v-for="item of list" :key="item.id">
     <img class="swiper-img" :src="item.imgUrl">
</swiper-slide>

旅遊網站首頁效果圖

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。