Vue
海阔天空.
前端工程师
展开
-
element 树形表格报Error: for nested data item, row-key is required
element树形表格报以上这个错,按网上的说法改 roke-key, 去掉element版本号前的^都不行,最后发现在每条数据里加上一个id属性就可以了,我数据本身没有id这个字段。原创 2021-08-23 10:42:10 · 1875 阅读 · 0 评论 -
vue封装组件并发布到npm的简单流程
最近项目不是很忙,去研究了下封装Vue组件并发布到npm的流程,简单的记录下, 源码传送门。在动手开发之前去看了下element的源码,有很多值得学习的地方,如果对封装vue组件感兴趣的推荐一定要去看一看。一、首先是项目环境的搭建。主要还是配置webapck,之前一直使用vue-cli创建项目,对这块不是很熟折腾了一会儿。主要用到的依赖:vue,vue-template-compiler, vue-loader,webpack,webpack-cli,webpack-dev-server等。原创 2021-01-07 18:14:18 · 1755 阅读 · 0 评论 -
vue递归组件简单实现一个树形组件
<template> <div class="list-wrap"> <div v-for="item of list" :key="item.title" class="item" > <div class="item-title-wrap" @click="onItemClick(item)" > <div class=".原创 2020-11-14 18:15:20 · 547 阅读 · 0 评论 -
vue3+node(koa2)写一个网站(一)-前端篇
采用vue-cli 4.5.0生成项目目录。新版本的脚手架生成的项目 main.js与之前旧版本略有不同,新版本如下://main.jsimport { createApp } from 'vue';import App from './App.vue';import router from './router';// 法一const app = createApp(App);app.use(router)app.mount('#app')//法二//createApp(App原创 2020-11-08 16:48:47 · 1268 阅读 · 2 评论 -
vue中总线机制(bus)
vue中非父子组件之间通信除了使用vuex,也可以通过bus总线,两者适用场景不同。bus适合小项目、数据被更少组件使用的项目,对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布订阅模式,利用vue的自定义事件机制,在触发的地方通过$emit向外发布一个事件,在需要监听的页面,通过$on监听事件。vuex适用中大型项目、数据在多组件之间公用的情况。...原创 2019-12-07 17:06:24 · 7924 阅读 · 0 评论 -
在Vue中使用CKEditor5富文本编辑器
在项目中遇到富文本编辑器需要实现粘贴图片的功能,使用场景:如用户在其他地方截图可以直接在富文本编辑器内粘贴。找了一圈市面上开源免费的富文本编辑器,最后选中CKEditor。ckeditor document build 版本默认是可以粘贴图片的, 其他build版本没有尝试。安装: 有好几种build版本可以选,我选用的是@ckeditor/ckeditor5-build-decoupl...原创 2019-10-14 19:15:43 · 7080 阅读 · 0 评论 -
记一次微信公众号页面开发
首次做一个公众号网页项目,难免会有一些磕磕碰碰,但项目进展还算顺利,在此记录一下。我用的框架是Vue。其实开发公众号里面的页面和其他移动端页面(h5)并没有多大不同,和平常是一样的开发方式。不同的地方主要是用户授权、鉴权和一些微信提供的接口 如分享给朋友、到朋友圈设置等。微信授权有两种,1)一种是静默授权,用户基本无感,能获取到code再获取openId,从而识别用户,2)打开微信授权页面...原创 2019-08-10 15:54:26 · 700 阅读 · 0 评论 -
通过vue-amap在vue项目中使用高德地图
有些项目我们需要用到地图相关的能力,当我们在vue项目中需要使用高德地图的时候,vue-amap是个比较好的选择,vue-amap是一套基于Vue 2.0和高德地图的地图组件,它帮你封装了一遍,相对直接使用高德地图,它使用起来更加简单。用起来难免会遇到一些坑,在此记录一下:1.使用的时候有时候会报TypeError: v.w.uh is not a constructor ,然后地图就显示不...原创 2019-06-30 20:18:47 · 15842 阅读 · 16 评论 -
vue中Echarts使用动态数据的两种方式
在使用Echarts时我们数据一般不是静态写死的,而是通过后端接口动态获取的,在此总结两种在vue框架下Echarts使用动态数据的方式。1.通过computedcomputed: { options() { let that = this; let option = { tooltip : { trigger:...原创 2019-07-10 18:24:06 · 43329 阅读 · 15 评论 -
vuex数据刷新后丢失问题解决办法
在vue项目中我们一般会用到Vuex对数据进行管理,但我们刷新页面时,store数据会全部丢失,如何解决呢?其实很简单,使用vuex的插件来把store中的数据缓存到本地就好了,我用的是vuex-persistedstate,应该还有其他插件。使用方法如下:1.先安装vuex-persistedstatenpm install --save vuex-persistedstate2.在...原创 2019-05-12 17:12:31 · 3844 阅读 · 0 评论 -
vue中路由跳转传递参数的三种方式
日常业务中,路由跳转的同时传递参数是比较常见的,传参的方式有三种:1)通过动态路由方式//路由配置文件中 配置动态路由{ path: '/detail/:id', name: 'Detail', component: Detail }//跳转时页面var id = 1;this.$router.push('/detail/' + id)//...原创 2019-03-07 21:06:55 · 34428 阅读 · 0 评论 -
vue项目中axios封装总结
日常业务中我们通常会对axios进行封装来使用,这么做的好处是:我们可以在每次请求前对请求做处理还可以对错误进行统一处理,从而避免每次发请求都要做重复的工作。比如:我们每次发送请求前都需要对请求的url做处理,就可以用到axios请求拦截;对后端返回的错误或网络错误通过响应拦截进行统一处理 等等。代码如下://fetch.jsimport Axios from 'axios';co...原创 2019-02-21 19:39:53 · 850 阅读 · 0 评论 -
Vue 使用 Font Awesome 5
文章转载自:https://segmentfault.com/a/1190000013173840前端小伙伴们都知道Font Awesome图标库,它具有丰富的常用图标,笔者开发时也经常使用,省却了自己到处找图标的困扰,当然阿里的iconfont也不错,不过它比较杂乱,找的图标有时候不是配套的,尺寸和比例上有些偏差,即使你只使用某一个图标库的图标难免也会有收录不全的情况(这是笔者的使用体...转载 2018-09-02 15:49:28 · 2521 阅读 · 0 评论 -
导航栏一级标题上下箭头切换
左侧导航栏开发有时候会遇到一级标题右边需要上下箭头切换的效果,后台管理系统中有时候会用到,先上效果图。未点击的效果,左侧导航标题箭头是向下的点击后,对应的二级列表显示出来,箭头变为向上二级列表展示隐藏用的是bootstrap, 上下箭头图标用的是Font Awesome,箭头切换用的是jQuery,我是在vue单文件组件中使用。代码如下:invisible样式是bo...原创 2018-09-02 16:09:48 · 3272 阅读 · 0 评论 -
vue+bootstrap 实现一个简单分页器
效果如下图:当数据有很多条时,如果我们一次性请求的话,加载会比较慢,这个时候就会用到分页功能了,通过向后台发送请求数据的页码和条数,就可以实现分页功能。由于项目比较简单,要求不是很高,实现简单分页即可。按钮用的是bootstrap,发送ajax请求用的是axios。代码如下:...原创 2018-09-02 16:32:33 · 2342 阅读 · 0 评论 -
vue项目中textarea文本提交到后端数据库,前端输出保存换行回车及修改
在提交前先用正则:var content = this.content.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, '&nbsp;'); (此处content为textarea输入值)展示的时候用下v-html命令就可以了:<p v-html="content"&...原创 2018-09-25 17:28:19 · 17932 阅读 · 0 评论 -
vue中上传视频或图片或图片和文字一起到后端
1.上传图片或视频:2.图片和文字一起传:3预览上传的图片(通过监听change事件,解析上传的图片):预览本地文件也可以通过HTML5的FileReader4.文件上传,也可以先上传到第三方(如七牛云),再把七牛云返回的key值传给后端...原创 2018-09-27 19:44:27 · 16018 阅读 · 8 评论 -
vue-awesome-swiper 循环轮播不起作用
在vue项目中经常会用轮播图,我一般用vue-awesome-swiper这个插件。我们轮播图片一般通过后端获取,循环展示,但会出现循环轮播失效的问题。原因是循环还没有完的时候swiper组件运行冲突出错导致的,在swiper组件上对数据价格v-if就可以解决。代码如下: ...原创 2018-10-08 17:44:30 · 4872 阅读 · 3 评论 -
vue中css样式的作用范围
在vue单文件组件开发中我们通常会在<style>标签上加上scoped属性 <style scoped>, 使用scoped之后样式只影响组件自身,这样可以避免影响到其他组件,如果不加该样式作用范围是全局的。但有时候我们需要改变其他组件的样式,比如 比较常见的 引入第三方组件 , 我们需要修改样式时,就需要用到深度选择器如 >>> , 有些像Le...原创 2019-01-15 20:39:12 · 3184 阅读 · 0 评论 -
屏蔽eslint检测某项报错
在Vue项目中使用了eslint,控制台一直会显示一些可以忽略的提示,很烦人,于是把碰到的整理如下:屏蔽某项限制都是在项目目录下.eslintrc.js文件,rules项下修改,没有对应内容就增加一条。 1. Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style rules项, 添加一条...原创 2018-06-13 16:47:24 · 3792 阅读 · 1 评论