vue
WX_安琪拉打野怪
这个作者很懒,什么都没留下…
展开
-
vue源码解析---data,Observer,Dep,Watcher之间的关系
一、data,Observer,Dep,Watcher之间的关系上图截自《深入浅出vue.js》。通过Observer类提供的方法,将data转化为具有getter以及setter的数据。并在getter中收集依赖装在Dep中,原创 2021-05-29 15:53:40 · 655 阅读 · 1 评论 -
vue单页项目常用优化
vue项目是单页应用,项目在第一次加载的时候会将大部分内容都加载进来,故而会导致加载很慢,以下是优化方案:1.使用cdn加载一些不常变化的文件,比如用到的UI框架,vue脚手架相关的文件 (参见vue项目优化--引入cdn文件)2.将静态的js,css以及图片放到第三方服务器3.按需加载路由4.webpack-parallel-uglify-plugin 可以优化打包js文件5.在代码层面进行优化:(1) 将重复的功能分块提取出来,封装成组件,让代码进行有效的复用(2) 尽量..原创 2020-08-02 17:15:39 · 176 阅读 · 0 评论 -
vue项目优化--引入cdn文件
目的为了减少webpack打包之后包的体积,可以将一些不常改动的第三方的库放在cdn上。这里会用到webpack的插件html-webpack-plugin脱离vue-cli脚手架,webpack的做法安装html-webpack-pluginnpm install --save-dev html-webpack-plugin在webpack.config.js中引入该插件const HtmlWebpackPlugin = require('html-webpack-plugin')原创 2020-06-10 14:33:34 · 1086 阅读 · 0 评论 -
Vue-cli3.0引入全局预加载样式---以less为例
方式一: 自动化导入1.npm安装style-resources-loader2.在vue.config.js中添加以下代码: const types = ['vue-modules', 'vue', 'normal-modules', 'normal'] types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))function addStyleResource(rule) {原创 2020-05-14 20:45:19 · 2162 阅读 · 0 评论 -
vue--前端接收后台传过来的excel文件数据,并在前端做下载
一.思路:1.利用Bold接收数据2.利用a标签做文件下载二.相关代码axios.post(url, queryParams, { responseType: 'arraybuffer' }).then((_res) => { const blob = new Blob([_res.data], { type: 'application/vnd.ms-ex...原创 2019-06-26 10:54:25 · 13709 阅读 · 3 评论 -
elementUI上传过程中限制尺寸
要点:1.上传之前的的钩子函数2.利用promise返回图片加载的状态代码如下:beforeAvatarUpload (res, file) { const isSize = new Promise((resolve, reject) => { let width = 220 let height = 220 le...原创 2019-06-25 14:49:42 · 1038 阅读 · 0 评论 -
webpack单入口和多入口配置
原文链接:https://segmentfault.com/a/1190000011333071配置文件webpack.config.js就是Webpack的配置文件,这个文件需要自己在项目根目录下手动建立。建立好后我们对其进行配置,先看下面的代码(webpack.config.js的基本结构),这是一个没有内容的标准webpack配置模版。webpack.config.js m...转载 2018-09-20 16:59:42 · 1414 阅读 · 0 评论 -
vue框架中的表单输入框不支持focus以及blur事件的解决方案
采用指令的方式来解决这个问题(此处的前端框架以mint-ui为例):1.html引用: v-mtfocus2.在实例中添加指令directives: { 'mtfocus' (el, binding, vnode) { let mtinput = el.querySelector('input') mtinput.onfocus = function () { ...原创 2018-06-21 18:06:00 · 34362 阅读 · 0 评论 -
vue-cli学习
vue-cli的作用是为我们搭建开发所需要的环境为我们的开发带来便利1. 安装vue-cli注意:在安装了ndoe,npm的基础之上安装vue-cli.在命令提示行(cmd)中输入: npm install vue-cli -g检测版本号:vue -V注意:V为大写的.如果可以出来版本号,即说明安装成功2. 初始化项目在命令提示行(cmd)中输入命令:vue init <...原创 2018-05-16 15:51:10 · 273 阅读 · 0 评论 -
windows环境搭建Vue开发环境
1.基本安装一、安装node.js(https://nodejs.org/en/) 下载完毕后,可以安装node,建议不要安装在系统盘(如C:)。 二、设置nodejs prefix(全局)和cache(缓存)路径nodejs安装好之后,通过npm下载全局模块默认安装到{%USERDATA%}C:\Users\username\AppData\下的Roaming\npm...转载 2018-05-14 00:10:34 · 319 阅读 · 0 评论