前言

  继续看上期的教程

多页应用 VS 单页应用

多页应用
优缺点

  多页应用每一次范文都会从服务器返回HTML文件

单页应用

  减少Http请求,不利于搜索引擎抓取
  通过服务器渲染可以解决单页应用的一些问题

vue cli 环境配置

viewport

  设置移动端的显示效果,使页面无法缩放。

@

  路径标识 @ 表示 src 文件夹路径

css引用

  引用 reset.css 确保移动端上所有设备的初始 css 是统一的
  引用 border.css 确保移动设备渲染边框都是占用一个像素的

fastclick
fastclick

  为了兼容双击命令,浏览器默认的单机延迟为 300 ms
  这可能会对移动端的交互体验产生印象,因此可以安装 fastclick 库 来解决问题。

路径

  webpack设置可以配置路径 @ 符号路径也源于此

路径

  修改webpack配置需要重启服务器

ajax网络请求

替换网络路径

  通过 webpack-dev-server 的配置可以实现将 api 的地址替换为 /static/mock 方便我们读取json进行接口测试

swiper

  在 swiper 中通过 ajax 获取数据,会因为组件提前生成导致数据生成的时候不在第一个轮播图上显示
  通过 v-if 可以实现判断数据再去实现轮播图

swiper

  HTML中尽量减少逻辑层的代码,可以将相关代码写到函数当中