vue
文章平均质量分 57
Steven--Lee
这个作者很懒,什么都没留下…
展开
-
在vue2中使用vue3的核心功能(渐进式升级vue版本)
学了真香的vue3语法,但目前的vue2项目中短期内不会再升级了,空有屠龙之术无法施展?来试试以下的解决方案,让你在vue2项目中也能用上vue3的核心语法原创 2022-02-10 14:59:42 · 2943 阅读 · 4 评论 -
从0开始调试源码(以vue3为例)
一、生成源码研究源码最好的方式还是自己本地运行起来打着断点看,都说授人以鱼不如授人以渔,所以源码调试的方法可能比之后的源码分析更加重要。1. clone项目git clone git@github.com:vuejs/vue-next.git2.安装依赖yarn --ignore-scripts3.修改配置修改package.json中的scripts下dev的配置,后边加上--sourcemap"dev": "node scripts/dev.js",// 改为"dev": "no原创 2021-02-02 01:10:32 · 1250 阅读 · 0 评论 -
vue项目运行正常,打包后无法正常显示(30秒解决方案)
一.问题描述使用vue-cli创建的的项目,开发过程中无任何问题,在开发完成后准备打包上线,此时打包也无任何问题。然而打包后使用Tomcat发布时却出现了白屏问题。二.原因探索1.打开控制台查看network,显示的都是各类资源404的报错,那很显然是资源路径错误。注意,下图中的资源路径没有拼接项目名。(使用本地Tomcat测试)2.资源路径尝试为了确认第一步的猜想,我们可以手动加上...原创 2020-03-02 22:13:29 · 12937 阅读 · 1 评论 -
vue子组件样式无效问题
问题描述拿elementUI中的row-class-name来说,组件中直接给这个css类加样式你会发现它根本不生效。记得当时临时解决方案是写了一个无scoped限定作用域的style(css代码块)研究发现样式不生效是因为使用scoped限定作用域后,父组件的样式将不会作用到子组件中。解决方案在css代码前加上/deep/,你可以叫它深度选择器。它还可以写作>>>E...原创 2020-01-13 00:21:40 · 7504 阅读 · 0 评论 -
快速查看当前node项目使用的依赖并生成图表
node项目快速查看依赖使用情况命令在打包的命令后边加一个--report参数npm run build --report示例END原创 2019-12-09 23:28:26 · 4942 阅读 · 0 评论 -
vue实现dom元素拉伸
一、实现效果封装了三个methods方法,传入对应节点即可实现对应元素节点的拉伸收缩。二、代码1. 函数封装/**** 让指定的dom元素支持沿x轴的拉伸收缩* oBox为指定的dom节点* e为鼠标按键默认传入的对象*/ moveX(oBox, e) { let x = e.clientX; let oBoxW = oBox.offsetWidth; ...原创 2019-09-17 00:21:45 · 4430 阅读 · 2 评论 -
webpack打包名称优化
一个开发后期考虑的优化问题一、问题描述webpack项目打包默认名称是dist,每次打包之后都会将上一次打包的文件覆盖。每次打完包想通过名称知道这个包的版本日期,且想保存下每日版本的包,怎么搞?二、解决思路1.打包文件覆盖问题仔细看下以下配置代码你就明白了// package.json"scripts": { "clean": "rimraf dist", "b...原创 2019-05-18 14:41:58 · 2555 阅读 · 0 评论 -
分模块打包优化
一、问题描述因为构建vue项目之初没有考虑到项目加载速度方面的优化问题,在开发了一段时间之后发现打包后两个js文件过大,将近有20mb,每次打开项目都会有好几秒的空白,要解决这个问题就要用到分模块打包。二、优化分享一种最有效也是最简单的改动。在引入路由component的地方使用函数的方式引用,代码如下:优化前引入语法import login from '../src/compon...原创 2019-05-07 14:43:01 · 839 阅读 · 0 评论 -
element-UI输入框时间默认今天
背景描述需要实现elementUI日期输入框默认显示今天日期的功能。功能实现文档中看到了default-value,描述是可以设置时间/日期选择器默认时间,无奈使用了发现不生效,于是直接使用v-model实现功能。代码如下:<!-- template --><el-date-picker v-model="dataPicker" align="righ...原创 2019-03-27 13:37:58 · 9407 阅读 · 1 评论 -
vue-webpack打包后图片找不到
一、问题描述项目在使用webpack打包后,很常见的一个问题就是dev环境可见的图片在打包之后找不到文件。二、异常原因1.图片未被打包当使用的图片url是动态拼接的,可能会出现webpack没有检测到该图片被引用的问题,所以打包后图片因为不存在而找不到。2.图片路径错误当一个图片被多次引用,当使用的是动态拼接为打包前图片存放的路径会找不到图片,因为打包时会把动态生成的路径直接存下来,不...原创 2019-03-22 09:58:28 · 3071 阅读 · 0 评论 -
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 · 1909 阅读 · 0 评论 -
ElementUI极简loading动画
掌握本教程只需要三分钟~全局loading1.在methods中添加以下函数。openFullScreen(time) { const loading = this.$loading({ lock: true, text: 'Loading', spinner: 'el-icon-loading', backgrou...原创 2019-01-16 22:53:21 · 4566 阅读 · 0 评论 -
vue入门级技术分享
一、背景1.为什么用vue.jsmvvm(Model-View-ViewModel)模式框架渐进式框架高效协同开发2.常见需求及解决方案需求解决方案声明式渲染、组件系统vueUI组件ElementUI客户端路由vue-router大规模状态管理vuex构建工具webpack项目脚手架vue-cli数据持久化vu...原创 2019-01-27 16:49:49 · 2020 阅读 · 0 评论 -
vuex最小demo
一、创建vuex配置管理文件(store.js)import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { display: 'smooth' }, mutations: { // 参数一,指向该vuex对...原创 2019-01-19 09:19:55 · 719 阅读 · 0 评论 -
vue遍历生成的输入框 绑定及修改值
对于vue遍历生成的输入框进行其值的修改与保存是vue项目开发过程中的一种常规操作。这种操作的难点在于生成数量的不确定,不能在在组件中的data直接定义。思路获取生成的输入框数量初始化数组,数组的长度与待绑定输入框数量一致将每一个输入框的v-model与数组特定项进行绑定实现代码1.data中定义一个存放model值的空数组data() { return { ...原创 2019-01-06 14:13:50 · 10730 阅读 · 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 · 17346 阅读 · 9 评论 -
vuex入门笔记
概念专为vue项目开发的状态管理模式。采用集中式存贮管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式改变。state,驱动应用的数据源;view,以声明方式将 state 映射到视图;actions,响应在 view 上的用户输入导致的状态变化。 特点1. 响应式状态改变驱动组件高效更新,反之亦然。2. 唯一的状态修改途径 提交mut...原创 2018-07-19 00:33:10 · 455 阅读 · 0 评论