項目--1

一、回顧

• 全局註冊組件，局部註冊組件
• 組件模板、定義組件、註冊組件、使用組件
• 組件間傳值
• 動態組件、keep-alive
• cnpm i @vue/cli@3 -g
• vue create myapp

二、熟悉vue項目目錄結構

-node-modules 依賴文件
-public 基本文件，包含頁面，圖片，小圖標
-src 項目主場
-tests 測試
.editorconfig 編輯器配置文件
.gitignore git忽略文件
babel.config.js babel配置文件
cypress.json 插件
package.json 描述文件

三、src 目錄結構

-assets 靜態資源文件
-components 自定義的組件
-router 路由文件
-store 狀態管理器
-views 頁面㢟
App.vue 入口頁面結構
main.js 入口文件

四、運行項目

cnpm run serve

.vue 文件 --- vue的單文件組件，內含組件的結構、組件的邏輯、組件的樣式

4.1 修改App.vue的頁面結構

<template>
  <div class="container">
    <div class="box">
      <header class="header">頭部</header>
      <div class="content">內容</div>
    </div>
    <footer class="footer">底部</footer>
  </div>
</template>

4.2 添加頁面的基本樣式 App.vue

• 複製lib文件至本身的項目的src --- 來源於 去哪網網的項目

<style lang="scss">
@import '@/lib/reset.scss'; // 引入重置樣式，@表示的就是src目錄
html, body, .container {
  @include rect(100%, 100%); // width: 100%;height: 100%;
}

