Vue
文章平均质量分 65
一捆铁树枝
积跬步以至千里,积怠惰以致深渊,订阅号 learnweb123 ,欢迎关注!
展开
-
vue+swiper+animate.css制作全屏滚动H5
年底了,接到需求要制作年度账单,形式就是全屏滚动H5页面,翻页时给页面元素添加动画,大概效果如下:H5长翻页动画效果接下来就来介绍一下我的制作步骤;1.安装swiper、animate.cssnpm install swiper@3 --savenpm install animate.css --save2.在main.js中引入animate.css// main.jsimport Vue from "vue"import App from "./App.vue".原创 2021-01-14 10:56:27 · 2847 阅读 · 6 评论 -
vue封装自定义组件并上传到npm
使用vue-cli3搭建团队的组件库并发布到npm 1.安装vue-cli3并创建一个项目 首先我们先安装开发必要的工具集,并创建一个项目: npm发包的常用基础知识原创 2020-12-22 11:24:57 · 3192 阅读 · 5 评论 -
vue-cli 3.0中使用postcss-px-to-viewport或postcss-pxtorem实现移动端自动适配
postcss-pxtorem和postcss-px-to-viewport都是PostCSS的插件,用于将像素单元生成rem单位或者vw单位。前端开发还原设计稿的重要性毋庸置疑,目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值,为了能够直接按照设计图的尺寸开发,并且能自动编译转换成rem,下面就来分享下postcss-pxtorem的使用。1.安装依赖npm install postcss postcss-loader postcss-pxtorem -D2.设置规原创 2020-08-10 16:17:58 · 2339 阅读 · 0 评论 -
Vue-cli3.0中 使用image-webpack-loader 做图片优化时,乱码报错解决办法
1.Vue-lie3.0中image-webpack-loader插件的使用方法 做H5活动页面的时候,使用到了很多图片,就像使用image-webpack-loader插件来做图片优化,vue-lie3.0中image-webpack-loader插件的使用方法如下:(1)安装image-webpack-loadernpm install image-webpack-loader --save --dev(2)修改vue.config.js// vue.config....原创 2020-06-02 14:09:13 · 4491 阅读 · 1 评论 -
postcss-pxtorem设置不转换UI框架的CSS单位
在移动端项目中使用postcss-pxtorem做适配,同时也使用到了第三方UI库(vant)。这时就出现了一个问题。第三方UI库使用的是px,而postcss将页面中的px 全部转化成了rem.导致样式缩小。查询postcss配置文档后发现 其提供了selectorBlackList 属性来忽略掉某些选择器,vant-UI组件库的CSS都是以.van开头的因此我只需要将 .van 忽略掉就好,具体配置如下:module.exports = { plugins: { // 这个工具可.原创 2020-12-14 09:48:34 · 3969 阅读 · 3 评论 -
vue项目中GET请求传数组类型参数
在AJAX异步请求为GET方式时,如果需要传递到后台的参数是数组类型,直接通过query的方式会有问题,参数在URL上的展示形式如下:参数:{name:[‘张三’,'李四','王五','赵六']}url:https://mp.csdn.net/console/editor/html/108768288通过query的方式传参,请求url变成了下面这样https://mp.csdn.net/console/editor/html/108768288?name[]=张三&...原创 2020-09-24 14:22:59 · 5395 阅读 · 0 评论 -
Vue中小型状态管理器observable
大型项目中的数据状态会比较复杂,一般都会使用vuex来管理。但在一些小型项目或状态简单的项目中,为了管理几个状态而引入一个库,显得有些笨重。在 2.6.0+ 版本中,新增的Vue.observable可以帮助我们解决这个尴尬的问题,它能让一个对象变成响应式数据:// store.jsimport Vue from 'vue'export const state = Vue.observable({ count: 0 })使用:<div @click="setC...原创 2020-08-10 11:30:52 · 467 阅读 · 0 评论 -
Vue设置部分页面缓存,设置部分页面不缓存
在项目中经常会遇到需要设置部分页面缓存,在路由切换时,不必每次都拉取接口更新,这样可以很大程度的提升用户体验,也可以减少接口请求次数,降低服务器消耗;首先我们先了解下vue这个框架在页面缓存知识1:keep-alive 组件; 说明: 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们; |- include 属性 说明: 只要include包含组件name则缓存下来; 官方解释:允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示 ...原创 2020-06-04 17:29:40 · 3825 阅读 · 0 评论 -
vue-cli3.0 中创建多个子项目,并能分别打包到对应的文件夹下
在项目中我们经常会做多个小的vue项目,这些项目页面不多,功能也不复杂,它们可以共用依赖,但是我们又不能每个小项目单独初始化vue项目,这个时候,我们就希望在一个vue脚手架下创建多个子项目,它们互不干扰,可以独立运行,但又能共用一套依赖; 其实这个需求尤大大早就替我们想到了,在vue-cli的官方文档中就有介绍;pages Type:Obj...原创 2020-04-26 16:57:35 · 12280 阅读 · 6 评论 -
一步一步学会使用vuex
1. vuex是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。白话:vuex就是帮我们存储一下多个组件共享的数据,方便我们对其读取和更改。2. State官方解释:Vuex使用单一状态树,用一个对象就包含了全部的应用层次状态。它便作为一个唯一的数据源而存在。这也就意味着, 每个应用将仅仅包含一个store实例。白...原创 2020-04-22 10:31:30 · 208 阅读 · 0 评论 -
vue-cli3.0 项目内使用vue-skeleton-webpack-plugin插件根据路由来渲染不同的骨架屏
为了前端体验更加友好,减缓用户的焦虑情绪,提升项目质量等,我们在项目里面可以使用骨架屏,提前渲染出来一个跟正式页面相似的页面出来,减小首屏加载时间。在vue中使用骨架屏因为我们的代码会使用webpack打包,所以在我们的js下载运行之前,用户是无法在页面上看到信息,所以,我们要把骨架屏相关的代码放到HTML里面,当然,可以把代码直接写在html文件的<div id=’app‘>...原创 2020-03-17 17:43:30 · 2865 阅读 · 4 评论 -
vue封装通用页面布局组件
在做项目时,我们的页面风格往往都是统一的,页面布局大多也相似,这样我们就可以吧相同的,可以复用的组件封装起来,页面上需要使用时,引用就可以了;下面介绍一个自己封装的页面布局组件1.在components下新建PageFrame/index.vue,内容如下:<template> <div class="page-frame"> <div clas...原创 2020-03-10 16:08:23 · 2762 阅读 · 0 评论 -
vue+table2excel 导出JSON数据到excle
最近在做一个信息采集管理系统,需要把采集到的信息导出到excle,先说说在vue中安装和引入table2excel//安装npm install js-table2excel//引入import table2excel from 'js-table2excel'采集系统需要收集的信息包含姓名、手机号、身份证号、还有一项是上传图片;模拟数据如下:const da...原创 2020-02-12 10:07:24 · 3145 阅读 · 3 评论 -
vue中用swiper轮播Loop:true时点击事件失效解决办法
原因:因为swiper的无限轮播时会自动复制第一个和最后一个页面进行轮播。但由于只复制页面没有复制点击事件,此时我们用vue写的点击事件在页面循环一周回来遇到复制的页面时,点击事件就会失效。1.HTML代码如下2.JS代码 swiperOption: { pagination: { el: "" }, ...原创 2019-12-26 16:52:30 · 3797 阅读 · 2 评论 -
vue-cli 兼容移动端低版本系统步骤详解
最近用 vue-cli 3.0开发的移动端项目在最近两年新出的安卓手机上没问题,在三四年前的旧手机上出现白屏问题。分析一下应该是安卓系统版本的原因,目前已知的是Android 6.0 以上都 OK,6.0 以下就不行了。同时,页面在IOS10左右的版本中,也会显示异常低版本安卓系统内置的 webview 不支持 ES6 语法等一些新特性,所以报错。但在手机上调试不方便,受一篇文章的启发,...原创 2019-12-19 16:11:19 · 2029 阅读 · 1 评论 -
这样修改element UI组件的样式,又不会污染全局
想要修改element组件的样式,试过一下的三种方法:1、在style外面另写个style;2、在组件上加个id或者class定位,然后用 .yourClass /deep/ .element组件样式 修改,会全局污染;3、将要修改的样式在外面写个单独样式文件,在需要用到的页面引入。以上三种方法均会引起全局样式污染的问题,正确方法如下:采用定位组件...原创 2019-12-13 14:45:30 · 2085 阅读 · 3 评论 -
Vue 移动端项目在路由跳转时添加过度动画
Vue 官方提供的动画方式有很多种,可以供大家参考,链接地址如下:https://cn.vuejs.org/v2/guide/transitions.html这里,我只列举我使用的,路由在切换时,左滑和右滑效果;具体使用步骤如下:1.在路由文件中给需要动画效果的路由添加index来区分左右滑效果 // router/index.js { path: "...原创 2019-11-07 10:00:48 · 3209 阅读 · 0 评论 -
Vue 项目断网时跳转到网络错误页面
在项目中做异常处理时经常会遇到对网络错误的处理;处理的方案有很多,我只记录我在项目中使用的一种首先添加网络错误页面(根据各自需求):2.在router中添加错误页面的路由{path:'/networkError',component:require('@/public-component/no-network.vue').default,...原创 2019-10-28 15:47:09 · 5042 阅读 · 0 评论 -
Vue项目请求超时处理
现在网页项目大多采用前后端分离模式,这种模式优点有很多,但是也会带来不少问题,比如:请求后端接口时会受网络因素影响,导致请求超时;这就需要我们在请求方法中设置拦截,对请求超时做处理;下面就是我在项目中使用的axios封装方法,设置网络请超时拦截处理import axios from "axios";import { get } from "http";import { Toast }...原创 2019-10-28 14:51:10 · 17579 阅读 · 0 评论 -
H5页面在QQ和QQ空间内分享设置摘要和缩略图
H5页面在手机QQ和QQ空间内分享时,分享出去的只有链接,没有摘要和缩略图,使用微信的JS-SDK并没有得到想要的效果,后来查资料,看到有人通过给H5页面设置meta标签实现了这一功能;需要设置的meta标签如下:<meta itemprop="name" content="网页标题"><meta itemprop="description" content="网页描述"...原创 2019-09-16 16:36:11 · 1905 阅读 · 3 评论 -
Vue+Element UI 向Table组建中的每一行添加一个switch组件,实现每一行单独控制
最近在做公司的设备管理系统,权限管理中有一个需求需要展示如下:每一行表格中的switch单独控制一行;实现效果的代码如下:<el-table :data="userRights" stripe border align="center" style="width: 100%;"> <el-table-column prop=...原创 2018-09-12 15:05:40 · 15157 阅读 · 2 评论 -
vue+webpack项目打包后背景图片加载不出来
在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了,解决方法如下:1.修改资源路径在VUE +的WebPack项目中,项目打包后的CSS和JS的引用路径是绝对路径,项目部署后会将静态当成根目录,就造成了文件引用路径的错误,解决方法是通过修改配置...原创 2018-10-17 10:12:27 · 4884 阅读 · 2 评论 -
vue-cli项目中使用Font Awesome 5
Font Awesome 是一款很好用的字体图标,可以使用的图标很多,省了到处找图标的困扰;因此深受广大开发者喜爱,现在Font Awesome已经更新到5.X,使用方法上也和4以前的版本有所不同,并且还增加了收费版;其实免费版已经足够大家使用啦;下面我就具体介绍一下Font Awesome在vue脚手架项目中的使用方法;官网:https://fontawesome.com/安装 Font...原创 2018-11-08 16:38:52 · 2322 阅读 · 5 评论 -
vue-cli网页聊天室:当聊天室有新消息时,控制滚动条滚动到底部
做一个网页聊天室页面,功能需求是:当有新消息出现在聊天室页面时,控制页面滚动条滚动到页面底部;聊天室页面代码如下:data中的消息列表; messageList: [{ Character: "0", //客服 message: "你好,有什么需要我帮忙的吗?" }, { ...原创 2019-01-10 15:15:35 · 2754 阅读 · 3 评论 -
vue中控制字符串文本在指定位置换行
在vue项目中,通过双花括号("{{}}")数据绑定的字符串文本,如下 <div class="qrhelp-answer"> <span class="da">答:</span> <span> {{item.answer}}</span>原创 2019-01-07 16:54:27 · 4987 阅读 · 1 评论 -
解决npm 安装依赖报错:npm ERR! Unexpected end of JSON input while parsing near '...^0.1.6","cross-
在Vue项目中使用npm install 安装项目依赖是,安装到中途突然报了如下错误 错误内容:npm ERR! Unexpected end of JSON input while parsing near '...^0.1.6","cross-spawn"'npm ERR! A complete log of this run can be found in:npm ER...原创 2019-02-12 09:13:58 · 5211 阅读 · 1 评论 -
Vuex 十分钟入门详细教程
1.Vuex 是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。2.什么情况下我应该使用 Vuex?虽然 ...原创 2019-03-12 16:40:57 · 380 阅读 · 0 评论 -
Vue项目中通过watch监控对象中的某一属性
在Vue项目中的某一组件内,我需要监控data内某一对象的某一属性变化,已作处理;组件data中的数据如下:data:{ return { pickedForm: { pickedDate: "", pickedInStation: "", pickedOutStation: "" ...原创 2019-04-24 16:07:23 · 1259 阅读 · 0 评论 -
iview 中table在自定义列模板通过for循环渲染多个其他组件
需求:在表格的一栏中通过for循环渲染多个CheckBox,效果图如下:首先看看数据结构,data()中的数据如下:tableData: [ { page: '启动页', allSelect: false, pagePermission:true, operationPermission:...原创 2019-05-10 11:26:03 · 3045 阅读 · 0 评论 -
Vue项目中,Jquery读取json文件内的json数据
在数据量很大,但是又不是通过请求后端接口来获取数据时,就会在前端创建json文件来保存,并通过JS 请求json文件来获取数据;也一样能达到按需获取的目的;首先,将数据保存在json文件内,并放在static内;2.通过jQuery请求getData(index) { let id = this.lineList[index].id; let url = ...原创 2019-05-27 16:03:39 · 2318 阅读 · 0 评论 -
Vue中使用二维码插件qrcodejs2生成二维码
1.安装 qrcodejs2npm install qrcodejs2 --save2.在需要使用的组件内引入<script> import QRCode from "qrcodejs2" export default { components: { QRCode }, data(){ ...原创 2019-06-14 17:33:02 · 2315 阅读 · 0 评论 -
windows环境下运行NODE_ENV=test 报错的解决办法
错误信息:NODE_ENV=test : 无法将“NODE_ENV=test”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。所在位置 行:1 字符: 1+ NODE_ENV=test npm run build+ ~~~~~~~~~~~~~ + CategoryInfo : ObjectN...原创 2019-07-08 16:24:17 · 3425 阅读 · 0 评论 -
Vue项目中数组和对象更改后视图不刷新的问题
Vue数据响应原理官方解释如下:当你把一个普通的 JavaScript 对象传入 Vue 实例作为data选项,Vue 将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为getter/setter。Object.defineProperty是 ES5 中一个无法 shim 的特性,这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因...原创 2019-07-03 15:18:40 · 1472 阅读 · 0 评论 -
使用husky, prettier, lint-stage在代码提交时自动格式化
1.安装husky lint-staged prettynpm i -D husky lint-staged pretty2.在package.json中添加配置"husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.{js,json,md}"...原创 2019-07-10 11:45:35 · 3119 阅读 · 0 评论 -
Iview 时间日期选择器非空验证失败的解决方案
在使用iview的时间日期选择组件时,需要进行非空验证,但是当选择好日期时间后,还是提示不能为空,后来查阅资料通过如下方法解决了;1.在验证规则内添加 pattern: /.+/ruleValidate: { startTime: [{ required: false, message: '起始时间不能为空', trigger: 'blur',pat...原创 2019-07-04 23:56:11 · 4057 阅读 · 0 评论 -
vue 项目基于webpack 构建自动获取本机局域网ip地址
1.在 config 文件里的 index.js 里面加上以下代码://config/index.jsconst os = require('os');function getNetworkIp() { let needHost = ''; // 打开的host try { // 获得网络接口列表 let network = os.networkInterfaces();...原创 2019-08-02 15:04:51 · 2823 阅读 · 2 评论 -
在Vue项目中建立文件保存全局变量和方法
在做Vue项目中经常会遇到某些方法或变量、常量需要跨组件调用,使用时不能再组件内局部声明,这是后就需要有一个地方来单独的存放这些全局的变两或方法,下面我就简单接介绍一下这个全局文件建立的大概流程以及调用方法;第一步:新建一个.vue的文件来保存全局变量或方法;我建立的文件名为global.vue;内容如下<script> const websocket = new win...原创 2018-09-13 10:54:42 · 4463 阅读 · 1 评论