vue
文章平均质量分 81
我的小英短
Q版前端开发攻城狮
展开
-
使用 Vue.js,React.js 及 Hypernova 构建微前端服务
使用Vue.js,React.js和Hypernova 构建微前端服务如果大家不熟悉Hypernova,则可以阅读本文。软件架构的演变在软件开发的早期,前端和后端代码是由同一团队使用相同的运行时环境和部署过程来维护的,如今,我们将这些代码称为整体应用程序。随着系统变得越来越复杂,我们开始将代码分成两个小组,分别由两个具有专门技能的团队维护:前端和后端,后端团队可以专注于构建弹性和高可用性的系统,而前端团队可以专注于浏览器的兼容性, UI设计和UX。但这还不够,随着复杂性的增长,我们开始将后端的业原创 2020-08-24 14:57:22 · 405 阅读 · 0 评论 -
如何在Vue中实现一个Redux状态管理呢?
在Vue中实现一个Redux状态管理?我们都知道 redux 通常是 react 项目中 中一种管理数据的手段,它跟我们 vue 项目里的 Vuex 状态管理类似,功能相同,但是使用方法却有不同~最近在学习 redux 这一块,为了更好的帮助跟我一样的萌新更加深入的了解 redux 的内部原理,我们就来试试,手动实现一个简单的 redux 状态管理。不同的是,我们是在 vue 项目中来实现的~需求先行我们要实现 redux ,首先要给自己定个小目标,也就是一个业务场景,我们呀,也别想那么复杂,就以原创 2020-07-21 17:01:30 · 736 阅读 · 1 评论 -
Vue 和 React 的组件更新粒度有什么区别?
前言我们都知道 Vue 对于响应式属性的更新,只会精确更新依赖收集的当前组件,而不会递归的去更新子组件,这也是它性能强大的原因之一。例子举例来说 这样的一个组件:<template> <div> {{ msg }} <ChildComponent /> </div></template>我们在触发 this.msg = 'Hello, Changed~' 的时候,会触发组件的更新,视图的重新渲染。原创 2020-06-10 09:36:32 · 1509 阅读 · 0 评论 -
使用Proxy和defineProperty分别构建一款MVVM框架
导读这些天呢,作为前端界比较火的一件事情就是,vue 3.0的诞生,vue 3.0除了在用法上有些许变化外,最主要的变化,莫过于数据劫持的方式的改变;vue 3.0使用的是es6的Proxy进行数据拦截的,而2.x的版本呢,则是采用的Object.defineProperty()这样的方式进行对数据的监听,所以呢,今天我们做个实验,什么样的实验呢?我们分别来使用这个Proxy和definePro...原创 2019-10-23 15:27:37 · 406 阅读 · 0 评论 -
从零开始构建VUE 客户端和服务端SSR项目
一、服务端渲染 1.基本概念Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序。2.为什么要使用服务端渲染优点:(1)更好的 SEO,由于搜索引擎爬虫抓取工具可以直...原创 2018-12-15 00:18:54 · 4271 阅读 · 0 评论 -
eslint+sublime text 3 配置和使用(全)
1.全局安装ESlintcnpm install eslint -g2.在项目目录初始化.eslintrc.js配置文件D:\me\web\case03\kdew_internet_website&amp;gt;eslint --init? How would you like to configure ESLint? Answer questions about your style? Wh...原创 2018-12-28 16:19:12 · 2054 阅读 · 0 评论 -
在vue项目中实现echarts中自动轮播聚焦显示提示框tooltip
导读最新需要实现一个需求,echarts折线图,不需要鼠标触控,也能自动轮播聚焦,显示tooltip数据框,我们来看下最终的案例效果演示:附上案例源码initCharts(){ let option = { title: { show: false }, tooltip: { trigge...原创 2019-05-27 19:18:37 · 4591 阅读 · 1 评论 -
前端知识每日小拷问 007 MVVM框架相关
前端知识小拷问 007 vue、react、angular 相关准备接收大前端形法的考验吧!?每日5题,直击你的内心 ~~今天的前端知识点有如下:vue与react的对比,如何选型?从性能,生态圈,数据量,数据的传递上,作比较 ?vue slot 是做什么的 ?vue和angular的优缺点以及适用场合 ?vue 路由实现原理 ?vue的双向绑定的原理,和an...原创 2019-07-20 11:57:21 · 801 阅读 · 0 评论 -
nuxt 目录结构及配置文件详解
nuxt 目录结构详解首先我们来看下使用 create-nuxt-app脚手架工具所创建的nuxt项目目录的结构,windows cmd 命令行输入,tree /f /a ,打印如下项目目录结构:C:.| .editorconfig| .gitignore| nuxt.config.js| package.json| README.md|+---assets...原创 2019-07-31 14:57:43 · 6691 阅读 · 0 评论 -
nuxt 项目实战之顶部导航菜单组件开发
nuxt.js 项目开发 - 顶部导航菜单组件开发导读首先我们来分析下,最终案例的导航栏,这是一个移动端展示形式的顶部导航栏,这个导航菜单,采用的是bootstrapVue css ui 组件库里面的navbar组件我们需要单独创建一个菜单组件,并且把这个菜单组件放置在,公共的 layout 组件内部,接下来我们来制作菜单导航我们需要在components目录中新建目录App...原创 2019-08-04 13:11:42 · 4190 阅读 · 0 评论 -
新手级使用webpack4.x构建vue的开发环境
起步阶段 使用webpack4.x构建vue的开发环境导读首先呢,我们在这章节呢,我将手把手带着大家使用webpack4.x搭建一个vue的开发环境,这里有的同学可能就会问了?“有现成的类似于vue-cli的webpack脚手架工具,为什么我们还要自己在造轮子呢?” 在这里呢,我将对这个问题做出回答: 同样是前端开发,看着别人拿着高薪,你心动吗? 开发或打包过程中遇到问题,需要修改脚...原创 2019-08-19 12:19:36 · 993 阅读 · 0 评论 -
进阶版 webpack 开发脚手架之线上分离、样式脚本公共提取分离、代码压缩
进阶阶段 webpack 开发线上分离、样式脚本公共提取分离、代码压缩导读在上章节呢,我们基本完成了我们的vue开发环境的构建,这节内容,我们继续深化改造这个脚手架工具;让这个脚手架支持更多的特性,让我们开发和构建打包,更加的方便快捷;hao ~ 我们现在来缕一下,我们今天要开发的内容:(温馨提示:看这章节之前呢,一定要看上一章节:https://blog.csdn.net/WU522948...原创 2019-08-20 20:32:25 · 800 阅读 · 0 评论 -
vue脚手架开发之 babel、postcss配置、多页面打包
进阶阶段 babel、postcss、多页面打包导读在上一章节中,我们学习了开发环境和线上环境的区分,css、js代码分离优化,代码压缩等骚操作;我们这节内容呢,继续打造我们的脚手架工具,Let’s go ~这节内容主要涉及下面这些知识点:css之postcss工程化babel7.x配置根据入口文件,自动生成多页面打包配置postcss问:这是啥?什么鬼?我考,没听试过呀,一...原创 2019-08-21 16:35:54 · 1695 阅读 · 0 评论 -
vuex中module里面的数据操作总结
Vuex 使用了 module 后的访问方法:01 - 如果 使用了 module 和 namespacestate 数据:=> this.$store.state.User.info (user 是模块名字. info 是 state 里面的属性名字)getters 数据: => this.$store.getters[‘User/getUserInfo’] (u...原创 2019-10-05 11:53:41 · 3946 阅读 · 2 评论 -
MVVM框架热门常用的组件库收集整理
在前端项目的开发过程中,少不了需要选择一款组件库作为项目开发的基础,而只要选择对了一款的合适的组件库就能极大的提升开发效率,直接让人体会到飞一般的感觉,简直爽的不要不要的。减少很多冗余的操作,和一些基础的代码整理,让开发更加快乐,让体验更加美好。1.Vue常用的组件库A.element-ui 地址:http://element-cn.eleme.io/#/zh-CNgithub地...原创 2018-12-06 15:32:39 · 1339 阅读 · 0 评论 -
2018年末前端核心基础扩展知识点积累
1.优雅降级和渐进增强概述:渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。 区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功...原创 2018-11-20 17:49:48 · 1774 阅读 · 0 评论 -
八种响应式VUE动效遮罩转场动画开发
简介:使用前端技术,实现后台管理界面的可供预览视频转场特效,可以选择资源后再选择对应的特效组件进行转场预览,然后组合数据发向后端,在由后端推送到安卓端进行对应的视频转场切换。 使用技术:vue 、stylus、jquery、svg(核心)、 javascript 目前包括八种转场: 时钟、百叶窗、扇形打开、十字扩展、分割、覆盖、棋盘推进、溶解 核心技术栈:原生javascript、svg中...原创 2018-07-29 15:57:26 · 7140 阅读 · 0 评论 -
vue数据驱动的核心原理及其代码实现
1. vue数据驱动原理图:2. 简述数据驱动 vuejs在实例化的过程中,会对实例化对象选项中的data 选项进行遍历,遍历其所有属性并使用Object.defineProperty 把这些属性全部转为 getter/setter。同时每一个实例对象都有一个watcher实例对象,他会在模板编译的过程中,用getter去访问data的属性,watcher此时就会把用到的d...原创 2018-08-03 13:06:39 · 5032 阅读 · 1 评论 -
企业CNPM私有仓库、组件库实现方案
一、为什么要使用组件抽离,外部安装的方法,多处调用的方法? 方便快捷,面向未来式开发,提高效率,避免冗余,提升项目质量,多项目可以同时使用,不用多次重复开发。在团队内部搭建私有仓库,方便团队内部成员代码的共用,不写重复而有无意义的代码。二、组件库的生态圈需要哪些?(1)vue-cli 3.x(2)vue + webpack(3)npm 包管理工具(4)vue组件库、vue...原创 2018-09-26 21:58:26 · 2197 阅读 · 0 评论 -
团队开发前端VUE项目代码规范
一、规范目的: 统一编码风格,命名规范,注释要求,在团队协作中输出可读性强,易维护,风格一致的代码 二、开发SRC目录: 1.Vuex目录 (状态树配置)2.Router目录(路由配置)3.Pages目录 (放置主路由组件 注意命名规范)4.Common目录 (放置静态文件)5.Config目录 (全局配置项,路由拦截,报错信息,等枚举信息)6.Api目...原创 2018-09-22 20:18:11 · 3460 阅读 · 0 评论 -
vue后台管理开发所遇到的问题及解决办法
1. vue项目中使用echarts : 最佳解决方法: https://blog.csdn.net/mr_wuch/article/details/70225364 官方实例: http://echarts.baidu.com/examples/2. element-ui 元素绑定不上click事件: 解决方法:采用 @click.native="log...原创 2018-10-13 20:08:24 · 7446 阅读 · 0 评论 -
vue-cli项目路由懒加载的三种方式
闲唠嗑几句今天公司有新的项目要开展,需要重新部署新的项目,所以说以前好多忘记的东西,又得重新捡起来一遍,配置路由的时候发现还是使用的普通的使用require懒加载路由,所以在查看文档和资料后又重新总结了一遍,以加深记忆和方便下次查阅。 一、使用import异步引入组件{ path: '/hyh', component: ()=>{ import('@/compo...原创 2018-10-15 17:40:44 · 5930 阅读 · 0 评论 -
vue常用创建组件几种方式总结
最近一周需要使用vue开发一个谷歌扩展插件,但是又不能在vue-cli脚手架中开发,所以只能单独引入vue.js整个包进行脚本植入开发。引入vue.js就代表着不能用import、require之类的引入单文件组件文件,只能在文件中开发,或者多个js文件分先后顺序植入开发,然后就出现了一个尴尬的问题就是,忘记了最原本的其他组件创建的方式,所以记录回顾下:1. 全局注册组件:<!DO...原创 2018-09-30 12:35:59 · 10640 阅读 · 0 评论 -
Vue中component标签解决项目组件化の思路
一、 啰嗦几句在vue项目组件化的过程中,遇到了一些问题,什么问题呢?就是在做一个多功能,多可用,多兼容的大组件的时候,发现在这个组件内部,实现了太多的if、for逻辑,包括大量的html元素,虽然说每段功能块都有批注,但是体积还是比较庞大,最近有些需求,需要将页面上的一大块筛选功能剥离开,形成单独的组件,统一数据渲染,统一组件管理,且这些功能无论是样式,或者是从结构来说,差异性都很大,所以考...原创 2018-10-19 13:48:40 · 9214 阅读 · 8 评论 -
vue源码之入口文件解析
由于项目中经常使用vue,所以这次趁有机会赶紧拜读下源码,体验下vue源码的设计风采。一、下载源码Github地址:https://github.com/RiversCoder/vue二、源码项目目录三、加载core内核入口文件index.js 通过看源码我们可以得知这个入口文件:(1)引入了几个对象,包括Vue构造方法(2)初始化全局API : init...原创 2018-10-19 17:32:35 · 2938 阅读 · 0 评论 -
vue插件的开发流程
趁有机会,简单回顾下vue插件开发的过程。学习本身就是个不断重复滴过程嘛:一、官网插件的开发文档地址https://cn.vuejs.org/v2/guide/plugins.html 二、简单唠一唠但是呢,如果看官网文档的话,有的小朋友可能就云里雾里了,不想再进行下去了,其实vue对于插件的定义就是,使用Vue.use方法,将引入的install方法里面相关Vue操作的方...原创 2018-10-25 12:06:48 · 1268 阅读 · 0 评论 -
vue-router使用详解回顾
官方文档参考地址:https://router.vuejs.org/zh/vue-router 原理图: 1.router-link(1)to属性: to (required) | type: string | Location简述:表示目标路由的链接。当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的...原创 2018-10-21 23:52:58 · 1860 阅读 · 0 评论 -
请求图片处理二进制乱码采坑记
今天日常做项目,项目中有一个功能,需要获取第三方登录的时候,返回一张可供扫描的二维码图片,展示在页面中。一般来所,直接axios请求就可以了,但是返回给了我一堆二进制乱码,乱码情况如下:然后一脸懵逼,正好我在坐窗子旁边,被太阳烤得精神恍惚,毫无头绪。然后,找原因呗,一直尝试了好多办法;都没想起是没传递responseType的原因引起的,由于axios的默认response是:applic...原创 2018-10-30 15:53:19 · 6543 阅读 · 1 评论 -
Vuex源码阅读理解
1. 提出问题:Vuex是如把store注入到Vue实例中去的呢?this.$store目标文件:mixin.js每个vue实例里面访问this.$store都是访问的mixin混入在beforeCreate生命周期里面的this.$store根据这个mixin.js中的代码逻辑可以知道,在vue2.x的条件下:if (version >= 2) { /*通过m...原创 2018-11-08 12:22:22 · 1758 阅读 · 0 评论 -
中小型公司节目控制功能组件开发(WEB)
1. 项目需求:(1)按照IOS已上架应用Skylander IPAD版本功能对应开发功能一样的WEB版(2)核心功能:节目编辑、节目控制 2. IOS项目部分预览图: 3.当前开发页面为节目控制页面: (1)需要开发页面:节目控制页面、模块编辑页面、资源选择页面、素材排版页面(2)节目控制页面:事件(时间)控制组件、模板选择组件、资源选择组...原创 2018-07-17 23:51:38 · 1219 阅读 · 0 评论