![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE
przlovecsdn
这个作者很懒,什么都没留下…
展开
-
vue中图片转换为base64上传、预览、删除
<template> <div class="com-upload-img"> <div class="img_group"> <div class="img_box" v-if="allowAddImg"> <input t原创 2018-05-16 15:31:42 · 15563 阅读 · 2 评论 -
vue通过DllPlugin插件优化打包性能,减少打包时间(基于vue-cli)
step1:在build文件夹下新建 webpack.dll.conf.js 文件(即和webpack.base.conf.js同级)const path = require('path')const webpack = require('webpack');module.exports = {output: { filename: 'dll/[name].dll.js',...原创 2018-09-18 18:18:52 · 4958 阅读 · 2 评论 -
vue打包通过image-webpack-loader插件对图片压缩优化
vue正常打包之后一些图片文件很大,使打包体积很大,通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积step1:npm install image-webpack-loader --save-devstep2:在build/webpack.base.conf.js中改如下配置module.exports = { module: { ...原创 2018-09-18 17:57:17 · 15829 阅读 · 2 评论 -
vue通过vue-router拦截实现登录验证
在实际开发中,有些页面需要登录之后才能访问,采用vue-router+vuex+elememt-ui+axios的方式实现。以下是案列代码:login.vue<template> <div class="login"> <el-input type="text" v-model="username" placeholder="请输入用户名&qu原创 2018-08-31 16:40:21 · 7180 阅读 · 0 评论 -
vue调试工具Devtools不出现的解决方式
在使用vuex时,想直观的查看数据state的变动,用Devtools可实现,但是在Google浏览器中开发调试的时候,右上角出现vue的图标,但是在开发者工具中没有出现vue调试(已在扩展程序中安装 Vue Devtools)vue图标:开发者工具:扩展程序:没显示调试工具的原因是用了生产环境的版本或是压缩的vue版本,或是没有勾选:允许访问文件网址https:...原创 2018-08-31 15:19:38 · 74874 阅读 · 11 评论 -
vue中使用jQuery
1、 npm install jquery --save 2、在webpack.base.config.js中添加module.exports = {context: path.resolve(__dirname, '../'),entry: {app: './src/main.js'},......plugins: [ new webpack.ProvidePl...原创 2018-08-08 16:00:45 · 265 阅读 · 0 评论 -
vue设置404页面
在router/index.js中添加{path: "/404",name: "notFound",component: notFound}, {path: "*", // 此处需特别注意置于最底部redirect: "/404"}原创 2018-08-08 15:56:52 · 19258 阅读 · 2 评论 -
通过webpack之externals配置减少打包vendor体积
1、在webpack.base.conf.js中配置module.exports = {context: path.resolve(__dirname, '../'),entry: {app: './src/main.js'},externals: { 'vue': 'Vue', "element-ui": "ELEMENT", "vue-router": ...原创 2018-08-08 15:54:34 · 5317 阅读 · 2 评论 -
vue之组件之间的传值
1、父组件向子组件传值//parent.vue<template> <div> <child :send-msg-to-child="toChildMsg"></child> </div></template><script>import child原创 2018-08-08 15:51:36 · 447 阅读 · 0 评论 -
vue自定义指令v-load-more实现上拉加载
vue通过自定义指令实现loadMore上拉加载,实现方法:common.js/** * 获取style样式 */export const getStyle = (element, attr, NumberMode = 'int') => { let target; // scrollTop 获取方式不同,没有它不属于style,而且只有doc...原创 2018-09-29 17:17:27 · 9824 阅读 · 2 评论