vue
关注
分享
扫一扫
文章平均质量分 57
王永存
大道至简
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vitepress-demoblock | 使用vitepress构建组件库文档
使用vitepress构建组件库文档，为vitepress添加更专业的Demo演示能力，让您在开发vue组件库或者vue相关文档编写时，可以通过引入vue文件的时候结果显示和代码演示。原创 2022-10-12 14:25:01 · 1746 阅读 · 2 评论 -
在微前端qiankun中使用Vite你踩坑了吗？
在微前端qiankun中使用Vite你踩坑了吗？_树酱的博客-CSDN博客哈喽，我是树酱。之前搭建的微前端体系已经稳步运行将近两年了，最近遇到一些童鞋反馈。之前据说qiankun并不支持Vite打包的应用，那是不是我就无法使用了？是的，官方暂未有文档表明已经支持...https://blog.csdn.net/u013655559/article/details/122551984......原创 2022-06-07 20:06:06 · 624 阅读 · 0 评论 -
vue 滚动条处理
1、滚动条左右居中 // 数据渲染完成后 this.$nextTick(() => { const dom= this.$refs.dom; const { scrollWidth, offsetLeft, offsetWidth } = dom; dom.scrollLeft = (scrollWidth - offsetWidth) / 2; });2、滚动条最右边// 数据渲染完成后 this原创 2020-12-31 12:04:36 · 697 阅读 · 0 评论 -
webpack+vue实践
前言2020年即将到来,在众多前端的招聘要求里,webpack、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如vue-cli、create-react-app的脚手架来构建我们的项目。但是如果你想在团队脱颖而出(鹤立鸡群)、拿到更好的offer(还房贷)，那么你必须去深刻的认识下我们经常打交道的webpack本文共分为三个部分带你领略webpack的魅力。如有不足之处，恳请斧正1. 入门(一起来用这些小例子让你熟悉webpack的配置)1.1 初始化项目新建一个目录，转载 2020-06-17 16:19:43 · 443 阅读 · 0 评论 -
vue封装自定义指令之动态显示title（如果溢出了显示，不溢出则不显示）
vue项目开发的过程中，如果需要文字溢出的dom元素鼠标悬浮时才显示title文字的话，可以封装一个自定义的指令。方法一、组件内代码如下： directives: { title: { inserted(el) { const { clientWidth, scrollWidth, title } = el; if (!title...原创 2020-04-29 19:18:53 · 1599 阅读 · 0 评论 -
vue 3.0 原理源码进阶
在2019.10.5日发布了Vue3.0预览版源码，但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。可以直接看github源码。新版Vue 3.0计划并已实现的主要架构改进和新功能： 编译器（Compiler） 使用模块化架构 优化 "Block tree" 更激进的 static tree hoisting 功能 （检测静态语法，进行提升） ...转载 2020-04-26 16:13:32 · 927 阅读 · 1 评论 -
vshare
vshare基于百度分享开发的支持VUE2.X的分享插件,为您带来更多的流量！提供多种风格按钮，代码加载更快，引入社会化流量，提升网页抓取速度等优点。github地址:https://github.com/1006008051/vshare，欢迎star。安装npm install vshare -S使用注入// ES6import vshare from 'vshar...原创 2018-11-19 18:53:27 · 5857 阅读 · 6 评论 -
vue2项目引入社交分享插件vshare
vshare基于百度分享开发的支持VUE2.X的分享插件,为您带来更多的流量！提供多种风格按钮，代码加载更快，引入社会化流量，提升网页抓取速度等优点。github地址:https://github.com/1006008051/vshare，欢迎star。安装npm install vshare -S使用注入// ES6import vshare from 'vshar...原创 2018-11-20 10:04:20 · 2744 阅读 · 6 评论 -
开发vue插件，并发布到npm
写在前面开发vue插件，vue官网有自己规范（https://cn.vuejs.org/v2/guide/plugins.html）。最近基于百度分享封装了一个vue版本的分享插件vshare。github地址：（https://github.com/1006008051/vshare），欢迎各位大佬给个star。参照了一下网上，然后总结了一下开发插件发布流程。注册npm去npm官网上...原创 2018-11-20 11:38:38 · 1121 阅读 · 0 评论 -
移动端可滑动（惯性滑动&回弹）Vue导航栏组件
最近用vue写一个移动端项目，用的mint组件库，但是提供的功能不全，项目中有一个需求是需要滑动的导航栏，网上百度动了一个，经过测试，确实比较好用。github地址https://github.com/ScoutYin/ly-tab附上使用的代码：<template> <div> <ly-tab v-model="selectedId"...原创 2019-05-11 18:34:11 · 7748 阅读 · 10 评论 -
vue点击返回顶部插件vue-totop
vue-totopvue 点击返回顶部插件，可以根据参数设定按钮大小，颜色，类型，返回顶部的时间等。安装npm install vue-totop -S使用注入// ES6import vueToTop from 'vue-totop'//or requirevar vueToTop = require('vue-totop')Vue.use(vueToTop...原创 2018-11-22 09:37:34 · 2277 阅读 · 0 评论 -
vue-totop
vue-totopvue 点击返回顶部插件，可以根据参数设定按钮大小，颜色，类型，返回顶部的时间等。安装npm install vue-totop -S使用注入// ES6import vueToTop from 'vue-totop'//or requirevar vueToTop = require('vue-totop')Vue.use(vueToTop...原创 2018-11-22 09:36:26 · 533 阅读 · 2 评论 -
vue 图片裁剪上传
最近写的一个项目用到头像上传，需要裁剪功能，缩放功能，能具备压缩上传功能，因为手机现在的像素太好了，随便一张图片的大小都上M了，而且要求手机端和pc端都可要可以使用。通过网上找到了一个合适的插件（vue-croppa）。先上几张图片看一下效果：点击更换头像后：截取的大小和形状，背景颜色，base64编码，缩放级别，均可以设置更改（具体参数可以参考npm网址：https://ww...原创 2018-11-08 11:48:44 · 4816 阅读 · 0 评论 -
Hbulider打包app vue项目iconfont空白
vue写的一个项目用Hbulider打包后，发现iconfont字体图标一个也没显示。我是引用的cdn。如果直接下载下来放到项目里应该就不会出现这个问题了。阿里iconfont提供的cdn没有加上http/https协议。所以，cdn上加上http/https协议即可。 ...原创 2018-11-02 15:22:21 · 1107 阅读 · 1 评论 -
vue项目实现换肤（样式、字体、背景）
后台管理项目一般都会加一些主题配色，最近在用vue写一个后台管理系统，也加了一个可以实时改变主题色彩。先看一下效果：项目的基色，可以通过颜色选择器进行更改：vue可以实现数据的双向绑定，要想所有的组件都使用可以实时改变的基色，思来想去还是vuex。1、首先在vuex state里定义一个默认的主题颜色：（baseColor: '#2270e9'）2、然后把这个state和颜...原创 2018-11-09 19:23:57 · 17508 阅读 · 7 评论 -
vue资源精选
1、http://vue.awesometiny.com/2、http://www.bslxx.com/a/vue/mianshiti/原创 2018-10-16 10:10:52 · 384 阅读 · 0 评论 -
vue项目中返回处理（如果有历史记录则返回上一条历史记录，如果没有则返回首页）
下面是我写的一个行程规划详情页面，假如用户是通过别人分享直接点击进来的话，那么他的上一条历史记录应该是不存在的。如果要想返回到首页或者其他的指定页面，可以进行判断浏览器的历史记录是否存在进行处理。定义全局back（）方法，代码如下：Vue.prototype.back = function () { if (window.history.length > 1) { ...原创 2018-12-07 09:53:20 · 9640 阅读 · 4 评论 -
程序员的快速开发框架：Github上 10 大优秀的开源后台控制面板
Web 开发中几乎的平台都需要一个后台管理，但是从零开发一套后台控制面板并不容易，幸运的是有很多开源免费的后台控制面板可以给开发者使用，那么有哪些优秀的开源免费的控制面板呢？我在 Github 上收集了一些优秀的后台控制面板，并总结得出 Top 10。vue-Element-AdminGithub Star 数 19546， Github 地址： https://github.com/Pa...原创 2019-01-09 16:39:04 · 4293 阅读 · 1 评论 -
在 Vue 项目中引入 tinymce 富文本编辑器
项目中原本使用的富文本编辑器是wangEditor，这是一个很轻量、简洁编辑器但是公司的业务升级，想要一个功能更全面的编辑器，我找了好久，目前常见的编辑器有这些：UEditor：百度前端的开源项目，功能强大，基于 jQuery，但已经没有再维护，而且限定了后端代码，修改起来比较费劲bootstrap-wysiwyg：微型，易用，小而美，只是 Bootstrap + jQuery......转载 2019-09-19 21:35:41 · 1179 阅读 · 0 评论 -
vue cli3 设置less全局变量
1、在vue.config.js里添加需要的的less变量module.exports = { css: { loaderOptions: { less: { globalVars: { 'primary-color': '#5D6BBA', 'success-color': '#2AC58B', ...原创 2019-09-16 18:30:44 · 1514 阅读 · 0 评论 -
vue项目可视化管理之（vue ui）
@vue/cli3.0增加一个可视化项目管理工具，全局安装完成cli3.0之后，可以直接在cmd输入命令：vue ui 启动即可，地址默认是localhost:8000可以通过那牛导入你的vue项目进行管理，也可以通过创建按钮进行可视化创建一个新的vue项目。还可以查看运行依赖和开发依赖的以及在线安装和更新依赖，非常方便任务按钮下，你可以运行项目、打包项目，检查等操作。...原创 2019-06-24 18:16:22 · 93873 阅读 · 10 评论 -
vue调试神器之vue-devtools
介绍vue-devtools是专门调试vue项目的调试工具，安装成功之后，右边会出现一个vue，就可以在线可以调试vue了，非常便捷。安装由于政策原因，谷歌的插件不能直接安装了已经，需要翻墙，也可以本地下载然后安装。1、通过github下载：https://github.com/vuejs/vue-devtools （命令： git clone https://githu...原创 2019-06-21 17:06:42 · 10530 阅读 · 4 评论 -
axios 封装jsonp进行跨域请求
线上项目需要在其他域名下get请求回一些参数，但是axios没有提供jsonp跨域的方法，所以参考网上的教程封装一个jsonp属性。代码如下：//axios本版本不支持jsonp 自己拓展一个axios.jsonp = (url) => { if(!url){ console.error('Axios.JSONP 至少需要一个url参数!') ...原创 2019-06-14 16:53:58 · 13767 阅读 · 0 评论 -
vue获取地址栏参数
因为vue默认使用的hash模式，你会发现打印出来的window.location.search等于空，这样的话，通过截取search的方法就不行了。在网上找到了一个比较好用的方法，代码如下： // 获取url参数 getUrlKey(name) { return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([...原创 2019-06-14 16:41:43 · 11580 阅读 · 3 评论 -
Vue深拷贝处理
vue父子组件传递数据的时候，浅拷贝会出现修改数据相互影响的情况，这个时候就需要深拷贝处理一下。网上搜到了一个比较实用的方法： JSON.parse(JSON.stringify(this.XX)) this.xx为父组件传来的数据。...原创 2019-06-13 11:27:11 · 4118 阅读 · 0 评论 -
vue封装highcharts组件
如果项目中图标数据比较多的话，每个页面都引入一次会比较繁琐。可以用vue封装成组件进行复用。安装首先需要在自己的vue项目中安装highcharts插件 npm install highcharts --saveyarn或者cdn引入的方式可参考官网（https://www.highcharts.com.cn/docs/start-download）封装组件1...原创 2019-05-16 19:54:47 · 2279 阅读 · 0 评论 -
highcharts 设置渐变色
官网渐变色设置地址：https://www.highcharts.com.cn/docs/colors背景渐变色Highcharts.setOptions({ chart: { backgroundColor: { linearGradient: [0, 0, 500, 500], stops: [ [0, 'rgb(255, 255, 255)']...原创 2019-05-16 18:18:39 · 4753 阅读 · 0 评论 -
用vue递归组件写树形控件
最近移动端H5项目有树级选择需求，网上没有找到好用的插件，于是参照着网上的教程和Vue官网自己写了一个。效果如图所示：组件在它的模板内可以递归地调用自己，只有当它有name选项时才可以。模拟数据格式如下：dataList = [{ nodeName: "电能耗模型", child: [{ nodeName: '园区', ...原创 2019-05-11 11:51:42 · 2551 阅读 · 0 评论 -
剖析Vue原理&实现双向绑定MVVM
链接地址：https://segmentfault.com/a/1190000006599500原创 2019-04-17 11:42:03 · 242 阅读 · 0 评论 -
vue-router钩子beforeRouteEnter函数获取到this实例
const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当钩子执行前，组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { ...原创 2019-01-31 10:13:31 · 13167 阅读 · 0 评论 -
vue 模块拖拽组件
网址： vue-slicksort代码：<template> <div class="root"> <SortableList lockAxis="y" v-model="items"> <SortableItem v-for="(item, index) in items" :index原创 2018-10-11 15:00:57 · 5762 阅读 · 6 评论 -
vuex刷新数据消失问题
前言vue构建的单页大型项目中，可能会用到Vuex 。Vuex 的状态存储是响应式的，当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。但是有一个问题就是：vuex的存储的数据只是在页面的中，相当于我们定义的全局变量，刷新之后，里边的数据就会恢复到初始化状态。但是这个情况有时候并不是我们所希望的。比如，用户已经登录了，我把...原创 2018-09-05 16:05:10 · 18907 阅读 · 5 评论 -
vue项目通过webpack打包生成的dist文件放到express里边运行（vue+webpack+express）
通过Vue渐进式框架写了一个项目，项目写完后，通过npm run bulid 生成上线文件dist。但是在运行npm run bulid这条命令的 时候居然报错，提示我什么缺少bulid，打开package.json看了一下，命名在的啊。通过与它对应的 node bulid/bulid.js 居然可以。现在通过webpack已经把所有文件进行整合到一起了。你不原创 2017-09-21 18:53:24 · 6374 阅读 · 0 评论 -
vue中利用百度地图API显示两点间的距离
先来看一下，要实现的效果：每个店铺的经纬度已经通过服务器获得，通过浏览器定位可以获得我的经纬度，然后可以通过百度地图API提供方法测量距离。在vue data 中已经定义了一个数组list，list中存放的店铺信息的对象，包含经纬度信息。html结构代码如下,通过v-for来遍历显示list中的信息。getDistance()是vue methods定义的方法，把item这个对象参数传原创 2017-09-20 17:52:17 · 7749 阅读 · 5 评论 -
vue中传多选项数据到后台（判断数组中是否存在该项，存在则删除，不存在则添加）
先看一下要实现的目标。如下图所示，一室、二室.....五室以上为可选项，及点一次选中它，再点为取消。最后选完后，点确定时，带着选中的参数到后台请求数据。要实现这样的功能，简单点来说，可以利用JavaScript提供的方法。if (this.bedroomNum.indexOf(id) === -1) { this.bedroomNum.push(id)} else {原创 2017-09-20 15:34:59 · 24418 阅读 · 0 评论 -
vue项目nav导航栏的实现
每一个网页项目都少不了导航栏，通过原始的方法基本上都是可以写出来的。但是要写出代码量少，冗余度低的代码就要动脑子思考一下了。最近写了一个百度地图的项目，要求底部有一个导航栏。具体如下图：首先，拿到了底部导航栏的所有图标图片，图片都有两种。灰色的代表未选中，选中的用带样色的图片替换。先看一下，组件中 html结构：通过vue提供的v-for方法，进行遍历显示footNav原创 2017-09-20 14:53:47 · 31927 阅读 · 2 评论 -
vue项目中调用百度地图API使用简介
vue项目中调用百度地图API使用介绍 步骤一：申请百度地图密钥； JavaScript API v1.4以及以前的版本无序申请秘钥（ak），自v1.5版本开始需要先申请秘钥（ak），才可以使用，如需获取更高的配额，需要申请 认证企业用户。百度地图API 链接地址:http://lbsyun.baidu.com/apic原创 2017-09-19 21:02:48 · 24289 阅读 · 4 评论 -
vue常用UI组件
下面简单的总结下vue常用的一些UI 组件yy任务网http://www.yytask.cnvue官网地址:https://cn.vuejs.orgvuex:vux github ui demo:https://github.com/airyland/vuxMint UI项目主页:http://mint-ui.github.io/#!/zh-cndemo:http...原创 2017-09-04 16:58:55 · 3128 阅读 · 0 评论 -
vuejs几种不同组件（页面）间传值的方式
在应用复杂时，推荐使用vue官网推荐的vuex，以下讨论简单SPA(single-page application 简称为 SPA)中的组件间传值。一、路由传值 路由对象如下图所示： 在跳转页面的时候，在js代码中的操作如下，在标签中使用标签123456this.转载 2017-09-09 16:57:50 · 1447 阅读 · 0 评论 -
vue监听滚动事件 实现某元素吸顶或者固定位置显示
最近写了一个VUE的web app项目，需要实现某个部位吸顶的效果。即，页面往上滑动，刚好到达该部位时，该部分，固定在顶部显示。1、监听滚动事件利用VUE写一个在控制台打印当前的scrollTop,首先，在mounted钩子中给window添加一个滚动滚动监听事件，mounted () { window.addEventListener('scroll', this...原创 2017-09-16 15:33:33 · 103810 阅读 · 23 评论