.container {
  // 建議使用彈性盒佈局
  @include flexbox(); // display: -webkit-box;display: -ms-flexbox;display: flex;
  @include flex-direction(column); // -webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;
  .box {
    @include flex(); // -webkit-box-flex: 1;-ms-flex: 1;flex: 1;width: .1px;
    @include rect(100%, auto);
    @include flexbox();
    @include flex-direction(column);
    .header {
      @include rect(100%, 0.44rem);
      @include background-color(#f66);
    }
    .content {
      @include flex();
      @include rect(100%, auto);
      @include overflow(); // overflow: auto;-webkit-overflow-scrolling: touch;
    }
  }
  .footer {
    @include rect(100%, 0.5rem);
    @include background-color(#efefef);
  }
}
</style>

4.3 編寫底部選項卡以及樣式

<footer class="footer">
  <ul>
    <li>
      <span></span>
      <p>首頁</p>
    </li>
    <li>
      <span></span>
      <p>分類</p>
    </li>
    <li>
      <span></span>
      <p>購物車</p>
    </li>
    <li>
      <span></span>
      <p>個人</p>
    </li>
  </ul>
</footer>

.footer {
  @include rect(100%, 0.5rem);
  @include background-color(#efefef);
  ul {
    @include rect(100%, 100%);
    @include flexbox();
    li{
      @include flex();
      @include rect(auto, 100%);
      @include flexbox(); // 一下幾句實現的是元素的水平垂直居中
      @include flex-direction(column);
      @include justify-content(); // -webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;
      @include align-items(); // -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    }
  }
}

五、路由

地址輸入欄不一樣，顯示不一樣的頁面

5.1 先建立各個頁面 src/views

• home/index.vue
• kind/index.vue
• cart/index.vue
• user/index.vue

以 home/index.vue 爲例,複製App.vue文件中的 頭部和內容區域的代碼

<template>
  <div class="box">
    <header class="header">首頁頭部</header>
    <div class="content">首頁內容</div>
  </div>
</template>

5.2 配置路由文件 router/index.js

const routes = [
  { // 路由跟組件時映射關係
    path: '/home',
    name: 'home',
    // 路由的懶加載
    component: () => import('@/views/home/index.vue')
  },
  {
    path: '/kind',
    name: 'kind',
    component: () => import('@/views/kind/index.vue')
  },
  {
    path: '/cart',
    name: 'cart',
    component: () => import('@/views/cart/index.vue')
  },
  {
    path: '/user',
    name: 'user',
    component: () => import('@/views/user/index.vue')
  }
]

5.3 使路由文件生效

• App.vue部分把 原先的 頭部和內容區域的代碼刪除，使用 代替

<!-- <div class="box">
    <header class="header">頭部</header>
    <div class="content">內容</div>
  </div> -->
  <router-view></router-view>

router-view 若是路由是 /home，此處就爲首頁的組件
瀏覽器輸入 /home /kind /cart /user 查看效果

5.4 路由的重定向 ---- 什麼都不輸入，默認顯示首頁

• 修改 router/index.js，添加劇定向,在配置文件的開始添加

const routes = [
  { // 開始添加劇定向
    path: '/',
    redirect: '/home'
  },
  { // 路由跟組件時映射關係
    path: '/home',
    name: 'home',
    // 路由的懶加載
    component: () => import('@/views/home/index.vue')
  },
  ....
]

5.5 點擊切換路由，路由映射頁面 ---- 點擊切換路由，路由映射頁面

• 修改App.vue， 添加點擊連接
• vue 獨有的語法 tag="" ---- 生成目標標籤,默認生成 a 標籤

<footer class="footer">
  <ul>
    <router-link to="/home" tag="li">
      <span></span>
      <p>首頁</p>
    </router-link>
    <router-link to="/kind" tag="li">
      <span></span>
      <p>分類</p>
    </router-link>
    <router-link to="/cart" tag="li">
      <span></span>
      <p>購物車</p>
    </router-link>
    <router-link to="/user" tag="li">
      <span></span>
      <p>個人</p>
    </router-link>
  </ul>
</footer>

5.6 設定選中的樣式

• App.vue中給底部的li添加選中的樣式

li{
  @include flex();
  @include rect(auto, 100%);
  @include flexbox(); // 一下幾句實現的是元素的水平垂直居中
  @include flex-direction(column);
  @include justify-content(); // -webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;
  @include align-items(); // -webkit-box-align: center; -ms-flex-align: center; align-items: center;

  &.router-link-active { // 審查元素得知選中的樣式
    @include color(#f66);
  }
}

5.7 頁面底部放置小圖標

http://iconfont.cn/

• 選圖標，加購物車，添加至項目 -》font-class -》複製連接
• public/index.html 引入css文件

<title>myapp</title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_1476238_m5fuchmwska.css">

在 App.vue 中添加圖標

<footer class="footer">
  <ul>
    <router-link to="/home" tag="li">
      <span class="iconfont icon-fonts-shouye"></span>
      <p>首頁</p>
    </router-link>
    <router-link to="/kind" tag="li">
      <span class="iconfont icon-icon"></span>
      <p>分類</p>
    </router-link>
    <router-link to="/cart" tag="li">
      <span class="iconfont icon-gouwuche"></span>
      <p>購物車</p>
    </router-link>
    <router-link to="/user" tag="li">
      <span class="iconfont icon-wode"></span>
      <p>個人</p>
    </router-link>
  </ul>
</footer>

• 修改 底部的圖標和字體樣式

li{
  @include flex();
  @include rect(auto, 100%);
  @include flexbox(); // 一下幾句實現的是元素的水平垂直居中
  @include flex-direction(column);
  @include justify-content(); // -webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;
  @include align-items(); // -webkit-box-align: center; -ms-flex-align: center; align-items: center;

  &.router-link-active {
    @include color(#f66);
  }

  span {
    @include font-size(0.24rem);
  }
  p {
    @include font-size(0.12rem);
    @include margin(-5px 0 0);
  }
}

六、首頁面添加 產品的列表

可能多出會使用到，建議封裝爲 組件

6.1 components/Prolist.vue ---- 組件首字母大寫

<template>
  <ul class="prolist">
    <li class="proitem">
      <div class="itemimg">
        <img src="" alt="">
      </div>
      <div class="iteminfo">
        <h2>標題</h2>
      </div>
    </li>
  </ul>
</template>

6.2 首頁面引入這個 列表組件，註冊組件、使用組件 views/home/index.vue

es6的模塊化

暴露 export default {}
引入 import MO from './sss'

<template>
  <div class="box">
    <header class="header">首頁頭部</header>
    <div class="content">
      <!-- 使用組件 -->
      <Prolist />
    </div>
  </div>
</template>

<script>
// 引入列表的組件  ---- es6中的模塊化
import Prolist from '@/components/Prolist.vue'
export default {
  // 註冊組件
  components: {
    // Prolist: Prolist
    Prolist
  }
}
</script>

6.3 設置列表的樣式

<style lang="scss">
@import '@/lib/reset.scss';
.prolist {
  @include rect(100%, auto);
  .proitem {
    @include rect(100%, 1rem);
    @include border(0 0 1px 0, #efefef, solid); // 設定的是一個物理像素
    @include flexbox();
    .itemimg {
      @include rect(1rem, 1rem);
      img {
        @include rect(0.9rem, 0.9rem);
        @include border(1px, #f66, solid);
        @include margin(0.05rem);
        @include display(block);
      }
    }
    .iteminfo {
      @include flex();
    }
  }
}
</style>

七、數據請求

cnpm i axios -S

7.1 首頁面請求數據，傳遞值給子組件，子組件負責渲染

<script>
import axios from 'axios'
// 引入列表的組件  ---- es6中的模塊化
import Prolist from '@/components/Prolist.vue'
export default {
  // 註冊組件
  components: {
    // Prolist: Prolist
    Prolist
  },
  data () {
    return {
      prolist: []
    }
  },
  created () {
    axios.get('https://47.103.82.2/douban').then(res => {
      this.prolist = res.data
    })
  }
}
</script>

<Prolist :prolist="prolist"/>

Prolist.vue 接收數據而且渲染

<template>
  <ul class="prolist">
    <li class="proitem" v-for="item of prolist" :key="item.id">
      <div class="itemimg">
        <img :src="item.images.small" alt="">
      </div>
      <div class="iteminfo">
        <h2>{{ item.title }}</h2>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  props: ['prolist']
}
</script>

public/index.html 添加meta標籤

<meta name="referrer" content="no-referrer">