代码：https:///sharryling/practice_Web_Vue.git

vue-music_box 音乐盒

Tools

1.jsonp爬虫

src/common/js/jsonp.js 封装了统一的jonsp方法

第一种简单方法

  • eg：[爬 m.jd.com的数据]
  • url: https://wq.jd.com/bases/searchpromptwords/searchpromptwords?_=1590851731507&sceneval=2&callback=jsonpCBKA
  • user: components/HelloWorld.vue -> api/jd.m.js -> common/js/jsonp.js

第二种-需要修改http头信息的爬虫

  • eg: jd.m.js中的requestBefore方法 -> webpack.dev.conf.js中的【L54-74】中注释部分利用node后台代理接口的方式，启动了axios发送请求，来修改头部信息。

2.轮播图

使用了https:///surmon-china/vue-awesome-swiper

  • eg: components/Slider.vue

3.目录规范

公共参数 可放在： api.config.js
基础组件 可放在： base/xxx/xxx.vue xxx.js等，如轮播图,本项目没写完【但基础组件的开发在工作中一般是开发成npm包直接用】

4.eslint 规范

npm run lint // 检查规范
npm run lint-fix // 自动修正 **但是对vue没起作用?

5.启动后台数据模拟

在webpack.dev.conf.js中【L47-67】： 启动后台数据模拟

6.better-scroll：移动端滚动组件

use: base/scroll

  • 需要有内容才

7.Vuex的使用

  • state
  • getters
  • mutations
  • actions
  • modules
  • mapXXX
  • eg: HelloWold进行了两种方法的显示（state,getter），Singer.vue进行了两种方式的方法(mutations, actions)

8.封装api

jsonp

axios

  • eg: api/helper.js里面的get方法，api/index.js中对get(url)进行了引用

9.mixin

场景：

Mixin允许你封装一块在应用的其他组件中都可以使用的函数。
eg： 具体应用在电商app中，better-scroll 中，每次mounted时需要通过加载图片的高度刷新容器高度，在Home和Detail中都用到了同样的方法，新建一个mixin.js

  • eg： components/Singer.vue -> mixins[playListMixin] -> common/js/mixin.js
    【如果组件有同名方法，mixin的方法会被覆盖掉。因此可以用mixin来检验某组件是否有该函数，否则抛出错误】

10.测试运行开发环境

利用express启动服务，把打包后的代码跑起来
见prod.server.js文件，
主要包括:

  • 代理的那些api
  • 静态资源(dist)
  • 启动服务： app.list 【端口可以是process.env.PORT或者是配置文件的】

11.路由懒加载

方式一

  • eg: components/HelloWorld加载Singer.vue组件时
    // 原来的写法是下面的
    import Singer from ‘./Singer.vue’
    // 用路由懒加载可改为下面,变成异步加载的组件：
    const Singer = (resolve => {
    import(’./Singer.vue’).then( recommend => {
    resolve(recommend)
    })
    })

方式二

import(/* webpackChunkName: async-chunk-name / / webpackMode: lazy */ modulename)

方式三…

12.如果要配置CDN

可再webpack.base.conf.js中的outputs: {
publicPath: … 【指向config/index.js中assetsPublicPath，即修改assetsPublicPath的域名】
}

13.移动端的调试

alert -> 很不美观
可使用vconsole进行调试

14.Mac抓包工具：

Charles

Mentions:

  1. setTimeout(() => { xxxx }, 20) 为什么要20ms
    为了保证dom成功渲染，通常会在mounted函数中加个延时函数，由于浏览器刷新的时间一般为17ms一次，因此把setTimeout的值设置为17ms之后，即20ms，例如在需要获取内容宽高的场景。
  2. 上线前要检查vue相关的如vue/vuex/vue-router等版本是否是最新版本