Vue实战 - 项目

一、需求分析与评估

页面有哪一些？

  1. 首页，各种漫画推荐
  2. 分类页面
  3. 排行榜页面
  4. VIP专区页面
  5. 历史页面
  6. 收藏页面
  7. 个人中心页面
  8. 关于页面
  9. 反馈页面
  10. 登陆、注册页面
  11. 搜索页面
  12. 搜索详情页
  13. 漫画详情页面

  14. 列表页面

    时间点评估

  15. 最终时间：一周

  16. 分析各个页面需要的时间，先做完所有的静态页面。（静态页面一天4-5个，需要三天做完）
  17. 实现业务逻辑（一个做5个页面的逻辑，也需要3天）
  18. 与后端联调（一天做五个页面的联调，也需要3天）

二、创建项目

三、与远程仓库关联

四、路由架子给搭建起来

alt + shift + f 可以启用格式化工具 推荐使用Vetur进行格式化

解决格式化问题

package.json中

  1.  "lint": "vue-cli-service lint"

执行：

  1. $ npm run lint

五、实现具体页面

1. 使用 postcss-pxtorem 来自动转换代码中的 px 单位

postcss- pxtorem 是 postcss 的一款插件

@vue/cli 脚手架工具创建的 vue 项目，默认就继承了 postcss 在里面， 并且使用了一款 autoprefixer 插件（可以自动去做一些兼容性的问题）

现在使用 postcss 来用上两款插件 autoprefixer postcss-pxtorem
**

  1. 项目根目录下创建一个 postcss-config.js 文件

  2. 下载一些插件

    1. $ npm install autoprefixer postcss-pxtorem --save -dev

  3. 配置 postcss.config.js 中 plugins 选项

  1. module.exports = {
  2.   plugins: {
  3.     autoprefixer: {
  4.       // 不需要设置这个选项，它会自动去使用 .browserslistrc 这个文件的配置项
  5.       // browsers: ['Android >= 4.0', 'iOS >= 8'],
  6.     },
  7.     'postcss-pxtorem': {
  8.       rootValue: 37.5,
  9.       propList: ['*'],
  10.     },
  11.   },
  12. };

.browserslistrc 文档API

  1. 项目最大宽的限制
    1. 修改base.scss
      1. html, body, #app {
      2. // 这里的px单位，不希望被转换成rem
      3. // 只需要px => PX
      4. max-width: 540PX;
      5. height:  100%;
      6. margin: auto;
      7. }
      b. 修改flexible.js
      1. function setRemUnit () {
      2. //限制最大宽度为540
      3. var clientWidth = Math.min(docEl.clientWidth, 540);
      4. var rem = clientWidth / 10
      5. docEl.style.fontSize = rem + 'px'
      6. }

2. 使用一段 js 代码来给 html 元素设置fontSize值，并且能在屏幕尺寸发生变化的时候动态修改html元素的 fontSize 值。

lib-flexible

问题： postcss 是什么？

是一个用 JavaScript 工具和插件转换 CSS 代码的工具 文档API

六、实现轮播图

  1. 下载swiper到本地
  1. $ sudo cnpm i swiper -D

swiper文档

  1. 修改第三方的样式的时候，发现修改不了，原因是 scoped引起的。

    解决方案：将对第三方的样式修改，重新提供一个scoped的style里面就好

七、组件封装

一、swiper组件

问题1：组件复用的问题

问题的原因： new Swiper 使用的是一个css类选择器，当swiper复用多次时，new swiper操作会将这个元素实例化多次。

解决方案：
  1. 方案一：new Swiper 不要使用 类选择器，使用id选择器，（不要这样去用）
  2. 方案二：使用ref特性。（推荐，首先通过ref去标记元素，然后使用$refs去获取内容）
    1. ref标记的是普通元素，那么后续得到的就是这个元素的DOM对象
    2. ref标记的是一个子组件，那么后续得到的是这个子组件的实例对象。
  3. 方案三：Swiper 组件的根元素就是需要的Swiper容器，所以也可以直接去使用$el实例属性。