×
广告

前端-优雅的VueJS

96
掘金官方
2018.01.08 15:37* 字数 4598

Vue.js轻松实现页面后退时,还原滚动位置

前言 从Vue.js 2.x发布之后,陆陆续续做了七八个项目,摸索出来了一套自己的状态管理模式,我将之称为Vuet。它以规则来驱动状态更新,它带来的是开发效率上的飙升,它就像草原,而你是野马,任你随意驰骋,总之它是为敏捷开发而诞生。 缘由 在大型的Vue应用程序开发中,多组件通信…


进阶 vue 全家桶


本项目可以作为一个前端 vue 进阶项目


如何不用构建工具开发Vue全家桶项目


Vue是目前最流行的前端开发框架之一,与Vue-router和Vuex组成俗称的Vue全家桶,更是开发前端富交互应用的利器。配合webpack等构建工具,开发大型应用也可以得心应手。随着Vue的普及,可能一些老旧项目也希望能“渐进式”的使用Vue,或者有的项目想用Vue来做但不…


Vueg - 为 webApp 提供转场特效的开源 Vue 插件


如果你有使用 vue + vue-router 开发 web App、hybrid App,这个插件可以让你的 app 轻松获得页面切换时的转场特效。


Vue.js 学习系列二 —— vuex 学习实践笔记(附 DEMO)


本文介绍了作者在学习 vuex 过程中所获的经验,用简洁的语言解释 vuex 的用法


Vuex2 与 Axios 开发


Vuex2 与 Axios 开发的那点事


使用 vue2+Vuex+Router 重写饿了么点餐系统和 vue 插件简析


最新写的 Demo,技术分享


基于Vue实现后台系统权限控制


用Vue这类双向绑定框架做后台系统再适合不过,后台系统相比普通前端项目除了数据交互更频繁以外,还有一个特别的需求就是对用户的权限控制,那么如何在一个Vue应用中实现权限控制呢?下面是我的一点经验。
在权限的世界里服务端提供的一切都是资源,资源可以由请求方法+请求地址…


axios 全攻略


对 axios 官方文档进行了详细翻译,帮助大家更好的了解和使用 axios


基于 vue 开发的移动端 H5 积分商城项目


基于 vue@1.0 开发的移动端 H5 积分商城项目
vue
vue-ruoter
vue-resource
webpack


vue2.0 transition -- demo 实践填坑


vue1.0 版本和 2.0 版本的过渡系统改变还是蛮彻底的,具体请自行详看文档介绍:https://vuefe.cn/v2/guide/migration.html# 过渡。在使用 2.0 版本做过渡效果的时候,虽然比 1.0 版本强大很多,但是实践过程中还是踩了一些不应该踩但是还是踩了的坑。虽然官网文档已经很详细地介绍了各种应用场景,但是这里还是通过几个小 demo 案例来感受下 vue2.0 transition 带来的便利吧!


一个 Vue.js+Node.js 的博客内容管理系统


一个后端 Node.js,数据库 mongoDB,前端 Vue.js 的博客内容管理系统。
包括了 vue-router, vue-resource, vuex 等。


Vux 2.0 发布


基于 WeUI 和 Vue(2.x) 开发的移动端 UI 组件库,主要服务于微信页面


【vue+axios】一个项目学会前端实现登录拦截


一个项目学会 vue 全家桶 + axios 实现登录、拦截、登出功能,以及利用 axios 的 http 拦截器拦截请求和响应。


Vue2.0用户权限控制解决方案


Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案,通过对路由、视图、请求三个层面的控制,使开发者可以实现任意颗粒度的用户权限控制。


Vue 服务端渲染业务入门实践


作者:威威(沪江前端开发工程师)

最近, 产品同学一如往常笑嘻嘻的递来需求文档, 纵使内心万般拒绝, 身体倒是很诚实。 接过需求,好在需求不复杂, 简单构思 后决定用 Vue, 得心应手。 切好图, 挽起袖子准备撸代码的时候, SEO 同学不知何时已经站到了背后。

"听说你要用 Vue?"
"恩..."
"SEO 考虑了吗? 整个 SPA 出来,网页的 SEO 咋办?"
"奥..."

换以前, 估计只能无奈的换个实现方式, 但是 Vue 2.0 时代的到来, 给你多了一种可能。 你可以对 SEO 工程师说: 用 Vue 没问题!


Vue2.x 踩坑与总结


总结自己在学习 vue 过程中遇到的问题


Vuex 实战:如何在大规模 Vue 应用中组织 Vuex 代码 | 掘金技术征文


作者:滴滴公共前端团队 前言: 最早我们在设计《Vue.js权威指南》这本书的时候也一直思考要不要加入 Vuex 相关的内容,也有很多同学抱怨说我们没有加入这个章节。 其实整体我们应用的还是比较早,也在 1.0 和 2.* 都踩了一些坑,但是也不期望大家在任何复杂不复杂的场景里…


