vue
vue框架相关的问题
丢丢的大神
心中有沟壑,下笔如有神,天道酬勤。
展开
-
elementUI el-table合并单元格
合并单元格,如果id列值一致,则合并。<el-table :data="tableData6" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px"> <el-table-column prop="id" label="ID" width="180"> </el-table-column> <el-table-column pro转载 2022-03-21 13:46:24 · 576 阅读 · 0 评论 -
vue中动态化的按需使用keep-alive
主要讲下啥是 keep-alive、具体到项目中怎么用的问题。项目相关:panda-mall1、啥是 keep-alive?就是缓存,我们还是来看看具体的使用场景。首先简单一点,第一种比较普遍的场景,当我们从首页–>列表页–>商详页–>再返回,这时候列表页应该是需要keep-alive的。然后第二种,当我们从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要...转载 2022-03-09 16:56:40 · 709 阅读 · 0 评论 -
element-ui的table在flex布局下宽度一直增大的问题,解决了!!(亲测有效果)
el-table的父元素不能是flex:1的元素,需要在外面再加一层元素,并且父元素设置成absolute,祖父元素设置成relative即可。今天开发博客后台界面时遇到了这个问题,百思不得其解!原创 2022-10-31 10:51:59 · 2240 阅读 · 0 评论 -
Vue 如何动态编译 HTML
Vue 项目中用到其他的原生js组件,想动态编译 html,但没有找到好的办法,这里作一下检索到的可能解决方案记录,后续仔细看看VueJS 如何编译服务器端远程模板【异步组件+简单方法】原创 2021-11-09 11:35:18 · 1005 阅读 · 0 评论 -
Vue3.x Vue.config.js 配置
vue.config.js 配置,这里做一下记录let path = require('path')function resolve (dir) { return path.join(__dirname, dir)}module.exports = { baseUrl: './', outputDir: 'dist', lintOnSave: true, runtimeCompiler: true, //关键点在这 // 调整内部的 webpack 配置。 // 查阅原创 2021-11-03 14:38:10 · 880 阅读 · 0 评论 -
高质量 Vue 组件 iView
iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。使用npm install iview --sae<template> <Slider v-model="value" range></Slider></template><script> export default { data () { return {原创 2021-11-03 14:22:36 · 134 阅读 · 0 评论 -
封装 element-ui el-table
element-ui el-table功能很强大,也很好用,但是组件写起来有些麻烦,需要进一步封装,下面是一个封装的例子,可以 formatData,可以利用 slot 动态传递模板,大家觉得有用可以看看 const columns = [{key: 'name', minWidth: 150, fixed: true, showOverflowTooltip: true}, {slot: 'actions'}];<v-table :data="data" :columns="columns.原创 2021-10-21 20:21:36 · 220 阅读 · 0 评论 -
ResizeObserve 在 Echarts 的使用
前言前端图表经常要进行 resize 操作,一般我们会想到监听 window resize event, 但是这个事件只能监听 window 窗口大小的改变, 没有办法监听到某个div大小的改变目前解决方案ResizeObserver下面是使用的例子const resizeObserver = new ResizeObserver((enties, observer)=> { // 这里可以拿到观察的所有实体});const elem = document.querySelect(原创 2021-10-21 19:35:56 · 924 阅读 · 0 评论 -
[webpack-cli] Unable to load ‘@webpack-cli/serve‘command
我的 webpack 是5+ 版本,webpack-cli 是 4.5.0,webpack 启动 vue 项目报这个错,查了很久没有啥解决,然后不断的尝试webpack-cli的所有4+版本,最后发现将webpack-cli 更新到 4.9.0 最新版就可以了原创 2021-10-14 16:58:44 · 628 阅读 · 4 评论 -
TypeError: Cannot read property ‘parseComponent‘ of undefined 报错解决方法
启动vue时,报下面这个错误,网上说啥的都有,但是解决不了问题今天遇到了一个这样的错误,查的结果说是Vue和vue-template-compiler版本不一致导致的,我就很纳闷,我之前都很可以运行,现在却是报错说不能运行了,然后我就去百度查解决办法,有说让删除node_modules把版本改为一致重新安装的,还有的是说把那俩个版本都更新到最新的,反正我是试了很多,但是开始就是没有解决最后经过检索发现,只需要把 vue-template-compiler 升级到最新版本就可以 "vue-templa原创 2021-10-14 16:52:19 · 758 阅读 · 0 评论 -
element-ui 自定义主题
使用vue开发项目,用到elementUI,根据官网的写法,我们可以自定义主题来适应我们的项目要求,下面来介绍一下两种方法实现的具体步骤,(可以参考官方文档自定义主题官方文档),先说项目中没有使用scss编写,用主题工具的方法(使用的较多) 第一种方法:使用命令行主题工具 使用vue-cli安装完项目并引入element-ui(具体可参考第二种方法中的介绍) 一、安装工具 1,安装主题工具 npm i e...转载 2021-08-13 17:11:00 · 868 阅读 · 0 评论 -
老vue项目webpack3升级到webpack5全过程记录(二)
本文接上篇博客记录一些配置的升级过程中遇到的坑。1、设置mode通过指定mode参数,启用对应环境下webpack内置的优化。有三个可选参数:development,production,none。默认值为production,生产环境在production模式下,会自动压缩代码,可以去除之前配置的一些压缩代码的插件。2、use写法不同rules 中对loader的指定写法,支持写对象和数组模式3、改写file-loader 和 url-loader在webpack4前我们对一些静态资源的.转载 2021-07-21 22:03:23 · 611 阅读 · 0 评论 -
老vue项目webpack3升级到webpack5全过程记录(一)
背景19年新建的vue项目,使用的是webpack3,随着项目的积累,组件的增多导致本地构建,线上打包等操作速度极慢,非常影响开发效率和部署效率,基于此问题,本次对webpack及相关插件进行了优化和升级。本博文分为2篇,第 1 篇 会直接附上可运行的代码(去除了一些业务代码配置),直接粘贴复制即可使用(注意是基于vue2.0项目原配置基础上的修改哦,在网上找了一堆都是升级过程的各种坑说明,不如直接粘贴复制运行来的爽丫~~~),第 2 篇也会对相关的修改和遇到的坑进行描述说明。升级效果1、本地构建.转载 2021-07-21 21:22:00 · 1125 阅读 · 6 评论