hyduan_h5的博客

不管是移动端，还是pc端，可能都会有用户登录操作，不同的用户之间又拥有不同的角色，而不同角色之间势必存在不同的权限；如果按照类型划分，大概可分为三类：菜单权限、按钮权限、数据权限；数据权限：前端在请求头统一封装，携带用户信息，由后端解析返回；菜单权限：通过element菜单组件实现；按钮权限：通过自定义指令实现；菜单权限&按钮权限：本质上也是通过数据权限，由后端返回当前用户所有有权限菜单及按钮，然后由前端处理；} }

前端项目打包之后默认情况下的配置文件较大，部署后首次加载反应较慢，甚至会出现几秒白屏的现象，对于用户的体验感不是很好，所以需要进一步优化一下；本文主要记录一下本人自己的理解，如果其他方案可评论指导。

代码打包后，开发中写的很多打印信息或者断点，都会带上去，即影响美观，又影响性能，而生产大多不需要，故而需去除；插件使用来压缩 JavaScript。我们项目主要用来去除生产环境中的console以及debugger等信息。通过查阅后，经测试此方法可行，故记录，以便后续查看。网站推荐：https://www.npmjs.com/package/terser-webpack-pluginwebpack其他相关给、推荐一：webpack优化相关。

项目上线后为了不完全泄露源码，需要对给出的代码进行加密混淆，前端代码虽然无法做到完全加密混淆，但是通过使用 webpack-obfuscator 通过增加随机废代码段、字符编码转义等方法可以使构建代码完全混淆，达到无法恢复源码甚至无法阅读的目的。网站推荐：https://www.npmjs.com/package/webpack-obfuscatorwebpack其他相关给、推荐一：webpack优化相关。

sm2、sm3加密

SplitChunks是Webpack中一个提取或分离代码的插件，主要作用是提取公共代码，防止代码被重复打包，拆分过大的js文件，合并零散的js文件。4:webpack优化系列三：vue打包后生成的chunk-vendors文件过大,利用SplitChunks插件，分离chunk。推荐网址：https://webpack.docschina.org/plugins/split-chunks-plugin/webpack其他相关给、推荐。一：webpack优化相关。............

position 可能失效的情况：1、须确定设置sticky元素的参考滚动父级元素2、指定 top, right, bottom 或 left 四个阈值其中之一（且达到设定的阈值），才可使粘性定位生效。否则其行为与相对定位相同；并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。...

vue原生实现日历组件

gzip压缩：HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术，web服务器和客户端（浏览器）必须共同支持gzip。目前主流的浏览器，Chrome,firefox,IE等都支持该协议。简单来说，gzip是一种压缩技术。经过gzip压缩后页面大小可以变为原来的30%甚至更小，这样，用户浏览页面的时候速度会快得多需求实现1.安装依赖cnpm i -D compression-webpack-plugin2.修改vue.config.js配置const Compression.

目标需求：1：从a页面（例如表格、表单等）某行数据跳转到b页面，2：b页面不调用后端接口，只是前端页面的数据修改，3：修改b页面数据后，返回a页面，此时a页面该行数据修改，且其他数据保持不变；实现原理：1：a页面跳转b页面，数据可由路由带过去；2：b页面跳转a页面，b页面修改a页面的数据，通过eventBus修改；3：b页面跳转a页面，a页面数据保留的数据，通过keep-alive方式；相关文档：1：eventBus：链接2：keep-alive vue2.0: 链接3：keep.

需求：1：页面一数据由接口返回，修改部分数据，2：数据仅前端页面调整，暂未提交修改数据库。3：页面一跳转页面二，再由页面二返回页面一4：页面一数据仍为修改后的数据实现：1：借用方式：keep-alive2：keep-alive是vue中的一个内置组件，主要是将组建缓存到内存中，避免切换路由的时候页面刷新从而导致dom的重新渲染3：vue3keep-alive使用vue2的写法，切换路由后当前页面数据依旧改变一：在vue.app中添加keep-alive标签（此处与vue2不同）。&l.

需求：1：页面一数据由接口返回，修改部分数据，2：数据仅前端页面调整，暂未提交修改数据库。3：页面一跳转页面二，再由页面二返回页面一4：页面一数据仍为修改后的数据实现：1：借用方式：keep-alive2：keep-alive是vue中的一个内置组件，主要是将组建缓存到内存中，避免切换路由的时候页面刷新从而导致dom的重新渲染一：在vue.app中添加keep-alive标签。<template> <div id="app"> <keep-al.

在需求中，经常遇见pdf的在线预览效果很多pdf插件不支持vue3，或者是没有集成翻页放大缩小功能，比如vue-pdf。实现原理：借用依赖vue-pdf-embed(pdf预览),pdfjs-dist（获取pdf总页数）实现效果实现步骤一：安装依赖npm i vue-pdf-embed -Snpm install --save pdfjs-dist二：页面使用vue文件中<template> <div> <div class="div"&.

