• Home：首頁根元件，用於管理子元件以及資料請求

  • <template>：子元件管理

    • 引入所有子元件，並進行屬性繫結(父元件向子元件傳遞資料的方式)

        <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 HomeHeader from './components/Header'
        import HomeSwiper from './components/Swiper'
        import HomeIcons from './components/Icons'
        import HomeRecommend from './components/Recommend'
        import HomeWeekend from './components/Weekend'
      

    • 子元件宣告

        components: {
            HomeHeader,
            HomeSwiper,
            HomeIcons,
            HomeRecommend,
            HomeWeekend
      	},
      

    • 引入axios庫

        // 引入axios庫
        import axios from 'axios'	
      

    • 關於axios：axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，它本身具有以下特徵：

        從瀏覽器中建立 XMLHttpRequest
        從 node.js 發出 http 請求
        支援 Promise API
        攔截請求和響應
        轉換請求和響應資料
        取消請求
        自動轉換JSON資料
        客戶端支援防止 CSRF/XSRF	
       
      

    • 安裝axios

        npm install axios			
      

    • ajax資料請求及成功回撥函式

      • 資料接收列表初始化：對應<template>中繫結的屬性名稱

          data() {
              return {
                city: '',
                swiperList: [],
                iconList: [],
                recommendList: [],
                weekendList: []
              }
          },
        

      • 在生命週期鉤子函式mounted中進行資料請求

          // 藉助生命週期函式進行ajax請求
          mounted() {
          	this.getHomeInfo()
          }
        

      • ajax請求以及成功回撥

          // 傳送ajax請求
          getHomeInfo() {
            axios.get('/api/index.json').then(this.getHomeInfoSucc)
          },
          // ajax成功回撥
          getHomeInfoSucc(res) {
            res = res.data
            // ret 表徵請求是否成功True or False，只有請求成功並且資料域不為空進行資料列表賦值
            if (res.ret && res.data) {
          	// 獲取成功回撥物件的data列表
              const data = res.data
              this.city = data.city
              this.swiperList = data.swiperList
              this.iconList = data.iconList
              this.recommendList = data.recommendList
              this.weekendList = data.weekendList
            }
          }
        

      • TIPS：關於ajax請求路徑的定義，專案中採用的訪問靜態json檔案(static/mock)的方式，實際環境中可能請求路徑可能是類似/api/xx的請求路徑，在專案中可以進行專案路徑的路由配置。

          座標：./config/index.js
          // Paths
          assetsSubDirectory: 'static',
          assetsPublicPath: '/',
          proxyTable: {
            // 代理工具中資料請求的設定，將所有的/api請求轉發至當前專案static/mock路徑下
            '/api': {
              target: 'http://localhost:8080',
              pathRewrite: {
          	  // 此處可以配置請求路徑的路由
                '^/api': '/static/mock'
              }
            }
          },
        

    • 首頁截圖
      

• Header

• iconfont:圖示向量庫引入

   	建立目錄：src/assets/styles/iconfont
   	以上新建目錄儲存在http://www.iconfont.cn/選定圖示的字型檔案
   	在目錄：src/assets/styles 引入iconfont.css檔案
  

開啟iconfont.css檔案，修改圖示字型檔案的配置地址後即可使用：

在入口檔案 main.js 新增iconfont.css 的引入：

		// 引入iconfont 圖表向量庫
		import 'styles/iconfont.css'

使用的時候我們採用圖示對應的編碼即可直接引用圖示icon：

• Stylus：Stylus 是一種新型語言，可以建立健壯的、動態的、富有表現力的CSS。是一個CSS的預處理框架。Stylus預設使用 .styl 的作為副檔名，支援多樣性的CSS語法。

  安裝Stylus：

   	npm install stylus stylus-loader --save-dev
  

  使用Stylus：

  • 在.vue檔案中style塊中使用：在style標籤上新增lang="stylus"即可，新增scoped可以時當前樣式元件獨立性。

     	<style scoped lang="stylus">
         img
           width: 60px;
           height: 60px;
           display: inline-block;
           border-radius: 30px;
     	</style>
    

  • 外部引用.styl檔案

      座標：src/assets/styles/ **建立varibles.styl外部檔案，並填入一下內容：$bgColor = #00bcd4**
    

  在<style>標籤中引用外部檔案中的樣式變數，如下圖所示：
  

• <template>
  

• <script>：子元件採用props接收父元件的傳值，在這裡進行了傳遞引數型別的判斷。

   	<script>
   	export default {
   	  name: 'HomeHeader',
   	  props: {
   	    city: String
   	  }
   	</script>
  

• Swiper：輪播圖區域，該區域引用了vue-awesome-swiper外掛，並對接收資料進行分組輪播展示。

• vue-awesome-swiper：基於Vue改寫的Swiper外掛，用於在vue專案中的輪播效果實現。

  這裡需要說明一點，專案中使用的是2.6.7版本，由於當前最新的Swiper4會有些許問題，這裡選取了穩定版本。

  以下引用參考自：https://github.com/surmon-china/vue-awesome-swiper

  關於vue-awesome-swiper的使用以及API介紹可以參考：https://segmentfault.com/a/1190000014609379

  安裝vue-awesome-swiper外掛：

   	npm install [email protected] --save
  

  入口檔案main.js引入vue-awesome-swiper外掛：

   	// 1. 引入vue-awesome-swiper
   	import VueAwesomeSwiper from 'vue-awesome-swiper'
   	
   	// 2. vue-awesome-swiper所依賴的CSS樣式
   	import 'swiper/dist/css/swiper.css'
  
   	// 3. 全域性使用vue-awesome-swiper
   	Vue.use(VueAwesomeSwiper)
  

  vue-awesome-swiper的使用：例子參考官方SPA

   	<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
       <!-- slides -->
       <swiper-slide>I'm Slide 1</swiper-slide>
       <swiper-slide>I'm Slide 2</swiper-slide>
       <swiper-slide>I'm Slide 3</swiper-slide>
       <swiper-slide>I'm Slide 4</swiper-slide>
       <swiper-slide>I'm Slide 5</swiper-slide>
       <swiper-slide>I'm Slide 6</swiper-slide>
       <swiper-slide>I'm Slide 7</swiper-slide>
       <!-- Optional controls -->
       <div class="swiper-pagination"  slot="pagination"></div>  //頁碼
       <div class="swiper-button-prev" slot="button-prev"></div> //下一項
       <div class="swiper-button-next" slot="button-next"></div> //上一項
       <div class="swiper-scrollbar"   slot="scrollbar"></div>   //滾動條
     </swiper>
  

• <template>
  

• <script>：通過props接收父元件資料列表，data中配置了swiperOption的屬性，開啟了輪播圖座標以及迴圈輪播，通過計算屬性showSwiper控制輪播元件的資料渲染。

   	<script>
   	export default {
   	  name: 'HomeSwiper',
   	  props: {
   	    list: Array
   	  },
   	  data() {
   	    return {
   	      swiperOption: {
   	        // 開啟輪播圖座標展示
   	        pagination: '.swiper-pagination',
   	        // 開啟迴圈輪播
   	        loop: true
   	      }
   	    }
   	  },
   	  computed: {
   	    showSwiper() {
   		  // 通過資料列表的長度判斷是否存在資料
   	      return this.list.length
   	    }
   	  }
   	}
   	</script>