項目準備

• 使用Vue CLI創(chuàng)建項目
• 加入Git管理
• 進行初始化文件處理
  • 刪除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請求模塊
  • 添加src/utils目錄退唠，存放工具模塊

Vant組件庫

Vant是有贊團隊開源的移動端組件箱锐，業(yè)界主流的移動端組件之一
目前Vant官方提供了Vue2版本辫呻，Vue3版本躏尉，和微信小程序版本蚯根，并由社區(qū)團隊維護React版本
官網(wǎng):

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

Github倉庫：

https://github.com/youzan/vant

安裝：

# Vue 2 項目，安裝 Vant 2：
npm i vant -S

# Vue 3 項目胀糜，安裝 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>
...

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

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

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

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

添加完項目之后，選擇依賴-安裝依賴

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

Vue.use(Vant)

瀏覽器適配

Vant中的樣式默認使用px為單位允趟，如果需要使用rem單位恼策，推薦使用以下兩個工具

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

lib-flexible

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

npm i -S amfe-flexible

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

import 'amfe-flexible'

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

postcss-pxtorem

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

npm i postcss-pxtorem -D

2.在項目根目錄創(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
這里測試要注意三點

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

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

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

路由規(guī)則配置

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

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

然后在router/index.js中配置路由規(guī)則
首頁默認為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

封裝請求模塊

封裝請求模塊看疗，便于統(tǒ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ā)送請求成功就算勝利

公共組件LayoutFooter

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

• to 屬性用于設(shè)置跳轉(zhuǎn)你的目標路由對象，跟vue-router的to屬性是一樣的
  之后將這個組件作為公共組件添加到每一個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>

至此蒋纬，搭建項目結(jié)構(gòu)到此結(jié)束