笔记栈
  • 接口调用传参
    • query ：查询字符串 users?id=123
    • body：请求体，除了get请求，其他方式需要用请求体传递参数
    • 路径参数：Restful风格，直接通过路径传递参数 users/123/456
  • 路由参数传递
    • query users?id=123
    • Restful users/123 (this.$route.params.id)
    • props
      • props值 true
      • props值 对象
      • props值 函数
axios({
  method: 'get',
  url: '',
  data: body
  params: query
})

# 项目初始化

首先，黑马头条移动端是一个IT资讯移动web应用，有着和今日头条一样的资讯浏览体验。

主要功能：资讯列表、标签页切换，文章举报，频道管理、离线频道，文章详情、阅读记忆，关注功能、点赞功能、评论功能、回复评论、搜索功能、登录功能、个人中心、编辑资料、小智同学。

# 项目业务分析

  • 项目业务功能分析
  • 项目技术栈
    • vue 核心vue
    • vue-router 路由插件
    • vuex 状态管理插件
    • axios 请求插件
    • json-bigint 最大安全数值处理
    • vant 移动组件库(有赞)
    • amfe-flexible rem适配
  • 开发依赖
    • babel ES转换器
    • less css预处理器
    • postcss css后处理器
    • vue-cli vue项目脚手架

# 项目初始化

目标：基于Vue脚手架初始化项目

vue create hm-toutiao-mobile-123
  • 初始化时选择router/vuex/postcss/less/eslint
  • git init
  • git add .
  • git commit -m '初始化版本'
  • git remote add origin 仓库地址
  • git push -u origin master

# 调整项目目录结构

目标：根据功能模块调整项目的目录结构

├─api               #接口函数（封装接口调用相关模块）
├─assets            #静态资源（静态资源）
├─components        #公用组件（被重复利用的组件）
├─styles            #less代码（公共样式）
├─utils             #工具模块（封装一些通用的js模块）
└─views             #路由页面
    ├─home          #首页模块
    ├─video         #视频模块
    ├─question      #问答模块
    ├─user          #用户模块
    └─Layout.vue    #公用布局
├─App.vue           #根组件
├─router            #路由文件
|-main.js           #项目的入口文件
└─store             #状态文件

# 项目代码git管理

目标：基于git管理项目代码

https://gitee.com/byte1031/hm-toutiao-mobile-119.git

  1. 创建远程仓库

    • 图形界面创建

  2. 提交代码

    • git init

    • git add .

    • git commit -m '初始化版本'

  3. 推送到远程仓库

    • git remote add origin 仓库地址
    • git push -u origin master

如果希望提交空目录，需要在目录中创建一个.gitkeep文件，如果后续在该目录写代码了，那么.gitkeep文件可以删除。

# Vant基本使用

目标：属性Vant组件库的基本使用

vant (opens new window)

  • 安装依赖包
npm i vant
  • 导入包和样式
import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)
  • 使用组件
<van-button type="primary">主要按钮</van-button>

以上做法是完整导入，在项目开发阶段使用，配置方便节省时间，将来上线的时候可以使用按需导入。

# 屏幕适配配置

  • 百分比（自适应宽度，不处理高度）
  • 自适应（自适应宽度，不处理高度）
  • 响应式（多端适配：PC端、移动端、IPAD端。。。。）
  • Rem适配：针对移动适配（页面在不同的尺寸的手机上等比缩放-包括宽度和高度）
    • 设置html元素的字体大写 font-size = 100px (1rem就是font-size的大小)
    • 屏幕尺寸 375px === 3.75rem
    • 屏幕尺寸 414px === 4.14rem
    • 如果规定屏幕整个宽度是 100rem
      • 375/10 = 37.5px
      • 414/10 = 41.4px

Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具

postcss-pxtorem (opens new window) 是一款 postcss 插件，用于将px单位转化为 rem

lib-flexible (opens new window) 用于动态设置 rem 基准值

  • 安装依赖包
    • postcss-pxtorem
    • lib-flexable
npm install postcss-pxtorem@5.1.1 -D
npm i amfe-flexible -S
  • 配置postcss.config.js
    • rootValue 表示以该值作为rem的基准值（vant最佳显示状态）
    • propList那些css属性的像素值转换为rem单位
module.exports = {
  plugins: {
    // 控制样式属性前面自动添加前缀
    autoprefixer: {},
    'postcss-pxtorem': {
      // html的font-size规定为37.5px
      // 为什么是37.5？因为iPhone6的尺寸是375px
      // 现在的主流设计稿是那个手机的尺寸？iphone6
      rootValue: 37.5,
      // 控制那些样式的属性需要转换
      propList: ['*'],
    },
  },
}
  • 导入
import 'amfe-flexible'

注意：

  1. rootValue 是转换px的基准值，参考设备iPhone6，设备宽度375px。

  2. flexible 在iPhone6设备设置的 html--->font-size 也为37.5px 。

  3. 但是 设计稿 尺寸750px 大小，所以在设计稿量取的尺寸使用时候需要 除以2 。

    400 X 200 --> 200 X 100