![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端-vue
文章平均质量分 58
vue 的项目经验分享
李小斌96
这个作者很懒,什么都没留下…
展开
-
关于 Vue-iClient-MapboxGL 的使用注意事项
最后选择了全局引入,但是全局引入把我系统原有的一些默认未修改样式覆盖掉了,搞的样式错乱,最后又重置排列了引入这个库样式和reset样式的顺序来修复此问题。也可能是我研究不清楚,愿有心人留下地址,供我学习!关于图的使用,其余的引入步骤不再赘述,仅说注意事项。推荐使用的是全局引入,也就是完整引入。因为单独引入我踩了不少坑,比如说。原创 2023-10-07 17:00:44 · 877 阅读 · 0 评论 -
关于vue页面封装锚点功能(锚点列表与正文列表同时滚动)
项目需要给页面模块设置锚点列表。锚点列表同时也具备滚动并随着列表滚动而一切滚动。原创 2023-01-12 15:02:03 · 756 阅读 · 0 评论 -
vue判断浏览器是刷新还是关闭
项目需要判断页面或浏览器是关闭了还是刷新,以此来判断要不要强制用户重新登录。原创 2023-01-11 10:44:17 · 2735 阅读 · 4 评论 -
关于 vue-seamless-scroll 的问题采坑
标题# 项目场景:本文描述了在引用 vue-seamless-scroll 的过程中遇到的一些常见问题问题描述此插件在使用的过程中如果条数过少,要阻止循环滚动,不能够持续复制滚动原因分析此问题主要是因为插件自动复制了我们的一个列表,两个列表持续滚动,如下图所示解决方案给 class-option 的属性增加 limitMoveNum设置成动态的,且根据何时显示何时初始化,因为我的页面里是个弹框,刚开始就初始化数据的话,滚动循环会不规律动态设置 limitMoveNumlimitMov原创 2022-04-22 09:35:07 · 3973 阅读 · 0 评论 -
关于在 Vue 项目中使用滑块校验 vue-puzzle-verification
老规矩,官网链接 https://github.com/he4398/vue-puzzle-verification基本操作使用npm 下载cnpm i vue-puzzle-verification在使用的页面中引入<!-- 滑块校验 --><van-popup v-model="isVerificationShow" style="border-radius: 16px"> <div class="login-box"> <div cl原创 2021-08-23 09:54:57 · 655 阅读 · 0 评论 -
关于 vue 项目保存时报没有权限问题
问题描述整个down的过程都是正常步骤,并且也能正常启动项目但是我在页面里不管编辑什么 ctrl+s 保存一下就报错,服务就停止了好,我们百度尝试一下怎么解决失败方案复制到百度中,百度说是因为咱cnpm install 的时候没有用管理员权限运行好,我们就用管理员运行一下但是结果还是一样的,一直报错正确方案我们由保存就报错停止猜想,肯定是写入的时候被什么阻止了,然后咱的项目就被停掉了同时,我尝试了 n 个方法,重启项目时发现了一个被翻页了的报错因为自动翻页了就被忽略了,好,我们原创 2021-08-18 16:53:28 · 1615 阅读 · 0 评论 -
关于vue中使用indexDB的总结
老规矩,先挂官网链接https://www.npmjs.com/package/idb-js关于indexDB 是什么,用到什么地方我就不再解释,百度多得很,只说我在使用的过程中的一些问题官网解释:引入及简单使用安装:npm install idb-js --save使用:第一步:引入dbimport Idb from 'idb-js' // 引入Idb第二步:引入数据库配置import db_student_config from './db_student_con原创 2021-08-16 11:05:23 · 3388 阅读 · 0 评论 -
Vue.js 最佳实践
转载自:前端大全作者:zach5078segmentfault.com/a/1190000014085613本文面向对象是有一定 Vue.js 编程经验的开发者。对大部分人来说,掌握 Vue.js 基本的几个 API 后就已经能够正常地开发前端网站。但如果你想更加高效的使用 Vue 来开发,成为 Vue.js 高手,那么下面的五招一定得认真学习一下。化繁为简的 Watchers场景还原:created(){ this.fetchPostList()},watch: {转载 2021-07-22 09:33:30 · 151 阅读 · 0 评论 -
vue-quill-editor 的使用方法
官方文档:https://www.npmjs.com/package/vue-quill-editorgitHub地址:https://github.com/surmon-china/vue-quill-editor参考地址:https://www.jianshu.com/p/a6cba69d6e49安装依赖cnpm install vue-quill-editor --save引用方式全局引用,项目入口文件中(main.js)注册import Vue from 'vue'impo.原创 2021-06-01 10:15:24 · 10103 阅读 · 1 评论 -
Vue 中避免滥用this去读取 data 中的数据
转载自 前端大全 ,侵联删!前言在 vue 中,data 选项是个好东西,把数据往里一丢,在一个 vue 组件中任何一个地方都可以通过 this 来读取 data 中数据。但是要避免滥用 this 去读取 data 中数据,至于在哪里要避免滥用,如果滥用会导致什么后果,本文将会一一揭晓。一、用 this 读取 data 中数据的过程在 vue 源码中会把 data 中数据添加 getter 函数和 setter 函数,将其转成响应式的。getter 函数代码如下所示:function reacti转载 2021-03-29 14:21:15 · 695 阅读 · 0 评论 -
vue中使用vant插件做tabs切换和无限加载功能
1.创建vue项目,不再详述2.引入vant之前用过很多插件做这个功能,但是效果都不尽人意,出现各种问题,直到遇到vant这个插件,完美的解决了这些小问题,如有问题,欢迎联系我安装依赖npm i vant -S在main.js中引入import Vant from 'vant';import 'vant/lib/index.css';Vue.use(Vant);3.在页面中使...原创 2019-05-07 15:25:06 · 17304 阅读 · 5 评论 -
vue中使用vue-infinite-scroll
都要新建一个vue+webpack的项目,建立过程这里不再赘述。一.vue-infinite-scroll安装cnpm i vue-infinite-scroll --savemain.js中引入import vueiInfinite from 'vue-infinite-scroll'Vue.use(vueiInfinite)在.vue文件中使用<ul c...原创 2018-11-14 09:54:59 · 7757 阅读 · 2 评论 -
在全局vue2的基础上安装vue3(同时存在两个版本)
缘由:自从vue3出了之后,很火热,里面新增的功能也很不错例如vue ui。但是公司的项目都是以vue2为基础的,如果换版本势必出现问题,所以找到了在全局安装vue2的基础上安装vue3,同时存在着两个版本。1.安装vue2不再赘述,全局直接安装就没得问题,我们直接从安装vue3开始。2.先新建一个存放vue3的文件夹3.打开这个文件夹的命令行4.开装npm install @vue...转载 2019-08-29 10:54:29 · 10352 阅读 · 4 评论 -
vue父子组件通信以及flex布局
第一步:新建vue-cli项目第二步:新建子组件第三步:子组件代码:&lt;template&gt; &lt;div id="children"&gt; &lt;p&gt;{{item.name}}&lt;/p&gt; &lt;p&gt;{{item.age}}&原创 2019-01-24 11:39:47 · 1378 阅读 · 0 评论 -
vue项目全家桶初始化并上传至git
新建项目在github上新建一个项目,如下图所示:Git地址为:https://github.com/libin9625/vue_all_test.git在这里插入代码片原创 2018-11-21 11:44:54 · 818 阅读 · 0 评论 -
vuex的使用总结
1.简单使用目录结构如下图所示:用vue-cli新建一个vue项目,引入vuex,执行:cnpm n install vuex --save需要注意的是这里一定要加上 –save,因为你这个包我们在生产环境中是要使用的。在src文件夹下即与component同级新建一个文件夹vuex,在文件夹下新建store.js,新建文件夹不是必须的。并在store.js中引入vue,vuex,...原创 2018-11-20 14:37:12 · 166 阅读 · 0 评论 -
Mint-ui infinite scroll 无限加载爬坑之路
参考:https://blog.csdn.net/sinat_40257787/article/details/79582130问题一:下拉不会触发loadMore事件解决:我们的ul或者设置滚动的元素必须设置高度和溢出滚动的属性因为我的接口没有分页所以用slice模拟数据分页加载CSS代码:.newsList { max-height: 35rem; o...转载 2018-11-08 10:15:35 · 9563 阅读 · 3 评论 -
vue中引入Echarts异步加载数据更新图表
对于这个问题,刚开始觉得比较简单,但是无法渲染图表 后来才发现,我用ajax异步加载数据,当图表渲染的时候,数据还没有拿到,这样没有数据,自然不能渲染图表。 找到了一个很笨的方法,欢迎大家赐教! 先给出图表例图 其中的数据就是通过ajax异步从后台获取贴出代码,这个函数写在methods中,获取到数据后再进行渲染drawlineOne(){ var vm = thi...原创 2018-04-16 16:38:24 · 7382 阅读 · 1 评论 -
vue-cli使用ts创建项目
使用命令 vue create project_name注意:vue create 是vue3的命令,注意更新我们选择manually select featuers手动选择选择下面的属性,为了测试,我全部都给选择上如上去选择你需要的配置。中文翻译摘录自:vue-cli3构建ts项目TypeScript:是否使用class风格的组件语法:Use class-style comp...转载 2020-04-14 14:45:31 · 1138 阅读 · 0 评论 -
vue3项目新建
一. 全局安装vue3二. 新建项目三. 启动项目四. 简单封装原创 2019-11-28 10:45:37 · 1467 阅读 · 0 评论 -
element-ui和iview以及swiper对图片轮播的对比操作
先放上我要实现的效果:因为是公司的项目,所以图片无法显示,大概意思就是切换两个分屏展示的样式。1.iview的轮播只能使用一个分屏展示,当切换之后再使用就无法轮播,点击事件失效,百度说是只能获取到一个事件焦点 。iview的方式只能去掉。代码如下:(摘自官网,我写的有问题,所以代码就被我删掉了)<template> <Carousel v-model="valu...原创 2019-03-21 14:20:46 · 2429 阅读 · 0 评论 -
可下拉表格展示子项vue-tree-grid-table踩坑
我总共百度了三种方法,本来使用插件各种报错,不得已自己重写了一个表格,后面有空闲时间了,自己研究了下,这些插件都是可行的,只是要注意下使用的姿势方法一:使用TreeGrid组件这一种是基于iview的,所以在使用之前装好iviewgit地址: https://github.com/huanglong6828/vue-tree-grid仿照方法,将TreeGrid.vue直接复制进项目里面...原创 2019-01-22 15:31:12 · 9653 阅读 · 1 评论 -
用图表和实例解释Await和Async
转载自:前端大全简介JavaScript ES7中的 async / await 让多个异步promise协同工作起来更容易。如果要按一定顺序从多个数据库或者API异步获取数据,你可能会以一堆乱七八槽的promise和回调函数而告终。而 async / await 结构让我们能用可读性强、易维护的代码更加简洁的实现这些逻辑。本教程用图表和简单示例讲解了JavaScript中 asy...转载 2018-08-15 14:47:38 · 339 阅读 · 0 评论 -
webpack+vue-cli生成echarts图表
之前在做毕设的时候生成过,可是过了很久了,都不太记得了,今天重新总结一下,方便以后用的时候直接有资料。这个是echarts中的玫瑰图这是echarts中的柱状图贴出代码,一个vue文件//将图表页面做成了一个组件,根据路由的不同去切换不同的组件//给每一个图表一个宽高,也就是放此图表的容器&lt;template&gt; &lt;div&gt; &lt;div...原创 2018-08-10 09:55:23 · 552 阅读 · 0 评论 -
前端获取人脸利用Face++进行对比
前端利用了vue获取 html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=原创 2018-04-04 14:09:05 · 2234 阅读 · 0 评论 -
element-ui中跑马灯的使用
<template> <div id="app"> <el-carousel :interval="5000" arrow="always"> <el-carousel-item v-for="(img,index) in imgList" :key="index">原创 2018-04-03 11:06:14 · 22194 阅读 · 0 评论 -
封装与后台交互且分页的函数(利用jquery)
function connect(request){ $.ajax('question/find',{ 'data':request, 'method':'POST', 'content-Type':'application/json', succe原创 2017-10-24 08:59:46 · 541 阅读 · 0 评论 -
利用vue和element-ui设置表格内容分页
html代码因为我写在template中,也就是新建了组建中,贴出代码。<el-pagination small layout="prev, pager, next" :total="total" @current-change="current_change"></el-pagination>代码中,small代表是否使用小型分页样式 l原创 2017-10-23 17:29:09 · 19241 阅读 · 2 评论 -
vue-router和express项目部署到服务器
- 首先确定此项目在本地能够运行成功 在本地命令行中输入npm run start,无报错,且打开127.0.0.1:3000 有写的路由为/的页面,如图 此为文件层级关系 front为前端文件 xk3为后台express与数据库mysql链接的文件 用命令行进入后台并且运行,启动成功 这是路径为/的页原创 2018-01-05 12:26:38 · 4584 阅读 · 0 评论