vue项目优化
文章平均质量分 52
记录vue项目开发后期填坑、优化的艰辛历程
Steven--Lee
这个作者很懒,什么都没留下…
展开
-
在vue2中使用vue3的核心功能(渐进式升级vue版本)
学了真香的vue3语法,但目前的vue2项目中短期内不会再升级了,空有屠龙之术无法施展?来试试以下的解决方案,让你在vue2项目中也能用上vue3的核心语法原创 2022-02-10 14:59:42 · 2916 阅读 · 4 评论 -
vue项目运行正常,打包后无法正常显示(30秒解决方案)
一.问题描述使用vue-cli创建的的项目,开发过程中无任何问题,在开发完成后准备打包上线,此时打包也无任何问题。然而打包后使用Tomcat发布时却出现了白屏问题。二.原因探索1.打开控制台查看network,显示的都是各类资源404的报错,那很显然是资源路径错误。注意,下图中的资源路径没有拼接项目名。(使用本地Tomcat测试)2.资源路径尝试为了确认第一步的猜想,我们可以手动加上...原创 2020-03-02 22:13:29 · 12838 阅读 · 1 评论 -
vue子组件样式无效问题
问题描述拿elementUI中的row-class-name来说,组件中直接给这个css类加样式你会发现它根本不生效。记得当时临时解决方案是写了一个无scoped限定作用域的style(css代码块)研究发现样式不生效是因为使用scoped限定作用域后,父组件的样式将不会作用到子组件中。解决方案在css代码前加上/deep/,你可以叫它深度选择器。它还可以写作>>>E...原创 2020-01-13 00:21:40 · 7494 阅读 · 0 评论 -
webpack打包名称优化
一个开发后期考虑的优化问题一、问题描述webpack项目打包默认名称是dist,每次打包之后都会将上一次打包的文件覆盖。每次打完包想通过名称知道这个包的版本日期,且想保存下每日版本的包,怎么搞?二、解决思路1.打包文件覆盖问题仔细看下以下配置代码你就明白了// package.json"scripts": { "clean": "rimraf dist", "b...原创 2019-05-18 14:41:58 · 2538 阅读 · 0 评论 -
webpack打包时间优化
一、添加依赖位置配置主要的webpack搜索文件的位置,(依赖的包文件主要是从node_module文件夹中查找,项目中自己编写的代码主要是在根目录的src目录下)。配置文件中加入以下代码即可// webpack-config.js文件resolve: { modules: [ resolve('src'), resolve('node_modules') ]}...原创 2019-05-12 15:11:50 · 2164 阅读 · 0 评论 -
分模块打包优化
一、问题描述因为构建vue项目之初没有考虑到项目加载速度方面的优化问题,在开发了一段时间之后发现打包后两个js文件过大,将近有20mb,每次打开项目都会有好几秒的空白,要解决这个问题就要用到分模块打包。二、优化分享一种最有效也是最简单的改动。在引入路由component的地方使用函数的方式引用,代码如下:优化前引入语法import login from '../src/compon...原创 2019-05-07 14:43:01 · 832 阅读 · 0 评论 -
vue-webpack打包后图片找不到
一、问题描述项目在使用webpack打包后,很常见的一个问题就是dev环境可见的图片在打包之后找不到文件。二、异常原因1.图片未被打包当使用的图片url是动态拼接的,可能会出现webpack没有检测到该图片被引用的问题,所以打包后图片因为不存在而找不到。2.图片路径错误当一个图片被多次引用,当使用的是动态拼接为打包前图片存放的路径会找不到图片,因为打包时会把动态生成的路径直接存下来,不...原创 2019-03-22 09:58:28 · 3050 阅读 · 0 评论 -
element-UI输入框时间默认今天
背景描述需要实现elementUI日期输入框默认显示今天日期的功能。功能实现文档中看到了default-value,描述是可以设置时间/日期选择器默认时间,无奈使用了发现不生效,于是直接使用v-model实现功能。代码如下:<!-- template --><el-date-picker v-model="dataPicker" align="righ...原创 2019-03-27 13:37:58 · 9388 阅读 · 1 评论 -
vue组件间相互传值、调用以及状态管理九种解决方案
……文章目录前言1.父组件调用子组件2.子组件接收数据1.$emit事件发射2.v-on事件监听1.父组件内容插入2.子组件渲染时使用插槽1.定义中间件2.中间件的事件监听3.中间件的事件驱动1.父组件中定义一个ref2.子组件中获取这个ref值1.prototype中定义全局变量2.调用取值1.构造注入对象2.注入对象并使用END……前言其中包含单纯传值、方法调用、传递节点数据等等解决方...原创 2019-01-31 10:50:31 · 1889 阅读 · 0 评论 -
vue组件中使用elementUI样式(row-class-name)无效问题
问题描述vue项目中,需要给vue表格中的每一行加入自定义的样式,根据文档给<el-table>组件加上row-class-name属性即可,直接加入该属性并且在当前vue组件中配置对应class发现样式并没有生效。解决方案1.使用全局属性在elementUI中,row-class-name、row-style、cell-class-name等属性要想生效必须使用全局class...原创 2018-11-25 23:55:42 · 17305 阅读 · 9 评论