Skip to content

个人常用的基于VUE、Vant的一个移动端H5。实现相关疫情数据展示

License

Notifications You must be signed in to change notification settings

leijin0416/vue-Template-H5

Repository files navigation

文档

1 面试 | 2 面试题 | 3 面试+分析题 | 4 面试+分析题 | vue总结---面试!!!

图表可视化 | 可视化实例 | 常用GIF压缩 | JavaScript数组去重(12种方法) | 如何实现防抖和节流,及使用场景

H5效果GIF链接


(一)索引栏-城市列表

  • src/components/case-indexBar/constAZ.js 全部的中文拼音;

  • src/components/case-indexBar/vuePY.js 将中文转换成拼音,并按字母排序;

(二)上拉加载

  • src/components/case-pullRefresh/index.vue 下拉刷新 && 上拉加载;

(三)Mock 数据

Mock 步骤参考 | Mock 数据参考文档 | Mock 官网文档

  • 项目目录下创建 mock 文件夹

  • mock 文件夹下添加 db.js 文件

1、全局安装 json-server

npm install --g json-server

// 更改json-server默认3000端口
json-server --watch mock/db.js --port 3004

2.1、mockjs 批量生成伪数据

npm install mockjs --save-dev

"mock": "json-server --watch mock/db.js --m mock/post-to-get.js",  // 开启 npm run mock

2.2、faker.js 批量生成伪数据

npm install faker --save-dev

"mock": "json-server --watch mock/faker-data.js --m mock/post-to-get.js",

(四)node 版本

版本控制 10.12.0 zip

where node  // 查看node位置

> del /f/s/q node_modules> nul

> rmdir /s/q node_modules

npm install --registry https://registry.npm.taobao.org  // 临时使用一次

npm install 关于报错 "node-pre-gyp error"

> npm install -g node-gyp  // -1

> npm install --g --production windows-build-tools    // -2

> npm i --unsafe-perm   // 3   等待十秒若不行转4

------------------------

// npm 报错 "node-pre-gyp WARN Using request for node-pre-gyp https download"

npm cache clean -f  // 清除缓存,再转3   -4

权限不够,--unsafe-perm 解决

node-pre-gyp WARN -node-canvas


(五)前端优化

Animate css动画 | 掘金-‘正则’等工具函数

新型冠状病毒疫情实时爬虫1| 新型冠状病毒疫情实时爬虫2 | VANT GIT操作 | 一个抽奖的轮子

1、vw 适配

16px*2

vw.png

2、页面左右滑动页面效果手势

需要在路由(beforeEach)中判断

const history = window.sessionStorage;
let count = history.getItem('count') || 0;
history.clear();

router.beforeEach((to, from, next) => {
    // 第一级栏目
    const subArr = ['/', '/transmit', '/home', '/shop']
    let [toIndex, prevIndex] = [parseInt(history.getItem(to.path)), parseInt(history.getItem(from.path))]
    for (let index in subArr) history.setItem(subArr[index], 0)

    if (toIndex || toIndex === 0) {
        // 判断前进/后退
        if (toIndex > prevIndex) {
            store.commit('handleDirectionId', 'next')
        } else if (toIndex === prevIndex) {  // 一级栏目无切换效果
            store.commit('handleDirectionId', '')
        } else {
            store.commit('handleDirectionId', 'prev')
        }
    } else if (!subArr.includes(to.path)) {
        ++count;
        history.setItem(to.path, count)
        store.commit('handleDirectionId', 'next')
    }
    next();
});

this.$router.back(-1); // 按钮返回

3、vuex使用logger的日志功能

可以通过这个logger插件可以明细的看到数据的变化

  • 引入文件
import createLogger from 'vuex/dist/logger'
const debug = process.env.NODE_ENV !== 'production';

---------

plugins: debug ? [createLogger()] : [] // 开发环境下显示 vuex状态 的修改日志
  • prev sate 代表之前的数据

  • mutations代表经过vuex中的mutations中方法修改后的数据

  • next会列出state中执行此方法后的值

vuex.png

4、keep-alive 组件级缓存

场景:在一个列表项很长的时候我们通常需要进行分页操作,移动端的分页操作基本上是“上拉加载” 和 “下拉刷新”;假如我们已经进入了这个列表的第四页,那么当我们想进去详情页查看详情的时候,当我们返回的时候这个时候页码会直接变为1,因为数据已经初始化状态;这个问题我们通常需要keep-alive组件来解决;

keep-alive是Vue内置的一个组件,通常是用来保留数据状态或避免重复渲染,也就是我们说的缓存效果;

属性:

  • include:接受值为字符串或者正则表达式,只有匹配的才被缓存;

  • exclude:接受值为字符串或者正则表达式,被匹配的路由将不会被缓存;

  • 路由元信息 meta,meta 路由元信息对象里面放着的是类似于局部变量,在路由匹配的组件内部都能够访问得到,我们可以通过meta来定义一个自定义字段来判断标识页面是否需要开启缓存

meta: { keepAlive: true // 需要被缓存 }

6、ProgressBarPlugin 开启打包进度显示

npm i -D progress-bar-webpack-plugin

About

个人常用的基于VUE、Vant的一个移动端H5。实现相关疫情数据展示

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published