项目基本结构

iconfont-阿里巴巴矢量图标库

直接在/public/index.html里面引入样式

一种方式是将 SVG 图标 包装为 Vue 组件来使用。

一种方式是将 SVG 制作为字体图标来使用：

使用 Vant.js 移动端组件库

1、安装 Vant

1
npm i vant

2、在 main.js 中加载注册 Vant 组件

1
2
3
4
5
import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

3、查阅文档使用组件

移动端REM适配

一、使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小）

1、安装

1
2
# yarn add amfe-flexible
npm i amfe-flexible

2、然后在 main.js 中加载执行该模块

1
import 'amfe-flexible'

最后测试：在浏览器中切换不同的手机设备尺寸，观察 html 标签 font-size 的变化。

二、使用 postcss-pxtorem 将 px 转为 rem

1、安装

1
2
3
# yarn add -D postcss-pxtorem
# -D 是 --save-dev 的简写
npm install postcss-pxtorem -D

2、然后在项目根目录中创建 .postcssrc.js 文件

.postcssrc.js 是 PostCSS 的配置文件。

PostCSS 是一个处理 CSS 的处理工具，本身功能比较单一，它主要负责解析 CSS 代码，再交由插件来进行处理，它的插件体系非常强大，所能进行的操作是多种多样的，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/**
 * PostCSS 配置文件
 */

module.exports = {
  // 配置要使用的 PostCSS 插件
  plugins: {
    // 配置使用 autoprefixer 插件
    // 作用：生成浏览器 CSS 样式规则前缀
    // VueCLI 内部已经配置了 autoprefixer 插件
    // 所以又配置了一次，所以产生冲突了
    // 'autoprefixer': { // autoprefixer 插件的配置
    //   // 配置要兼容到的环境信息
    //   browsers: ['Android >= 4.0', 'iOS >= 8']
    // },

    // 配置使用 postcss-pxtorem 插件
    // 作用：把 px 转为 rem
    'postcss-pxtorem': {
      rootValue ({ file }) { 
        return file.indexOf('vant') !== -1 ? 37.5 : 75 // 根据条件设置
      }, // 表示根元素字体大小，它会根据根元素大小进行单位转换
      propList: ['*'] // 用来设定可以从 px 转为 rem 的属性
    }
  }
}

3、配置完毕，重新启动服务

最后测试：刷新浏览器页面，审查元素的样式查看是否已将 px 转换为 rem。

封装请求模块

1、安装 axios

1
npm i axios

2、创建 src/plugins/request.js

1
2
3
4
5
6
7
8
9
10
/**
 * 封装 axios 请求模块
 */
import axios from "axios"

const request = axios.create({
  baseURL: "http://ttapi.research.itcast.cn/" // 基础路径
})

export default request

3、如何使用

  • 方式一（简单方便，但是不利于接口维护）：我们可以把请求对象挂载到 Vue.prototype 原型对象中，然后在组件中通过 this.xxx 直接访问
  • 方式二（推荐）：我们把每一个请求都封装成每个独立的功能函数，在需要的时候加载调用，这种做法更便于接口的管理和维护

处理用户信息

存储在本地中 在 src/store/index.js 中 利用vuex实现共享

封装本地存储模块