木灵鱼儿
vue 项目实战
yarn和npm清理缓存
今天遇到一个bug，就是安装的时候老是报错，怎么装都错，所以我觉得是缓存的问题，所以需要清理缓存npm cache clean --force yarn cache clean
分类：VUE
木灵鱼儿
vue 项目实战
el-input 只能输入数字和小数
饿了么的input组件只是在v-modal绑定的时候有一个.number修饰符，使用这个修饰符确实可以只输入数字，但是输入的是整数，无法输入小数，而且字符串还是可以输入，还可以负数，很尴尬。如果只想让它输入数字，小数，甚至更复杂的判断，上面的方式是不行的。网上的处理方式<el-input-number v-model="num" oninput ="value=value.replace(/[^0-9.]/g,'')"></el-input> 大概就是给他添加一个老版本的事件，行内事件进行replace替...
木灵鱼儿
vue 项目实战
木灵鱼儿
vue 项目实战
精华 axios 修改http协议和转formData对象
修改协议最近发现axios的修改协议有个很方便的操作，就是通过create创建一个axios对象的时候，就可以直接设置上传协议了。const api = axios.create({ headers: { 'Content-Type': 'application/x-www-form-urlencoded', } }); 这样我们将协议改为了application/x-www-form-urlencoded这个协议可以上传formData对象，但是他不能上传文件，所以如果你要上传文件，需要改为这个协议：multipart/fo...
木灵鱼儿
vue 项目实战
解决 vscode运行vue项目卡死 提示：窗口已崩溃（原因oom）
最近发现没啥用，玄学，这个崩溃在项目内容很多的时候就会出现，更换了好几个版本的系统，vscdoe版本也换过，node版本也换过，找不出原因，用其他ide就不会出现这个问题，估计是锐龙cpu的问题吧，用g4560随便启用都不出问题，真是日了狗了，只能将就用，等以后版本修复了。一般这个问题有两种情况，一种是项目非常庞大，另一种就是内存泄漏，泄漏的话跟代码有关系。但是我们肯定不能直接大刀阔斧的去删代码，所以只能自己想办法了，唯一的办法就是增加node服务的内存限制。为此我们需要安装一个全局的插件：increase-memory-limityarn global add increase-mem...
木灵鱼儿
vue 项目实战
关于element 侧边栏导航高亮的思路
不久之前，我写了一篇《element ui 侧边栏导航刷新自动展开并高亮》的文章，里面主要讲了怎么对侧边栏导航进行高亮，刷新并依旧保持高亮展开的方法。但是后来我发现我之前的那种思路有些窄了。不太适合更大型的站点开发使用。之前的方法主要讲的是：每个网页对应一个导航栏菜单，此时导航栏菜单和网页是一一对应的，所以我可以使用当前路由的name值来进行高亮。但是，如果有更复杂的情况呢？比如：我的导航菜单只显示两级，剩下的级数不显示，点击三级及以上时怎么办？虽然两个页面在路由配置里是同级路由，但是a路由点击按钮跳转到b路由，b路由有前缀条件，所以不能直接出现在导航菜单里，那么应该已经保持a路由菜单高...
木灵鱼儿
vue 项目实战
element 上传文件组件-文件列表动画bug
今天想封装一个上传组件，用于本地选择文本文件后，前端直接将文本的内容给读取出来，然后提交这个拿到的文本内容。所以，组件的作用就只是将文件转为文本。bug封装中我发现了一个bug，由于上传组件是自动上传的，所以我使用自定义上传覆盖默认上传方法。然后再自定义上传方法中拿到文件，并读取到文本。但是饿了么组件会默认将你选择的文件显示到文件列表中，也就是上面图上那个样子。并且会有动画但是，如果我想要让它显示已上传，就是文件列表显示打勾，就需要对组件绑定的file-list数组push一个对象，对象里面有文件的name值，也就是如下：this.fileList.push({name:"文件...
vue cli4 开启gzip压缩 nginx开启gzip
vue cli目前还没有自带这个功能，需要安装一个webpack的插件：插件安装yarn add compression-webpack-plugin更新：2020-12-17 千万不要安装最新的7.0版本，会报错，而且目前没有人提供解决方案，我这里提供两个版本，大家自行选择安装稍微新一些的yarn add compression-webpack-plugin@6.1.1旧的yarn add compression-webpack-plugin@4.0.0使用这两个版本不会出现报错，个人亲测配置安装完打开vue的配置文件vue.config.js，和package.json文件同级，没有...
木灵鱼儿
vue 开发实战（完结）
yrm 一个yarn的镜像管理工具
npm有nrm，我yarn怎么能没有呢全局安装npm install -g yrm --registry=https://registry.npm.taobao.org安装完毕，查看ls列表yrm ls如果提示你什么禁止运行脚本，且是win10 powerShell的话可以这样做：get-executionpolicy //他会返回Restricted set-executionpolicy remotesigned //旧win10可以用，新版不行 Set-ExecutionPolicy -Scope CurrentUser //最新win10使用该命令，输入完会让你输入...
木灵鱼儿
vue 开发实战（完结）
nrm 一个npm的镜像管理工具
npm换源应该是国内的基本操作了，但是每次用的时候，可能是百度啊，各种搜，总之搜到的结果，可能都很一般，不是你复制我，就是我复制你，东西缺胳膊少腿是常有的事。为此，npm有一个插件，可以快速的进行源的切换，而且方便，还能测速。首先我们需要安装，务必全局nrmnpm install -g nrm安装完毕后我们可以查看源列表nrm ls如果提示你什么禁止运行脚本，且是win10 powerShell的话可以这样做：get-executionpolicy //他会返回Restricted set-executionpolicy remotesigned //旧win10可以用，新版不行...
木灵鱼儿
vue 开发实战（完结）
如何构建一个可交互的组件文档
经常可以看到各种组件的文档，都是可交互，点开code按钮，还能查看对应的源码。那么我们如果要写一个这种的话，最省事的，应该就是在源代码的基础上，我们增加一个按钮，然后点开可以查看源码，反正就是尽量和书写vue项目一样。为了达到这个需要，我们有两个需求：怎么把vue文件作为代码文本显示代码文本怎么高亮解决这两点我们也能简单的搭建一个类似的可以交互的组件文档了。当然还有更高端的办法，就是自己写一个loader解析器，这个成本就很高了，一般人也不会这个，所以就不考虑了。怎么把vue文件作为代码文本显示webpack有一个插件： raw-loader他可以把text文本或者vue文件这些文件，拿...
木灵鱼儿
vue 开发实战（完结）
木灵鱼儿
vue 开发实战（完结）
moment 语言包按需加载
moment作为一个时间插件，使用的地方是非常广泛的，但是我们使用moment的时候，需要注意下他的语言包。默认情况下，他的语言包是全加载的，也就是有多少个预设的语言包，就加载多少个。为此，我们需要对他进行优化优化前优化打开vue.config.js文件const webpack = require('webpack'); module.exports = { //... configureWebpack: { plugins: [ // Ignore all locale files of moment.js new webp...
木灵鱼儿
vue 开发实战（完结）
如何管理系统中使用的图标
关于图标的方案，现阶段也就三种：雪碧图字符图标svg雪碧图雪碧图就是将多个图标图片合并到一张图里面，前端通过控制图片的大小位置来进行显示。但是也有缺陷，就是图片的清晰度了，如果放大了，就会显的很模糊。字符图标字符图标是目前最成熟的一种方案，使用简单，并且是和字体一样的，放大依旧很清晰。但是他的缺点就是不支持多色图标，也就是一个字符图标，他无法同时显示多种颜色。svgsvg是最近开始兴起的，它是一种组件化封装的方式，将svg代码化，以达到控制的目的，而且相对于字符字体，svg本身有很多优势，比如动画，多色等等因为组件化了，所以我们可以按需引入，虽然字符图标也可以，但是那种是需要平台的支持，...
木灵鱼儿
vue 开发实战（完结）
vue项目里使用Object.assign的一个小技巧
当我们请求一个api的时候，他返回的数据可能会有很多，这些数据可能需要分别拆分存放在data预设的变量中。这就导致我们可能要写好几个赋值操作this.xxx = xxx; this.xx = xxx; this.xx = xxx;我们可能会重复很多次上面这种操作，是不是有点麻烦。为此，我们可以利用Object.assign来达到我们的偷懒效果Object.assign(this,{xx:xxx},{xxx:xxx});使用这种方式，我们的vue可以检测到动态改变的值，也就是说watch监听是可以触发的。且效果和你写多个this.xxx=xxx是一样的。感觉这个方法妙啊，所以分享出来，当然...
木灵鱼儿
vue 项目实战
vue 使用jsx
vue 的render语法让人崩溃，太过复杂，于是有了jsx，利用babel的插件，我们可以使用jsx语法。插件可以让我们在使用render的时候，语法更像template模板语法，用起来更容易上手。安装插件jsxnpm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props安装完毕后我们需要进行配置配置插件找到babel.config.js文件，该文件和package文件同级，没有就自己手动创建一个。内容如下：module.exports = { presets: ['@vue/babel-p...
木灵鱼儿
vue 项目实战
木灵鱼儿
vue 开发实战（完结）
使用ECharts
目前国内的图表库，除了百度的echarts就是蚂蚁的antv了，蚂蚁的图表样式更好看，相对来说，他的学习成本也很高，echarts已经是一个老牌图表了，有着比较完善的用法和社区。这里就了解下vue里面使用echarts需要注意的一些问题。使用EChartsECharts有提供一个vue版本的插件，也是由百度官方vue团队维护，有兴趣可以看看。vue-echarts我们这里就先不用这个插件了，用npm的方式安装npm install echarts安装完毕后我们就可以import引入<script> import echarts from "echarts&quo...
木灵鱼儿
vue 开发实战（完结）
更加精细化的权限设计（权限组件、权限指令）
路由的鉴权只能处理大的方面，而更精细度的权限控制，就做不到了，如果我页面有一些按钮是需要有权限才能显示，那么，单路由鉴权根本无法做到。所以我们还需要更加精细化的权限控制。这里有两种权限的控制方式：权限组件权限指令权限组件权限组件可以理解为一个插槽组件，这个组件自身做一个权限判断，如果有权限我们就允许这个插槽内容展示。但是这么一个小小的功能其实也没必要做做一个传统组件，使用函数式组件他的性能会更高，因为用的地方很多，组件本身也没太多东西。既然是鉴权，我们自然需要一个用于判断是否有权限的函数，我们依旧可以使用上一章的check函数auth.js//后端返回权限 function getAut...
木灵鱼儿
vue 开发实战（完结）
如何使用路由管理用户权限
以前弄个一个路由鉴权，其原理就是判断用户是否已经登录，未登录就跳转至登录页。通过给meta设置一个元数据，然后判断这个页面是否有权限，如果访客没有权限，就跳转至登录页。这个用于一般情况完全是足够了，但是当你的网站权限分级的情况，就不太够用了，因为已经不能用单纯的是否已登录来判断，访客时候有权限浏览该页面。多级权限假设我们网站有四个等级：master（站长）、admin（管理员）、user（注册用户）、guest（游客）那么最先，我们给路由设置权限，设置哪些等级可以访问export default [ { path: "", component: () =&...
木灵鱼儿
vue 开发实战（完结）
木灵鱼儿
vue 开发实战（完结）
实现一个动态改变的页面布局
如果要实现这个功能，我们就需要去写一个layout布局的文件，然后通过一个动态的设置去响应这个变化。这个问题其实可以分两个方面去解析：布局文件怎么去做怎么去响应设置布局文件对于写一个布局文件，其实也不是很难，但是就是不要钻牛角尖，就好比，你可能会去想，一个侧边栏导航要怎么变成顶栏的横向导航？其实这种想法太过于钻牛角尖，为什么我们不能做两个导航呢？侧边栏sidebar我们使用一个导航，header里面我们也放一个导航，然后v-if判断不就好了。没必要想那么复杂，很多东西就是组件化，响应式数据进行显示。而且很多框架都预设了一些布局，我们可以利用那些布局，然后针对性的操作，大部分框架对这个些布...
木灵鱼儿
vue 项目实战
vue cli 创建全局过滤器
最近遇到一个需求，希望在无内容的情况下能用--来表示无内容占位。所以，想来想去，用过滤器最好，然后既然是通用性，那么直接全局就行了。创建过滤器我们可以创建一个js文件，然后export导出，再到main文件里面导入并激活。创建一个名为globalFilters.js的过滤器文件，这个文件一般放在utils文件夹中，当然你也可以随意，只要能正确引入就行。// 全局过滤器 // 无内容占位符 const placeholder = (value) => { if (!value) return "--"; return value; }; export ...
木灵鱼儿
vue 开发实战（完结）
木灵鱼儿
vue 开发实战（完结）
vuex核心概念和底层原理
vuex作为一个共享的数据对象，用于不同组件的共用一个数据，并且动态响应数据变化，配合computed属性，可以对数据进行缓存。在vuex里面，在异步处理actions上，最终也还是要用到commit同步操作方法操作数据，并不是actions方法本身处理了数据，原因是因为需要有操作记录，方便在插件上查看。废话不多说，直接上底层原理。原理vuex其实就是一个重新封装的new Vue 对象，他的动态响应数据就是data属性，而commit这些方法，都只是回调而已。import Vue from "vue"; const Store = function(options ...
最近评论