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