Vue.js 学习系列四——Webpack 学习实践


要想学好 Vue 组件化开发,必先对 webpack 有充分的了解。


vue-cli#2.0 项目结构分析


接触过 vue 的同学应该都知道,用 vue-cli 开发 vue 的项目十分方便,它可以帮你快速构建一个拥有强大构建能力的 Vue.js 项目。今天不谈什么是 vue-cli,而是来说说用 vue-cli 构建的项目结构是什么样的并分析部分文件。


AT - 前端 UI 组件库


AT-UI 是一款基于 Vue 2.x 的前端 UI 组件库,主要用于快速开发 PC 网站产品。


vuex 探索之路


vuex 探索之路


Vue.js 学习系列三——axios 学习实践


本文介绍了 Vue 推荐网络通讯库 axios 的使用


以 Toast 为例讲解 Vue 组件的概念


  1. 单文件组件 日常开发时,我们项目文件夹通常都是使用 vue-cli 创建的,以 单文件组件 的方式来组织代码的。按照平日的开发流程,现在先创建一个 Toast.vue 文件。 该组件有两个 prop : visible 与 msg。visible 控制显示与隐藏,msg …


    Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)

对于以上三类人,走吧,这里不是你来装逼的地方. 你们也不值得看老子花那么多时间去汇总的水文. 学习一些新东西.若是有人给汇总那么多问题(指明方向和一定的解决法子). 这种情况一般报错信息可以看到是哪个包抛出的信息. 一般卸载这个模块,安装重新安装下即可. 官方解释如下: dat…


一个基于vue2、koa2和mongodb的博客


博客终于差不多写完了,虽然还是可能有一堆bug, 不过我迫不及待要写一篇博文来分享了= = 博客前台展示 博客前台展示 博客后台展示 博客后台展示博客后台编辑 项目地址 github地址:https://github.com/BUPT-HJM/vue-blog 在线访问地址: …


用vue优雅地编写UI组件的几条指导原则


最近在尝试写几个UI组件,并通过阅读element-ui的源码,与其反复比较,然后认真思考,最后总结出一些自己的一些心得和体会。在造轮子的过程中,既巩固了html,css,js基础,又加深了对vue源码的理解,更重要的是给了我一个温习和实践所学过的设计模式和思想的机会,来编写更…


vue + vuex + directives实现权限按钮的思路


对于这种问题,很显然不能每个按钮都去判断,所以我思考了一下结合自定义指令和vuex完成了相应的实现。 vuex里面的showLogin这个action无非就是对login的显示隐藏flag的操作。 这里只是完成了简单的登陆权限控制,从登陆权限出发,可以加入更多的权限控制,比如根…


VueJS 开发常见问题集锦


由于公司的前端开始转向 VueJS,最近开始使用这个框架进行开发,遇到一些问题记录下来,以备后用。
主要写一些 官方手册 上没有写,但是实际开发中会遇到的问题,需要一定知识基础。
CLI: Vue-CLI UI: Element HTML: Pug(Jade) CSS: Les…


Weex 新官网


Weex Conf 在杭州举行,活动中发布了新的 Weex 官网及 Logo


前后端分离之路 - Vue2 项目多入口模板改造方案


做前后端分离也有一段时间了,需要升级一下项目多入口的构建方案到 Vue@2.x。项目模板没有选择重新开发,而是直接选用了 vue 官方模板 vuejs-templates/webpack。现在我们需要把这个 SPA 单入口模板改成多入口,并且修改添加一些开发功能,以配合 Koa-grace 时的开发流程。


如何用 Vue 构建大型单页面应用


构建高性能,高可用的单页面应用


react都这么无情了,vue还是那么有义,4种父子组件数据双向传递大法


自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定。看看这个:input v-model="something" 这个我们直接用v-model像表单那样绑定就直接可以进行父子组件双向绑定了。在v-model的语法糖里封装了v-on:input …


Vue 2.0 服务端渲染怎么玩?


Vue 2.0 发布了也有一段时间了,新版本比较大的更新就是支持服务端渲染,最近有空折腾了下 Vue 的服务端渲染,记录下来。


Vue-router2.0 学习笔记


Vue.js 的一大特色就是构建单页面应用十分方便,既然要方便构建单页面应用那么自然少不了路由,vue-router 就是 vue 官方提供的一个路由框架。总体来说,vue-router 设计得简单好用,下面就来聊聊我实际用到过的一些方法。


BetterScroll:可能是目前最好用的移动端滚动插件


作者:滴滴webapp架构组-付楠 BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件(GitHub地址),适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。 为了满足这些场景,它不仅支持惯性滚动、边界回弹、滚动条淡入淡出等效果的灵活配置,让滚动…


当 better-scroll 遇见 Vue


作者:滴滴公共前端 黄轶 在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了。 以滴滴为例,可以是这样竖向滚动的列表,如图所示: 竖向列表 也可以是横向滚动的导航栏,如图所示: 横向列表 可以打开“微信 —> 钱包—>滴滴出行”体验效果。 我们在实现这类滚动功能的时…


