Vue项目基础总结

前言

最近学习了两个入门项目, 收获了很多的东西。在这里总结一下，也分享给大家。

移动端项目

移动端适配

• 这里提供一种方案，但不是唯一的方案

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

1. 安装
   npm i amfe-flexible
2. 在 main.js 中加载执行该模块
   import 'amfe-flexible'

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

1. 安装
   npm install postcss-pxtorem -D
2. 然后在项目根目录中创建 .postcssrc.js 文件

/**
 * 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 }) {
        // 在 750px 的设计稿使用 vant 时
        return file.includes('vant') !== -1 ? 37.5 : 75
      },
      propList: ['*']
    }
  }
}

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

注意

• 该插件不能转换行内样式中的 px，例如 <div style="width: 200px;"></div>

封装请求模块

1. 安装 axios
2. 基础封装 请求

import axios from "axios"

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

// 添加请求拦截器
request.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    const { user } = store.state
    if (user && user.token) {
      config.headers.Authorization = `Bearer ${user.token}`
    }
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

export default request

优化封装本地存储操作模块

export const getItem = name => {
  const data = window.localStorage.getItem(name)
  try {
    return JSON.parse(data)
  } catch (err) {
    return data
  }
}

export const setItem = (name, value) => {
  if (typeof value === 'object') {
    value = JSON.stringify(value)
  }
  window.localStorage.setItem(name, value)
}

export const removeItem = name => {
  window.localStorage.removeItem(name)
}

登录功能

业务逻辑（需求, 效果）

• 点击按钮 => 登录 => 登录成功，跳到下一个页面 || 登录失败，会弹出失败提示

解决思路

• 给按钮绑定点击事件 => 事件处理函数中{ 发送请求(携带表单校验的数据) => 登录成功，跳转到新的路由 || 登录失败，给一个反馈提示 }

验证码处理

业务逻辑

• 手机号填写正确 => 点击发送验证码按钮 => 显示定时器 => 时间走完，恢复到初始的状态
• 手机号填写不正确 => 点击发送验证码按钮 => 提示手机号填正确

解决思路

• 给发送验证码按钮 绑定点击事件  => 事件处理函数{ 校验手机号 => 检验通过, 显示倒计时组件 || 校验不通过, 提示反馈,return => 调用发送验证码的接口 => 接口调用成功,成功反馈 || 接口调用失败, 失败反馈