方法：监听滚动实现通过addEventListener方式监听通过scroll获取到滚动export default { data () { return { topNavBg: { backgroundColor: '' } } }, // 滚动监听 mounted () { window.addEventListener('scroll', this.handleScroll) // 监听页面滚动 }, met

vue2方法一在main.js中全局注册----vue Bus总栈new Vue({ el: '#app', router, store, //使用store vuex状态管理 components: { App }, template: '<App/>', data: { // 空的实例放到根组件下，所有的子组件都能调用 Bus: new Vue() }})事件注册及调用// 事件监听---在

在需求中，经常遇见pdf的在线预览效果实现原理：借用依赖vue-pdfvue-pdf推荐网址：https://www.npmjs.com/package/vue-pdf实现效果pdf文件样式实现步骤一：安装依赖npm i --save vue-pdf二：页面使用vue文件中<template> <div class="read"> <van-nav-bar title="预览" left-arrow .

需求背景：1：在需求中，一个平台样式风格基本保持统一；因而需设置一个全局样式配置2：有时需要可以根据后端数据返回，动态修改主题颜色方式一适用技术：css，less，sass等适用场景：颜色种类不固定的场景1：在index.html文件中增加配置<script> window.onload = () => { // 设置主题色 // --buttonColor是自定义的按钮背景样式代号 // 可动态修改，eg:由后端返回接受，可由前端事件修改.

1.具体实现效果2.创建SIdentify组件，主要用于验证码样式<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div></template><script> export default{ name: 'S

原理1、获得access_token（可以前端向百度发送请求获取，也可以后端获取，传token给前端，建议后端获取），本文默认前端已获得access_token。2、调用摄像头或本地文件夹获得证件照片3、将证件照片转化为base64格式4、发送请求，反写证件信息到输入框方法1：新建handlmg.js,做好准备工作/** * * @param {*base64字符串} dataurl * @return {Blob文件类型} */ export function dataU

在需求中，经常会遇到需要填写银行卡账号的情况，身为前端，为了用户体验及简化流程，在提交后端前，需要对银行卡账号进行校验。下载插件bankcardinfonpm i bankcardinfocnpm i bankcardinfo在main.js中引入import getBankcardinfo from 'bankcardinfo'Vue.prototype.$getBankcardinfo = getBankcardinfo在需要识别的板块添加代码this.$getBankcardi.

1. vue-tour推荐文档：https://pulsardev.github.io/vue-tour/?from=madewith.cn2. driver.js推荐文档github：https://github.com/kamranahmedse/driver.js用法和用例介绍：https://kamranahmed.info/driver.js/简单的安装使用介绍（中文，非官方）：http://f2ex.cn/driver-js/3. intro.js推荐文档：http

日常开发中，经常会遇到一个页面运用多个组件，或者多个页面运用同一组件的需求，对于这种，每个页面都进行引用，就有些过于繁琐，对此，我们会针对此类情况进行统一封装，本篇文章主要实现效果如下图，对于需要使用tabbar的页面增加配置：一：新建组件TabBar此处引用了vant组件import { Tabbar, TabbarItem } from 'vant';import styles from './index.css'export default { name: 'tabBar',.

前言：个别需求会要求禁止swiper的左滑或者右滑功能，虽然原生swiper可支持，但因版本问题，个别引用有问题；或者此时功能已开发完成，再换组件开发成本较大，所以需要再vant的基础上进行兼容。具体实现如下<van-swipe class="my-swipe" style="height: 200px;" vertical :touchable='touchable' @change='changeSwipe'> <van-swipe-item @touchstart.

1.下载vuexnpm i vuex@next2.在util文件夹中新建Storagehandle .js文件（防止刷新后数据丢失）const lsa = window.localStorageexport default { getItem(key) { try { return JSON.parse(lsa.getItem(key)) } catch (err) { return null } }, s

方法一一、配置与安装步骤：1、在 Vue 项目的 src 文件夹下创建一个 config 文件夹：2、在 config 文件夹中创建 rem.js：3、将以下代码复制到 rem.js 中：// 基准大小const baseSize = 32// 设置 rem 函数function setRem () { // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。 const scale = document.documentElement.clientWidth / 75

方法一代码清楚法1：每次修改package.json版本号2：在main.js中配置const VUE_APP_VERSION = require('../package.json').versionconst vers = window.localStorage.getItem("appVersion");if (VUE_APP_VERSION != vers) { localStorage.clear() window.localStorage.setItem("appVe

1：vue项目webpack打包后，直接打开，白屏问题原因文件引用路径不对问题解决根目录下新建 vue.config.js，在此处配置publicPath,具体如下：module.exports = { ... runtimeCompiler: true, publicPath: './' ...}问题注意依赖路由模式为hash，否则还会出现白屏的问题。（如果使用history模式上线，必须要服务端在服务器上有对应的模式才能使用history（看上面链接），

一：ES6对es6 了解新增模板字符串（为JavaScript 提供了简单的字符串插值功能）、箭头函数（ 操作符左边为输入的参数， 而右边则是进行的操作以及返回的值Inputs=>outputs 。）、for-of （用来遍历数据—例如数组中的值。）arguments 对象可被不定参数和默认参数完美代替。ES6 将promise 对象纳入规范，提供了原生的Promise 对象。增加了let 和const 命令，用来声明变量。增加了块级作用域。let 命令实际上就增加了块级作用域。E

在vue中动态给src赋值绑定图片会显示不出来 动态添加src被当做静态资源处理了，没有进行编译解决方法：1、用网络地址 把图片放在cdn或自己的服务器上，把网络地址存在imgUrl里，然后直接2.把图片放在src同级的static文件夹下 此处有坑 如果在部署H5的项目时对路径动了手脚这个有没有用3.require(’…/assets/images/’+imgsrc+’.png’) require里面是字符串4：important引入，在data中赋值，可直接获取，import im.

在项目中导出表格的需求一般由后端完成，尤其涉及到分页的情况，但不可避免的有特殊情况的发生，故而整理了记录了一下当初实现的方法新建文件Export2Excel，放入以下代码/* eslint-disable */require('script-loader!file-saver');require('./Blob.js'); //改成相对路径require('script-loader!xlsx/dist/xlsx.core.min');function generateArray(tab.

在项目中经常有这样的需求，同一页面路由根据不同参数，渲染不同数据、不同效果、甚至重新刷新整个页面。但由于路由的强缓存原因，同一路由跳转往往不会进行刷新，故而总结了几种解决办法。方法1：实现原理：点击当前菜单，先跳转过渡空白页面，再跳转原页面；实现优点简单方便快速统一实现缺点所有页面都将进行刷新，且因跳转其他页面故反应时间较长实现代码新建empty.vue<template></template><script>export d.

实现效果实现代码vue文件中 <div class="itxst"> <div class="col"> <!-- <div class="title">主体（可模糊查询）</div> --> <el-input v-model="inputValue1" size=

具体现象问题原因IE9-IE11 不兼容ES6语法，promise语法问题解决方法一下载安装包babel-polyfillnpm i babel-polyfill在main.js中引入babel-polyfillimport babelPolyfill from 'babel-polyfill 'Vue.use(babelPolyfill)修改webpack.base.conf.js entry: { app: ["babel-polyfill",

现象描述1：存在两个下拉框订单平台与订单店铺，二者联动，具体如下：2：数组因各种原故存储在变量中3：二者皆由接口动态获取数据： // 获取平台更新 watch: { source (newVal, oldVal) { if (newVal != oldVal) { this.formData.shopId = '' this.getShopList(newVal) } } }, computed: {

一、组件命名组件名为多个单词组件是通过组件名来调用的，所以组件名必须简短、富有含义并且具有可读性，应保持多个单词的来命名，根组件 App 除外。这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。组件的命名需遵从以下原则：有意义的: 不过于具体，也不过于抽象简短: 2 到 3 个单词具有可读性: 以便于沟通交流推荐<app-header></app-header><user-list></

Vuex全局状态管理器官方文档：https://vuex.vuejs.org/zh/guide/modules.html使用步骤：*引入vuex1:下载vuex模块2:新建一个store文件夹（这个不是必须的），并在文件夹下新建store.js文件，文件中引入我们的vue和vuex3:引入之后用Vue.use进行引用。*注册全局在main.js引入store,然后 , 在实例化 Vue对象时加入 store 对象 :在组件中，就可以通过this.$store 来使用store实例应

vue_cli3 配置什么是Vue_cli3官方推荐的基于webpack搭建的比较健壮的开发模板,内置常用模(Vue,router,vuex,babel...),使我们快速上手开发实战开发模板- 安装cnpm i -g @vue/cli@4.0.5 //全局安装初始化工具vue -V //版本号安装成功vue create xxxx //创建项目 - 启动项目//scri...

1、什么是 Vue.nextTick()？定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。所以就衍生出了这个获取更新后的 DOM 的 Vue 方法。所以放在 Vue.nextTick()回调函数中的执行的应该是会对 DOM 进行操作的 js 代码；理解：nextTick()，是将回调函数延迟在下一次 dom 更新数据后调用，简单的理解...

**一共有三种方式第一种方法是直接在子组件中通过 this.$parent.event 来调用父组件的方法第二种方法是在子组件里用$emit 向父组件触发一个事件，父组件监听这个事件就行了第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法第一种方法是直接在子组件中通过 this.$parent.event 来调用父组件的方法父组件<template> &l...

父组件向子组件传值【重点】注意，子组件不能直接使用父组件中的数据。父组件可以通过props属性向子组件传值。父组件向子组件传值的代码举例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=...