weixin_43990297的博客

以前在项目开发中，如果使用了第三方UI库，要覆盖样式，通常使用<<< 深度选择器来进行样式穿透比如<style scoped>.a >>> .b { /* ... */ }</style>但是如果项目中使用scss,less等预处理器却无法解析>>>，所以我们使用下面的方式.<style lang="scss" scoped>.a{ /deep/ .b { /* ... */ }}

最近因为公司有需求，正好把老早就感兴趣的可视化表单生成工具给研究了一番，现在记录下心得体会。当时第一次看到这种拖拽生成表单或者页面的工具，就觉得很神奇，不知原理为何，后来查阅了一些资料和参考了一些开源项目，通过拆轮子搞懂了原理，解决了 自己的疑惑，在这里不将很详细的实现步骤，就记录下概要，自己在这个过程中的收获。https://github.com/Miaodashu/form_build.git一、 核心拖拽功能怎么实现的1. 使用原生的`HTML draggable` 属性，开启标签的`drag

在项目开发完成后，就会进行打包部署，有的时候项目开发过程中，代码写的比较臃肿 或者各种包引用的比较多，就会造成打包后包的体积变大，导致部署后访问速度比较慢。 下面就记录下自己在项目中的一些配置来进行优化这些问题。通过 npm run build --report 命令（好多贴中都是借助webpack-bundle-analyzer帮助分析，不用安装这个，使用前面那个自带命令就好） 会在打包后的文件夹内生成一个report.html文件，打开会就是各种打包后文件大小的分析页面，我们可以看到生成的最大文件为c

众所周知，浏览器在渲染dom节点的时候，节点越复杂数量越多那么所消耗的时间就会越长。当业务需求为一次性要渲染大量的数据时，数据量过大且一次性全部渲染出来的时候会使浏览器卡顿或者卡死。一般情况下，列表形式的数据展示形式是最常见的，大部分情况下，常见的方式时普通分页加载和无限滚动加载，普通分页加载在这里就不说了大部分后台管理都采用这个方式，无限滚动则是根据鼠标滚动触底时加载下一页数据，实现的思路大致是监听父元素的 scroll 事件（一般是 window），通过父元素的 scrollTop 判断是否到了页面是.

在项目开发中，因为有路由权限问题，所以做了动态添加路由，但是在第一次登录成功，获取路由进去首页后会出现如上图报错。后续再进行页面跳转就不会报这个错了，具体出现原因没搞懂，有大佬知道请告知，我说下我的解决方案，在router文件下的index.js中添加如下代码，将路由重定向时的这个错误通过catch给捕获到// router/index.jsimport VueRouter from "vue-router";const originalPush = VueRouter.prototype.pu.

