- 博客(14)
- 收藏
- 关注
原创 vue项目 性能分析和CDN的应用
vue项目 性能分析和CDN的应用性能分析我们集成了 功能,写了很多组件,最终都会打包成一堆文件,那么真实运行的性能如何呢?我们可以使用vue-cli本身提供的性能分析工具,对我们开发的所有功能进行打包分析它的应用非常简单$ npm run preview -- --report这个命令会从我们的**入口main.js**进行依赖分析,分析出最大的包,方便我们进行观察和优化文件越大,对于网络带宽和访问速度的要求就越高,这也就是我们优化的方向像这种情况,我们怎么优化一下呢webpa
2021-09-09 17:09:33
252
原创 vue elementUi导出excel表格功能实现
vue elementUi导出excel表格功能实现日常业务中,我们经常遇到excel导出功能, 怎么使用呢Excel 的导入导出都是依赖于js-xlsx来实现的。在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据。安装excel所需依赖和按需加载由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader。所以你先需要安装如下命令:npm install xlsx file-saver -Snpm install
2021-09-09 09:34:22
226
原创 excel数据导入组件封装
excel数据导入组件封装封装一个导入excel数据的文件首先封装一个类似的组件,首先需要注意的是,类似功能,vue-element-admin已经提供了,我们只需要改造即可 代码地址类似功能性的组件,我们要会使用和封装即可excel导入功能需要使用npm包**xlsx,所以需要安装xlsx**插件$ npm i xlsx将vue-element-admin提供的导入功能新建一个组件,位置: src/components/UploadExcel注册全局的导入excel组件impor
2021-09-08 09:44:38
181
原创 vue组件和过滤器统一注册的方法
vue组件和过滤器统一注册的方法为了方便所有的页面都可以不用引用该组件,可以进行全局注册提供注册入口 src/componets/index.js// 该文件负责所有的公共的组件的全局注册 Vue.useimport PageTools from './PageTools'export default { install(Vue) { // 注册全局的通用栏组件对象 Vue.component('PageTools', PageTools) }}在入口处
2021-09-07 09:44:03
114
原创 element Upload 上传文件只能上传一次 ,再次点击上传无反应的问题的坑
element Upload 上传文件只能上传一次 ,再次点击上传无反应的问题的坑今天在开发的时候,文件上传都没有问题,但是修改文件数据后,再次上传图片就无反应了.导致整个问题的原因是因为你没有清除当前 fileList,导致它一直保存这你第一次上传文件的信息,只要你把他一刀切掉就好了!那么问题来了,应该怎么清除呢!所以要想继续上传文件,就需要在on-success钩子函数中通过ef 拿到它的document元素进行清除已经上传的文件看下面的代码:<el-uploadclass="upl
2021-09-06 09:57:18
1477
1
原创 将数组数据转化成树形结构
将数组数据转化成树形结构然后,我们需要将列表型的数据,转化成树形数据,这里需要用到递归算法封装一个工具方法,src/utils/index.js/** * * * 将列表型的数据转化成树形数据 => 递归算法 => 自身调用自身 => 一定条件不能一样, 否则就会死循环 * 遍历树形 有一个重点 要先找一个头儿 * ***/export function tranListToTreeData(list, rootValue) { var arr = [] lis
2021-09-03 15:20:01
325
原创 scss的用法
SCSS处理的了解和使用官方文档首先注意,这里的sass和我们的scss是什么关系sass和scss其实是**一样的**css预处理语言,SCSS 是 Sass 3 引入新的语法,其后缀名是分别为 .sass和.scss两种。SASS版本3.0之前的后缀名为.sass,而版本3.0之后的后缀名.scss。两者是有不同的,继sass之后scss的编写规范基本和css一致,sass时代是有严格的缩进规范并且没有‘{}’和‘;’。而scss则和css的规范是一致的。搭建小型测试环境为了方便应
2021-09-02 15:06:29
297
原创 for循环中关于var和let的区别
for 循环中的 let 声明在 let 出现之前, for 循环定义的迭代变量会渗透到循环体外部:for (var i = 0; i < 5; ++i) {// 循环逻辑}console.log(i); // 5改成使用 let 之后,这个问题就消失了,因为迭代变量的作用域仅限于 for 循环块内部:for (let i = 0; i < 5; ++i) {// 循环逻辑}console.log(i); // ReferenceError: i没有定义在使用 va
2021-09-01 10:23:11
184
原创 provide和inject的用法
1、provide与inject的功能通过provide与inject,可以把一个祖先组件指定的数据和方法,传递给其所有子孙组件中provide 和 inject 主要在开发高阶插件/组件库时使用.由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据,provide和inject是成对出现的.##2.为什么不使用父子组件props传值呢?因为父子组件props传值需要需要知道往哪一个子组件传值,而
2021-08-31 09:25:37
1354
原创 vue-element-admin的介绍
学习和了解通用的vue后台集成方案**vue-element-admin**vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。vue-element-admin 是一个后台集成方案, 集成了PC项目中很多的业务场景和功能, 尤其在当下SPA的趋势下,我们可以从中获得很多成熟的解决方案.
2021-08-30 10:11:06
2758
原创 Vuex中的模块化-Module
Vuex中的模块化-Module为什么会有模块化?由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。这句话的意思是,如果把所有的状态都放在state中,当项目变得越来越大的时候,Vuex会变得越来越难以维护由此,又有了Vuex的模块化模块化的简单应用应用定义两个模块 user 和 settinguser中管理用户的状态 tokensetting中管理 应用的名称 nameconst stor.
2021-08-29 10:11:52
61
原创 ## Vuex中的模块化-Module
## Vuex中的模块化-Module### 为什么会有模块化?> 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。这句话的意思是,如果把所有的状态都放在state中,当项目变得越来越大的时候,Vuex会变得越来越难以维护由此,又有了Vuex的模块化### 模块化的简单应用**应用**定义两个模块 **user** 和 **setting**user中管理用户的状态 tokensett...
2021-08-29 09:40:00
45
原创 一文让你看懂什么是vuex
一文让你看懂什么是vuex为什么会有Vuex ? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用**集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测**的方式发生变化。vuex是采用集中式管理组件依赖的共享数据的一个工具,可以解决不同组件数据共享问题。结论修改state状态必须通过**mutations****mutations**只能执行同步代码,类似ajax,定时器之类的代码不能在mutations中执行执行异步代码,要通过acti
2021-08-28 22:39:24
62
原创 vue解决跨域方法
vue解决跨域方法1.什么是跨域跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议,端口,域名。只要这个3个中有一个不同就是跨域。举例:当前页面url 被请求页面url 是否跨域 原因http://www.test.com/ http://www.test.com/index.html 否 同源(协议、域名、端口号相
2021-08-27 14:15:44
84
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人