分类：Vue

2020
10-08

Vue打包部署到Nginx时,css样式不生效的解决方式

今天在将使用Vue-cli编写的前端项目部署到Nginx的时候发生了一件很困扰的问题：Vue-cli项目在本地使用npmrundev的时候，页面样式是可以正常加载出来的，但是我将Vue-cli项目通过npmrunbuild打包生成的dist目录部署到Nginx之后，通过访问是无法加载出来样式的。于是乎，在网上开始寻找资料，发现大部分前辈的解决方案都是在，config的文件夹中的index.jsassetsRoot:path.resolve(__dirname,'../dist'),assetsSubDirector... 继续阅读 >

2020
10-08

解决vue+elementui项目打包后样式变化问题

博主刚刚解决了index.html空白问题，刚打开项目页面又发现了样式出现了大问题，样式与开发版本有很大不同，有些样式没有生效。利用搜索引擎，找到了问题所在以及解决办法：main.js中的引入顺序决定了打包后css的顺序，组件内的样式没有生效可能是被第三方组件样式覆盖了，所以把第三方组件放在前面引入，router放在后面引入，就可以实现组件样式在第三方样式之后渲染。代码如下：main.js//TheVuebuildversiontoloadwiththe... 继续阅读 >

2020
10-08

vue实现PC端分辨率适配操作

依赖项目基础配置使用vue-cli生成自适应方案核心：阿里可伸缩布局方案lib-flexiblepx转rem：px2rem，它有webpack的loaderpx2rem开始先使用vue脚手架初始化一个webpack项目vueinitwebpack项目名项目初始化好了之后，进入项目目录中(cd项目名)安装lib-flexible和px2rem-loadernpmilib-flexible-Snpmipx2rem-loader-D安装好了之后还需要在项目的入口文件main.js里引入lib-flexible//main.jsimport'lib-flexi... 继续阅读 >

2020
10-08

解决Vue的项目使用Element ui 走马灯无法实现的问题

1.在vue项目中引入elementuihttp://element.eleme.io/#/zh-CN/component/carousel引入后，HTML部分<el-carouselheight="150px"><el-carousel-itemv-for="iteminimgList":key="item"height="300px"><h3><img:src="item"alt=""></h3></el-carousel-item></el-carousel>JS部分<script>exportdefault{data(){return{imgList:[require('../../assets/img/images/a1.png'),require('../../assets/img/images/a2.png'),requ... 继续阅读 >

2020
10-08

浅谈vue中使用编辑器vue-quill-editor踩过的坑

结合vue+element-ui+vue-quill+editor二次封装成组件1.图片上传分析原因项目中使用vue-quill-editor富文本编辑器，在编辑内容的时候，我们往往会编辑图片，而vue-quill-editor默认的处理方式是直接将图片转成base64格式，导致上传的内容十分庞大，且服务器接受post的数据的大小是有限制的，很有可能就提交失败，造成用户体验差。引入element-ui编辑editor.vue文件<template><div><!--图片上传组件辅助--><el-upload... 继续阅读 >

2020
10-08

Vue 实现对quill-editor组件中的工具栏添加title

