木灵鱼儿
vue 项目实战
axios error对象解构
const {response:{status,statusText}} = err;status为状态码statusText为错误信息
分类：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 ...
木灵鱼儿
vue 开发实战（完结）
template和jsx
templatetemplate是html的扩展语法，数据绑定使用Mustache语法（双大括号）<span>{{message}}</span>所以template容易上手，入门极简，大量内置指令，拥有组件作用域css，但是因为简单，所以灵活性不高。jsxjsx是JavaScript的语法扩展，数据绑定使用单引号。<span>{message}</span>jsx相对于template，jsx更灵活，但是也不一定要完全抛弃template。jsx为什么灵活，原因就是他不是html模板，所以jsx中的标签，他可以是变量，我们改变这个变量，这...
木灵鱼儿
vue 开发实战（完结）
木灵鱼儿
vue 开发实战（完结）
provide inject 跨组件传参 + 响应式数据
父组件与子组件的传参，使用的是props，如果是父组件与孙子组件传参，大部分可能会采用递归的方式，也就是子组件props接收，然后再props传给孙子组件。或者使用vuex。但如果是迭代的方式，组件的层级越深，不断迭代的props会是代码越来越无法维护，冗余。于是官方出了provide inject。provide有父组件设置，inject由子组件接收，他们的特性：祖先组件不需要知道哪些后代组件使用它提供的属性后代组件不需要知道被注入的属性来自哪里例子：父组件<script> export default { provide: { foo: 'bar�...
木灵鱼儿
vue 项目实战
木灵鱼儿
vue 开发实战（完结）
如何触发组件的更新
vue会对data中的值进行处理，如果在template中使用到了，就会对这个值进行setter和getter处理，等于就是添加到了watch一样，当数据发生变化时，就会触发的方对应的getter、setter方法，方法针对性的更新。这个setter和getter的绑定触发，是必须现在data预设好才行，否则vue都运行完毕了再进行添加，是无法响应式更新的。也就是说。vue的响应式更新，他只能监听你一开始就预设好的值，如果你是后面再手动添加的，是无法检测到的，也就无法进行更新。比如：data(){ return { obj:{} } }有一个obj的空对象我们手动给他附加...
木灵鱼儿
vue 开发实战（完结）
虚拟DOM和key
vue渲染html时，会生成一个虚拟dom树，被称之为vdom，然后每次数据的更新，旧的dom树和新的dom树进行比对，然后针对性的更新。两个dom树之间的对比，最佳的体验是深层遍历，也就是遍历每个节点，但是这种遍历是非常损耗性能的，所以现在都是浅层遍历。也就是同层对比。两个层级之间进行对比，如果某一项变化了，就要发生改变，这样就会导致，该层级的下一级的元素是重绘的。因为这一层重新弄了，下面的东西自然就要切断，重新生成。而key的作用，就是对这个层级打上标识，如果有了标识，就能够判断是这个元素是不是相同的，相同的，如果只是移动了，那就不用删除重新生成，直接移动即可。如果是相同的元素，位置...
木灵鱼儿
vue 开发实战（完结）
双向绑定和单向数据流
双向绑定和单向数据流什么是双向绑定？双向绑定指的是：数据model的更新会触发可视层的更新，而可视层的更新会触发数据model的更新。这就是v-model绑定input元素所做的事情。单向数据流单向数据流：数据model的更新触发可视层的更新，而可视层的更新和model不会有任何关系。vue的几个概念vue是单向数据流，不是双向绑定vue的双向绑定不过是语法糖Object.defineProperty是用来做响应式更新的，和双向绑定没有关系。v-model做了什么v-model默认限制只能用在：input、select、textarea、components也就是除了表单元素，还有可以用...
木灵鱼儿
vue 开发实战（完结）
木灵鱼儿
vue 开发实战（完结）
木灵鱼儿
vue 项目实战
vue 路由跳转使用新建页面打开
今天遇到这么一个需求，官网的个别页面需要新建页面打开，但是这个页面我是配置的路由。一直以来，我以为路由的跳转只能就是在当前页面进行，特别是我跳转路由使用的都是路由name属性。接到这个请求我有点懵逼了，哈哈。。解决方法router-link元素默认生成的是一个a元素，仔细查看你会发现a元素的href是带有路径链接的，哪怕你跳转的:to="{name:xxx}"使用的是路由name。它最终生成的a元素，href依旧是路由的path，所以，既然他能生成路径，那么我们只需要给他加上a元素的attr属性target即可。<router-link :to="{n...
木灵鱼儿
vue 项目实战
elment ui el-backtop使用教程
饿了么ui的返回顶部，官方的文档非常不上心，写的那个无法使用，因为默认那个示例里面，他用了target属性，然而实际上，如果你没啥定制化的滚动条，而是body的滚动条，那么target就不需要设置。<!-- 返回顶部 --> <el-backtop> <i class="el-icon-arrow-up"></i> </el-backtop>这样就行了，效果ok，不会不显示，滚动效果也是有的。里面的i是我自定义图标，这个看下文档就明白了。
木灵鱼儿
vue 项目实战
vue cli4 预渲染生成静态html文件，seo优化，prerender-spa-plugin
当我们使用vue去创建一个官网的时候，或者是其他传统类型的html，就会触碰到vue的痛点，他没有seo优化。因为所有的html全是js生成，你打包出来的文件，最终也只是一个简单的index.html，里面可以说什么都没有。这样的话是不利于爬虫抓取的，所以我们需要进行预渲染。目前我将预渲染分为两种：服务器渲染 ssr本地打包渲染服务器渲染ssr可能很多人不太清楚怎么回事，其实只要知道node后台服务搭建，那就肯定是知道的，因为所有的node框架，他都绕不过一个知识点，就是模板语法渲染html页面，这个就是所谓的ssr了。可以理解成node的php写法吧。这个由于目前还未遇到，而且之前学n...
木灵鱼儿
vue 项目实战
vue cli4 配置静态cdn资源
对于打包的优化，除gzip和按需引入，就只有cdn是效果最明显的了。首先使用cdn我们要明确一个事实，就是我们cdn加载的文件，他是没有所谓的按需引入的概念，他就是一个完整的包，顶多给你分为基础包、核心包、完整包啥的。所以，引入是定死的，不可能说你用到什么功能自动引入什么功能，那是本地打包才能做到的。就好比如element ui ，本地打包，我可以按需引入，用到什么引入什么，然后生成一个js文件，但是cdn，你要么就引入全部功能，要么就自己本地，只能这么二选一。所以，对于像element ui 这种框架的打包优化，如果你是按需引入，你可能需要调整为完整引入，因为最终打包使用的是cdn资源...
木灵鱼儿
vue 项目实战
vue cli4 lodash库 按需引入
lodash这库还是为微信技术群里有人推荐的，我一开始都不知道，不过看了下，是对一些常用js方法的封装，比如深度克隆，筛选啊这些。但是一个lodash的库引用，他占用了起码有500kg的大小，在vue cli 打包后，在chunk-vendors.js文件中也占据了一些大小。这就会导致chunk-vendors这个文件变得特别的大，但是lodash里面的方法你可能只会用到一部分，并不是全部，所以我希望的是，他可以按需引入，并且不改变原来的写法的情况下。教程安装插件yarn add lodash-webpack-plugin babel-plugin-lodash --dev安装这两个...
木灵鱼儿
vue 项目实战
vue cli4 文件打包分析
之前我写了一篇关于cli2的一个文件打包分析的用法，需要安装webpack-bundle-analyzer插件。然后还需要配置这配置那的，有点麻烦。不过现在vue cli已经内置这个功能了，不需要安装插件，也不需要配置vue.config.js，我们只需要给package.json添加一段启动命令即可。"scripts": { "report": "vue-cli-service build --report" }使用该命令即可。然后运行这个report。他会生成dist打包目录，并且在里面生成一个report.htm...
木灵鱼儿
vue 项目实战
vue cli3-4 绑定图片方法大全
是不是经常头疼vue cli项目怎么绑定图片，是不是感觉为什么路径是对的，但是就是会报错？那么我们就来一一讲解，vue cli怎么才能绑定图片。style标签中引用图片我们的资源存放路径就两个：纯静态的public文件夹动态的src/assets文件夹assets里的图片，如果很小的话，webpack打包的时候会将其转为base64，这样就减少了文件的请求数量，但是相对来说，如果特别多小图片，那么反而会增加js文件的大小，因为base64并不是压缩，如果文件很大，base64占用的存储可能会比原文件还要大一些。所以，优化很重要，但是要看项目需求。引入public中的资源首先我们要知道，p...
最近评论