前端将vue路由模式改为history模式后需要运维配置才能正常访问，配置信如下 location / { root html; index index.html index.htm; try_files $uri $uri/ @rewrites; } location @rewrites { rewrite ^(.+)$ /index.html last;

vue-cli2.0版本我们在先在package.json在新增自定义打包命令，名字可以随意起。 "scripts": { "dev": "webpack-dev-server --inline --progress --host 0.0.0.0 --config build/webpack.dev.conf.js", "start": "npm run dev", "build:test": "node build/build-test.js", // 这是我定义的测试环境

写这个呢是为了做个笔记，主要记录日常工作中遇到的一些问题和知识点。scoped属性在组件的style标签大家经常会注意到scoped属性，这个属性的作用主要是 使css只作用于当前组件中的元素。实现原理就是给当前页面元素加上唯一的自定义属性：data-v-唯一的属性，大家自己打开浏览器检查样式就会发现什么情况了。在项目开发中经常会覆盖使用的UI库组件样式，最好加个外层标签，防止样式污染，如下 /* 一般借助深度作用选择器 >>> */ div >&gt

pickerOptions: { shortcuts: [{ text: '今日', onClick(picker) { const end = new Date(); const start = new Date(); picker.$emit('pick', [start, end]) } }, { text: '昨日',

在项目中经常遇到有下载导入模板这个需求，所以一般最好是将它封装成成一个工具类函数，供全局使用具体实现方法如下let util = {};//下载excel文件util.downloadExcel = function (res, fileName) { let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }); //application/vnd.openxmlformats-officedocumen

如果有FQ的，那就直接去商城搜索，没有FQ的话，我这找到了一个伸手党福利，一个老哥的压缩包，已用npm处理过，已配置过源码文件，直接拿来用即可，链接地址

在vue项目中，有时启动项目会发现报‘cannot find module node-sass’这个错误，解决方案如下执行cnpm install node-sass@latest即可解决，如果在执行cnpm的提示说cnpm不是内部命令也不是外部命令时，可参考这位老哥的方法，（比较粗暴）博客名称叫Erorrs...

在项目开发中，如果用到定时器，就需要在页面挂载时定义计时器，在页面销毁时清除定时器。下面代码就是常规写法。export default { mounted() { this.timer = setInterval(() => { console.log('hello world') }, 1000) }, be...

首先，先下载依赖npm i uglifyjs-webpack-plugin@1.1.1 --save-dev然后在vue.config.js文件里面进行如下配置const UglifyJsPlugin = require("uglifyjs-webpack-plugin")module.exports = { publicPath: BASE_URL, css: { // 配置css...

Vue 兼容 ie9 的全面解决方案一、兼容IE主要是从以下几个方面考虑es6语法兼容Number对象es6新方法兼容requestAnimationFrame方法兼容axios Promise兼容axios cors兼容Vue 官方对于 ie 浏览器版本兼容情况的描述是 ie9+，即是 ie9 及更高的版本。经过测试，Vue 的核心框架 vuejs本身，以及生态的官方核心插...

vue-cli3 vue.config.js中如何配置loader该配置方法可以配置多个loader， 代码如下方法一module.exports = { chainWebpack: config => { config.module .rule('expose1') .test(require.resolve('jquery')) ...

element-ui+vue-treeselect下拉框的校验(ivew也适用)在项目开发中 使用了vue-treeselect的话，使用element-ui或者ivew自带的表单校验发现，trigger中blur和change均不生效，在选择了值之后验证依然存在，解决方法主要是使用vue-treeselect官网中api给出的事件中的input，在value改变后触发，将trigger设为b...

在vuex的时候 刷新以后里面存储的state就会被浏览器释放掉，因为我们的state都是存储在内存中的，所以一刷新页面就会把state中的数据重置，这就涉及到vue数据持久化的问题。在vuex中使用subscribe 和plugins 来实现本地存储与vuex相关联，实现vuex持久存储https://vuex.vuejs.org/zh/api/#plugins 具体细节可查阅官方文档 ...

移动端项目在nuxt中使用rem.js把近期项目中的nuxt配置rem.js分享下，配置后可以在项目中使用rem的单位以下是我用的rem.js的内容如果在项目中使用less或sass变量全局注入，不用单独引入的就配置如下把近期项目中的nuxt配置rem.js分享下，配置后可以在项目中使用rem的单位在nuxt.config.js中的head 配置项中配置， 将rem.js放在static目录...

VUE网速慢时初始化页面闪动问题出现vue源码或者指令当网速较慢、Vue.js 文件还没加载完时，在页面上会显示{{message}}的字样，遇到这种问题该怎么办呢？很简单官方给出了一个指令v-cloak，它配合display：nonecss属性使用v-cloak原理v-cloak指令一般在Vue实例结束编译时从绑定的HTML元素上移除，所有根据这一特性经常会与css属性一起配合使用...

vue项目中配置全局变量注入在日常项目中，很多人都用到了css预处理器 ，如sass，less， stylus，处理样式非常方便，尤其是嵌套，变量，函数等，让我们书写css非常nice，在项目中一般会建立一个样式文件夹（此处用less），存放公共样式和公共变量如项目主体色，字体大小等等的变量，但是在项目中使用这些变量的时候通常都要在style标签内用@import '***/***/***/*...

多行文字超出部分显示省略号，以及在VUE项目中打包后失效问题多行超出隐藏div {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}这样在平时的项目使用是没有问题的，但是在vue项目中，一打包上线就会...