前言：quill-editor组件中的工具栏都是英文，而且最难受的时没有title提示，要怎样给他添加title，并且是中文的title提示呢？一、创建一个quill-title.js文件①、在其中插入以下代码consttitleConfig={'ql-bold':'加粗','ql-color':'颜色','ql-font':'字体','ql-code':'插入代码','ql-italic':'斜体','ql-link':'添加链接','ql-background':'背景颜色','ql-size':'字体大小','ql-strike':'删除线','ql-script':'上标/... 继续阅读 >

2020
10-08

解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题

假设你已经知道如何引入vue-quill-editor，并且遇到了跟我一样的问题（如上图），显示出来的图标排列不整齐，字体，文字大小选择时超出边框。你可以试试下面这种解决办法。在使用文本编辑器的vue页面中引入vue-quill-editor中的样式。@import"../../node_modules/quill/dist/quill.snow.css";然后在组件中添加class名——class=“ql-editor”。<quill-editorclass="ql-editor"></quill-editor>你就会看到错乱的图标样式已经改... 继续阅读 >

2020
10-08

Vue 根据条件判断van-tab的显示方式

我就废话不多说了，大家还是直接看代码吧~.vue<van-tabsv-model="activeTab"><van-tabtitle="XXX"v-if="isShow"></van-tab><van-tabtitle="XXX"></van-tab></van-tabs>.tsprivateactiveTab=0;privateisShow=false;补充知识：vueelui使用v-if判断tab时样式错乱项目中用elui的tab显示数据6个数组的数据不同所以用了v-if来判断但是同样的数据，显示出来的样式乱七八糟查了半天才知道是因为没有加上key值... 继续阅读 >

2020
10-08

在vue中使用el-tab-pane v-show/v-if无效的解决

我就废话不多说了，大家还是直接看代码吧~解决方法如下：<template><el-tabsv-model="settype"@tab-click="tabClick"ref="tabs"><el-tab-panelabel="广告位设置"name="bannerset">广告位设置</el-tab-pane><el-tab-panelabel="推送设置"name="sendset">推送设置</el-tab-pane><el-tab-panelabel="权限管理"name="authset">权限管理</el-tab-pane><el-tab-panelabel="红包配置"name="redpoketset">红包配置</el... 继续阅读 >

2020
10-08

Vue解决echart在element的tab切换时显示不正确问题

最近在项目中遇到了这种情况，需要在tab控件上渲染多个echart图标，然后切换查看时，发现图表的宽度不正确原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。所以要做的就是在页面加载时，就对图表进行初始化。网上的解决方案大多都是监听tab的切换事件，然后再根据切换的页面重新渲染echart组件，比较麻烦。如下是个人的解决方法：原理：利用v-if属性,当切换至对应的tab时，设置其v-if的值为true即... 继续阅读 >

2020
10-08

Vue scoped及deep使用方法解析

众所周知，在组件中给style标签添加属性scoped属性可以避免组件内样式对外界造成污染，scoped使得组件内的样式变成局域样式，只作用于当前组件。原理如下-------在编译组件的时候，如果当前组件内style标签上有scoped属性，那么会在当前所有标签上添加一个【data-v-hash】属性，而当前样式表内的所有末尾选择器后面也会加上该属性，那么就使得当前组件内的样式只会作用于当前组件内的元素。值得注意的是,当父组件，子组件同时使... 继续阅读 >

2020
10-08

Vue中computed及watch区别实例解析

计算属性computed:1.支持缓存，只有依赖数据发生改变，才会重新进行计算2.不支持异步，当computed内有异步操作时无效，无法监听数据的变化3.computed属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值4.如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed5.如果computed属性属性值是函... 继续阅读 >

2020
10-08

Vue数组响应式操作及高阶函数使用代码详解

数组的响应式操作//this.letters.push('123');//在末尾添加一个元素//this.letters.pop();//从末尾删除一个元素//this.letters.unshift('111');//在开端添加一个元素//this.letters.shift();//从开端删除一个元素//this.letters.splice(1,2);//从下标为1的元素开始删除两个元素//this.letters.splice(1,2,'777','888');//从下标为1的元素开始删除两个元素，并插入一个新元素//this.letters.splice(1,0,'777','888');//在下标为... 继续阅读 >

2020
10-08

vue 组件简介

什么是组件？web的组件其实就是页面组成的一部分，好比是电脑中的每一个元件（如硬盘、键盘、鼠标），它是一个具有独立的逻辑和功能或界面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用。web页面就是由一个个类似这样的部分组成的，比如导航、列表、弹窗、下拉菜单等。页面只不过是这些组件的容器，组件自由组合形成功能完整的界面，当不需要某个组件，或者想要替换某个组件时，可以随时进行替换和删除，而不影响... 继续阅读 >

2020
10-08

vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作

在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话，有必要考虑引入vueｘ来管理这些凌乱的状态，今天这边博文用来记录这一整个的过程，后台api接口是使用webpack-server模拟的接口，这个前面的文章中有提到，需要的可以去翻阅。整个的流程是在组件的created中提交dispatch，然后通过action调用一个封装好的axios然后再触发mutation来提交状态改变state中的数据，然后在组件的计算属性中获取state的数... 继续阅读 >

2020
10-08

vue抽出组件并传值实例

使用父组件向子组件传值的方式1，抽出的组件以及写法2，注册使用的父组件以及传值，父组件returnimages补充知识：vue如何抽取公共组件并全局注册项目的抽象程度越高，代码修改起来就越方便，如何抽取一个公共的组件并且全局注册呢？步骤结构图公共组件代码<template><imgclass="wordLook":src="imgWifi"width="17%"@click="wifiBrightClick()"/></template><script>exportdefault{data(){return{imgWifi:require... 继续阅读 >