項(xiàng)目準(zhǔn)備

• 使用Vue CLI創(chuàng)建項(xiàng)目
• 加入Git管理
• 進(jìn)行初始化文件處理
  • 刪除src/assets/logo.png
  • 刪除src/components/HelloWorld.vue
  • 刪除src/views/About.vue
  • 刪除src/views/Home.vue
  • 修改src/router/index.js，去除掉route內(nèi)容，方便我們自己設(shè)置
  • 修改src/App.vue，只保留根路由出口
  • 添加src/services目錄，存放API請(qǐng)求模塊
  • 添加src/utils目錄，存放工具模塊

Vant組件庫

Vant是有贊團(tuán)隊(duì)開源的移動(dòng)端組件，業(yè)界主流的移動(dòng)端組件之一
目前Vant官方提供了Vue2版本，Vue3版本，和微信小程序版本，并由社區(qū)團(tuán)隊(duì)維護(hù)React版本
官網(wǎng):

https://vant-contrib.gitee.io/vant/#/zh-CN/

Github倉庫：

https://github.com/youzan/vant

安裝：

# Vue 2 項(xiàng)目，安裝 Vant 2：
npm i vant -S

# Vue 3 項(xiàng)目，安裝 Vant 3：
npm i vant@next -S

通過CDN安裝

<!-- 引入樣式文件 -->
<link
  rel="stylesheet"
  
/>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
...

通過腳手架安裝
利用圖形化界面進(jìn)行安裝，本質(zhì)上還是命令行
注意：要是執(zhí)行vue ui命令出現(xiàn)了spawn cmd ENOENT錯(cuò)誤提示，那么解決辦法是：
在用戶變量的PATH中添加 “%SystemRoot%\system32”

# 安裝 Vue Cli
npm install -g @vue/cli

# 創(chuàng)建一個(gè)項(xiàng)目
vue create hello-world

# 創(chuàng)建完成后，可以通過命令打開圖形化界面，如下圖所示
vue ui

添加完項(xiàng)目之后，選擇依賴-安裝依賴

import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

瀏覽器適配

Vant中的樣式默認(rèn)使用px為單位，如果需要使用rem單位，推薦使用以下兩個(gè)工具

• postcss-pxtorem是一款postcss插件，用于將單位轉(zhuǎn)為rem
• lib-flexible用于設(shè)置rem基準(zhǔn)值

lib-flexible

lib-flexible 用于動(dòng)態(tài)設(shè)置rem基準(zhǔn)值
1.安裝

npm i -S amfe-flexible

2.在main.js中加載執(zhí)行該模塊

import 'amfe-flexible'

通過瀏覽器開發(fā)者工具切換移動(dòng)設(shè)備，觀察html元素的font-size是否自動(dòng)發(fā)生了變化

postcss-pxtorem

用于將px設(shè)置為rem
1.安裝

npm i postcss-pxtorem -D

2.在項(xiàng)目根目錄創(chuàng)建.postcssrc.js文件，設(shè)置配置

module.exports = {
  plugins: {
    'autoprefixer': {
      // browsers: ['Android >= 4.0', 'iOS >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

設(shè)置測試代碼，在瀏覽器中查看是否能夠?qū)?code>px轉(zhuǎn)為rem
這里測試要注意三點(diǎn)

• 一是修改了配置文件之后要重啟serve才能達(dá)到預(yù)期的效果

• 二是如果使用的是vue2.x的項(xiàng)目腳手架工具構(gòu)建的項(xiàng)目，postcss的版本號(hào)不能在6以上，建議手動(dòng)在package.json內(nèi)部修改為5.1.1的版本

  
  
  測試之后已經(jīng)可以自動(dòng)更新為rem了
• 三是，不能轉(zhuǎn)換行內(nèi)樣式，要謹(jǐn)記

路由規(guī)則配置

初始化一下路由組件，在項(xiàng)目下創(chuàng)建這么幾個(gè)目錄

views
├── course 選課頁面
│ └── index.vue
├── error-page 錯(cuò)誤頁面
│ └── index.vue
├── learn 學(xué)習(xí)頁面
│ └── index.vue
├── login 登錄頁面
│ └── index.vue
└── user 用戶頁面
└── index.vue

然后在router/index.js中配置路由規(guī)則
首頁默認(rèn)為course頁面，也可以用組件導(dǎo)出的方式來使用

import Vue from 'vue'
import VueRouter from 'vue-router'

import Course from '@/views/course'

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: '',
    component: () => import(/* webpackChunkName: 'login' */'@/views/login')
  },
  {
    path: '/',
    name: 'course',
    component: Course
  },
  {
    path: '/learn',
    name: 'learn',
    component: () => import(/* webpackChunkName: 'learn' */'@/views/learn')
  },
  {
    path: '/user',
    name: 'user',
    component: () => import(/* webpackChunkName: 'user' */'@/views/user')
  },
  {
    path: '/*',
    name: 'error-page',
    component: () => import(/* webpackChunkName: 'error-page' */'@/views/error-page')
  }
]

const router = new VueRouter({
  routes
})

export default router

封裝請(qǐng)求模塊

封裝請(qǐng)求模塊，便于統(tǒng)一處理請(qǐng)求功能，安裝Axios

npm i axios

初始化axios，觀察接口文檔，將基地址:
http://edufront.lagou.com 設(shè)置給baseURL就可以了

import axios from 'axios'

const request = axios.create({
  baseURL: 'http://edufront.lagou.com'
})

export default request

隨便在App.vue測試一下功能，發(fā)送請(qǐng)求成功就算勝利

公共組件LayoutFooter

學(xué)習(xí)，選課，用戶都是有公共的底部導(dǎo)航，將導(dǎo)航封裝到公共組件，并且保存在src/components中
導(dǎo)航使用的是Vant的Tabbar組件，圖標(biāo)可以通過Icon組件來進(jìn)行設(shè)置
將這組件設(shè)置給src/components/LayoutFooter.vue，再設(shè)置路由跳轉(zhuǎn)

• to 屬性用于設(shè)置跳轉(zhuǎn)你的目標(biāo)路由對(duì)象，跟vue-router的to屬性是一樣的
  之后將這個(gè)組件作為公共組件添加到每一個(gè)views下的特定index.vue中，導(dǎo)入使用過即可

<template>
  <div class="layout-footer">
    <van-tabbar route>
        <van-tabbar-item replace to="/" icon="orders-o">選課</van-tabbar-item>
        <van-tabbar-item replace to="/learn" icon="desktop-o">學(xué)習(xí)</van-tabbar-item>
        <van-tabbar-item replace to="/user" icon="user-o">我</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'LayoutFooter'
}
</script>

<style lang="scss" scoped>
</style>

<template>
  <div class="course">
      <layout-footer></layout-footer>
  </div>
</template>

<script>
import LayoutFooter from '@/components/LayoutFooter'
export default {
  name: 'Course',
  components: {
    LayoutFooter
  }
}
</script>

<style lang="scss" scoped>

</style>

至此，搭建項(xiàng)目結(jié)構(gòu)到此結(jié)束