手摸手,带你用vue撸后台 系列二(登录权限篇)


进入正题,做后台项目区别于做其它的项目,权限验证与安全性是非常重要的,可以说是一个后台项目一开始就必须考虑和搭建的基础核心功能。我们所要做到的是:不同的权限对应着不同的路由,同时侧边栏也需根据不同的权限,异步生成。这里先简单说一下,我实现登录和权限验证的思路。 登录:当用户填写…


打造 Vue.js 可复用组件


从维护视图到维护数据,Vue.js 让我们快速地开发应用。但随着业务代码日益庞大,组件也越来越多,组件逻辑耦合严重,使代码维护变得十分困难。

同时,Vue.js 的接口和语法十分自由,实现同一功能有若干种方法。每个人解决问题的思路不一样,写出来的代码也就不一样,缺乏团队内的规范。

本文旨在从组件开发的不同方面列举出合理的解决方法,作为建立组件规范的一个参考。


Vue2 后台管理系统解决方案


基于 Vue.js 2.x 系列 + Element UI 的后台管理系统解决方案。该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统(Web Management System)开发。


Vue2 全家桶与微信开发


使用 Vue 全家桶开发微信项目踩坑全过程以及经验总结


vue-lazy-render


Vue 组件, 用于 Vue 组件的延迟渲染, 改善初次进入页面或者数据量较大的页面操作时出现卡顿的情况。


从一个改写后的 vue 小应用认识 vuex


源代码是 vuex1.0 写的,学习一段时间 vue 后用 vuex2.0 重新写了一遍,让大家可以对比一下 vuex1.0 和 vuex2.0 的一些写法上的差异。


Vuex 通俗版教程


本文基本上是官方教程的盗版,用通俗易懂的文字讲解Vuex,也对原文内容有删减。 如果你对以上声明不介意,那么就可以继续看本文,希望对你有所帮助。 学习一个新技术,必须要清楚两个W,"What && Why"。 "XX 是什么?","为什么要使用 XX ,或者说 XX 有什么好处…


Vuex 实战


最早我们在设计《Vue.js 权威指南》这本书的时候也一直思考要不要加入 Vuex 相关的内容,也有很多同学抱怨说我们没有加入这个章节。


深入 NUXT,看看一条命令行的背后到底发生了什么


随着 react 社区的 next.js 框架的发布,vue 社区也终于诞生了属于自己的前后端同构框架 nuxt.js。在进一步的接触与使用中,发现 nuxt.js 确实极大地方便了 vue 项目的开发,其背后的逻辑也值得我们玩味。本文主要研究 nuxt 的运行原理,分析它从接收一条 nuxt 指令,到完成指令背后所发生的一系列事情。


Vue 2.0 构建单页应用最佳实战


前言 我们将会选择使用一些vue周边的库vue-cli, vue-router,vue-resource,vuex 1.使用vue-cli创建项目2.使用vue-router实现单页路由3.用vuex管理我们的数据流4.使用vue-resource请求我们的node服务端5.使…


Vue 大型 SPA 项目的最佳实践


这两年前端发展迅速,日新月异,各种框架层出不穷,这是一个坏时代,也是一个最好的时代,有幸的是能够身处在这个时代去亲眼见证它、实践它。


vue中慎用style的scoped属性


谨慎使用不是不用,而是持一种审视的目光去看待它。scoped肯定是解决了样式私有化的问题,但同时也引入了新的问题---样式不易(可)修改,而很多时候,我们是需要对公共组件的样式做微调的。所以我才说要谨慎使用 首先要说明的问题是,最开始我以为这是一个BUG或者说一个弊端(因为当时…


VueX 填坑指南


Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。


Vue.js 学习系列一 —— vue-router2 学习实践笔记(附 DEMO)


记录了作者在学习 vue-router 过程中的经验,并附带学习 demo。


Vuex 通俗版教程


通俗易懂的 Vuex 简明教程


Vue-Blu 发布啦!基于 Vue2.x 和 Bulma 的 UI 组件库


Vue-Blu 是一款基于 Vue2.x 和 Bulma 的 UI 组件库。目前已有近 30 个组件, 基本覆盖常见的场景。后续也会不断完善和增加。特点是基于 Bulma css 框架,本身具有了很好的布局和样式的基础、支持定制化、 API 友好、灵活。是前端快速开发的利器!


Vue 核心之数据劫持


这篇文章讲解的是 Vue 框架中通过 Object.defineProperty() 这个方法实现数据劫持的作用


一个商品 SKU 是怎么生成的(vue 实现)


一个商品 SKU 是怎么生成的


Vue.js 富文本编辑器


A wysiwyg editor written in Vue.js and Vuex.js, only support Vue.js 2.x.x

精选文集推荐
Web note ad 1