GithubHelp home page GithubHelp logo

bluezhan / vue2 Goto Github PK

View Code? Open in Web Editor NEW
443.0 33.0 117.0 26.31 MB

【🔥Vue.js资讯📚】目前web前端开发非常火爆的框架;定时更新,欢迎 Star 一下。

Home Page: https://itemsets.github.io/vue2

License: MIT License

JavaScript 100.00%
vue2 vue-router vue-ui vue-devtools vue-components vue-plugin vue-loader vue-cli es6 vue

vue2's Introduction

vue2's People

Contributors

bluezhan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue2's Issues

Vue常用经典开源项目汇总参考-海量 - (转)

作者: EricHu
出处:http://www.cnblogs.com/huyong/

Vue常用经典开源项目汇总参考-海量

Vue是什么?

  Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

  Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

  易用(已经会了HTML,CSS,JavaScript 即可轻松上手)、灵活(简单小巧的核心,渐进式技术栈,足以应付任何规模的应用)、性能(17kb min+gzip 运行大小、超快虚拟DOM、最省心的优化)、渐进式JavaScript 框架。

  Vue.js 是我在2014年2月开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在 GitHub上已经有快6000+的star。

  Vue相关网站参考:

  Vue中文帮助网站:http://cn.vuejs.org/

  Vue github开源地址:https://github.com/vuejs/vue

  Vue.js专业中文社区:http://www.vue-js.com/

  前端开发Vue相关:http://www.opendigg.com/tags/front-vue

  本文开源地址:https://github.com/yonghu86/awesome-github-vue

  本文主要是收集与整理Vue相关的开源资料,以供需要的朋友参考。主要包含以下几方面的内容:

  UI组件、开发框架、实用库、服务端、辅助工具、应用实例、Demo示例

UI组件

element ★9305 - 饿了么出品的Vue2的web UI工具套件
Vux ★6802 - 基于Vue和WeUI的组件库
mint-ui ★4776 - Vue 2的移动UI元素
iview ★4458 - 基于 Vuejs 的开源 UI 组件库
Keen-UI ★2363 - 轻量级的基本UI组件合集
vue-material ★2207 - 通过Vue Material和Vue 2建立精美的app应用
muse-ui ★1992 - 三端样式一致的响应式 UI 库
vuetify ★1678 - 为移动而生的Vue JS 2组件框架
vonic ★1494 - 快速构建移动端单页应用
eme ★1390 - 优雅的Markdown编辑器
vue-multiselect ★1166 - Vue.js选择框解决方案
vue-table ★824 - 简化数据表格
VueCircleMenu ★776 - 漂亮的vue圆环菜单
vue-chat ★748 - vuejs和vuex及webpack的聊天示例
radon-ui ★633 - 快速开发产品的Vue组件库
vue-waterfall ★605 - Vue.js的瀑布布局组件
vue-carbon ★595 - 基于 vue 开发MD风格的移动端
vue-beauty ★569 - 由vue和ant design创建的优美UI组件
vue-blu ★557 - 帮助你轻松创建web应用
vueAdmin ★556 - 基于vuejs2和element的简单的管理员模板
vue-syntax-highlight ★551 - Sublime Text语法高亮
vue-infinite-scroll ★524 - VueJS的无限滚动指令
Vue.Draggable ★493 - 实现拖放和视图模型数组同步
vue-awesome-swiper ★476 - vue.js触摸滑动组件
vue-calendar ★465 - 日期选择插件
bootstrap-vue ★458 - 应用于Vuejs2的Twitter的Bootstrap 4组件
vue-swipe ★361 - VueJS触摸滑块
vue-amap ★346 - 基于Vue 2和高德地图的地图组件
vue-chartjs ★333 - vue中的Chartjs的封装
vue-datepicker ★331 - 日历和日期选择组件
markcook ★318 - 好看的markdown编辑器
vue-google-maps ★287 - 带有双向数据绑定Google地图组件
vue-progressbar ★248 - vue轻量级进度条
vue-picture-input ★236 - 移动友好的图片文件输入组件
vue-infinite-loading ★224 - VueJS的无限滚动插件
vue-upload-component ★204 - Vuejs文件上传组件
vue-datetime-picker ★197 - 日期时间选择控件
vue-scroller ★196 - Vonic UI的功能性组件
vue2-calendar ★181 - 支持lunar和日期事件的日期选择器
vue-video-player ★178 - VueJS视频及直播播放器
vue-fullcalendar ★176 - 基于vue.js的全日历组件
rubik ★170 - 基于Vuejs2的开源 UI 组件库
VueStar ★169 - 带星星动画的vue点赞按钮
vue-mugen-scroll ★167 - 无限滚动组件
mint-loadmore ★167 - VueJS的双向下拉刷新组件
vue-tables-2 ★162 - 显示数据的bootstrap样式网格
vue-virtual-scroller ★158 - 带任意数目数据的顺畅的滚动
DataVisualization ★149 - 数据可视化
vue-quill-editor ★149 - 基于Quill适用于Vue2的富文本编辑器
Vueditor ★138 - 所见即所得的编辑器
vue-html5-editor ★132 - html5所见即所得编辑器
vue-msgbox ★127 - vuejs的消息框
vue-slider ★126 - vue 滑动组件
vue-core-image-upload ★124 - 轻量级的vue上传插件
vue-slide ★121 - vue轻量级滑动组件
vue-lazyload-img ★118 - 移动优化的vue图片懒加载插件
vue-drag-and-drop-list ★114 - 创建排序列表的Vue指令
vue-progressive-image ★107 - Vue的渐进图像加载插件
vuwe ★107 - 基于微信WeUI所开发的专用于Vue2的组件库
vue-dropzone ★105 - 用于文件上传的Vue组件
vue-charts ★101 - 轻松渲染一个图表
vue-swiper ★95 - 易于使用的滑块组件
vue-images ★93 - 显示一组图片的lightbox组件
vue-carousel-3d ★91 - VueJS的3D轮播组件
vue-region-picker ★89 - 选择**的省份市和地区
vue-typer ★89 - 模拟用户输入选择和删除文本的Vue组件
vue-impression ★88 - 移动Vuejs2 UI元素
vue-datatable ★87 - 使用Vuejs创建的DataTableView
vue-instant ★86 - 轻松创建自动提示的自定义搜索控件
vue-dragging ★86 - 使元素可以拖拽
vue-slider-component ★85 - 在vue1和vue2中使用滑块
vue2-loading-bar ★76 - 最简单的仿Youtube加载条视图
vue-datepicker ★75 - 漂亮的Vue日期选择器组件
vue-video ★70 - Vue.js的HTML5视频播放器
vue-toast-mobile ★68 - VueJS的toast插件
vue-image-crop-upload ★67 - vue图片剪裁上传组件
vue-tooltip ★66 - 带绑定信息提示的提示工具
vue-highcharts ★66 - HighCharts组件
vue-touch-ripple ★62 - vuejs的触摸ripple组件
coffeebreak ★61 - 实时编辑CSS组件工具
vue-datasource ★60 - 创建VueJS动态表格
vue2-timepicker ★60 - 下拉时间选择器
vue-date-picker ★59 - VueJS日期选择器组件
vue-scrollbar ★58 - 最简单的滚动区域组件
vue-quill ★56 - vue组件构建quill编辑器
vue-google-signin-button ★55 - 导入谷歌登录按钮
vue-svgicon ★53 - 创建svg图标组件的工具
vue-float-label ★49 - VueJS浮动标签模式
vue-baidu-map ★46 - 基于 Vue 2的百度地图组件库
vue-social-sharing ★45 - 社交分享组件
vue2-editor ★44 - HTML编辑器
vue-tagsinput ★41 - 基于VueJS的标签组件
vue-easy-slider ★41 - Vue 2.x的滑块组件
datepicker ★38 - 基于flatpickr的时间选择组件
vue-chart ★37 - 强大的高速的vue图表解析
vue-music-master ★37 - vue手机端网页音乐播放器
handsontable ★35 - 网页表格组件
vue-simplemde ★35 - VueJS的Markdown编辑器组件
vue-popup-mixin ★35 - 用于管理弹出框的遮盖层
cubeex ★33 - 包含一套完整的移动UI
vue-fullcalendar ★32 - vue FullCalendar封装
vue-material-design ★32 - Vue MD风格组件
vue-morris ★31 - Vuejs组件封装Morrisjs库
we-vue ★30 - Vue2及weui1开发的组件
vue-image-clip ★29 - 基于vue的图像剪辑组件
vue-bootstrap-table ★29 - 可排序可检索的表格
vue-radial-progress ★28 - Vue.js放射性进度条组件
vue-slick ★28 - 实现流畅轮播框的vue组件
vue-pull-to-refresh ★27 - Vue2的上拉下拉
vue-form-2 ★26 - 全面的HTML表单管理的解决方案
vue-side-nav ★26 - 响应式的侧边导航
mint-indicator ★26 - VueJS移动加载指示器插件
chartjs ★24 - Vue Bulma的chartjs组件
vue-scroll ★24 - vue滚动
vue-ripple ★24 - 制作谷歌MD风格涟漪效果的Vue组件
vue-touch-keyboard ★22 - VueJS虚拟键盘组件
vue-chartkick ★22 - VueJS一行代码实现优美图表
vue-ztree ★21 - 用 vue 写的树层级组件
vue-m-carousel ★20 - vue 移动端轮播组件
vue-datepicker-simple ★20 - 基于vue的日期选择器
vue-tabs ★20 - 多tab页轻型框架
vue-verify-pop ★19 - 带气泡提示的vue校验插件
vue-parallax ★15 - 整洁的视觉效果
vue-img-loader ★14 - 图片加载UI组件
vue-typewriter ★13 - vue组件类型
vue-smoothscroll ★12 - smoothscroll的VueJS版本
vue-city ★10 - 城市选择器
vue-tree ★10 - vue树视图组件
vue-ios-alertview ★8 - iOS7+ 风格的alertview服务
dd-vue-component ★7 - 订单来了的公共组件库
paco-ui-vue ★7 - PACOUI的vue组件
vue-cmap ★5 - Vue China map可视化组件
vue-button ★4 - Vue按钮组件 

开发框架

vue.js ★45466 - 流行的轻量高效的前端组件化方案
vue-admin ★3222 - Vue管理面板框架
electron-vue ★1273 - Electron及VueJS快速启动样板
vue-2.0-boilerplate ★241 - Vue2单页应用样板​
vue-spa-template ★223 - 前后端分离后的单页应用开发
Framework7-Vue ★210 - VueJS与Framework7结合
vue-bulma ★132 - 轻量级高性能MVVM Admin UI框架
vue-webgulp ★100 - 仿VueJS Vue loader示例
vue-element-starter ★34 - vue启动页 

实用库

vuex ★5997 - 专为 Vue.js 应用程序开发的状态管理模式
vuelidate ★750 - 简单轻量级的基于模块的Vue.js验证
qingcheng ★677 - qingcheng主题
vue-desktop ★461 - 创建管理面板网站的UI库
vue-meta ★257 - 管理app的meta信息
vue-axios ★209 - 将axios整合到VueJS的封装
vue-svg-icon ★116 - vue2的可变彩色svg图标方案
avoriaz ★110 - VueJS测试实用工具库
vue-framework7 ★83 - 结合VueJS使用的Framework7组件
vue-bootstrap-modal ★78 - vue的Bootstrap样式组件
vuep ★72 - 用实时编辑和预览来渲染Vue组件
vue-online ★67 - reactive的在线和离线组件
vue-lazy-render ★66 - 用于Vue组件的延迟渲染
vue-password-strength-meter ★65 - 交互式密码强度计
element-admin ★57 - 支持 vuecli 的 Element UI 的后台模板
vue-electron ★55 - 将选择的API封装到Vue对象中的插件
cleave ★55 - 基于cleave.js的Cleave组件
vue-events ★54 - 简化事件的VueJS插件
vue-shortkey ★53 - 应用于Vue.js的Vue-ShortKey 插件
vue-cordova ★50 - Cordova的VueJS插件
vue-router-transition ★49 - 页面过渡插件
vue-gesture ★48 - VueJS的手势事件插件
http-vue-loader ★46 - 从html及js环境加载vue文件
vue-qart ★46 - 用于qartjs的Vue2指令
vuemit ★44 - 处理VueJS事件
vue-websocket ★42 - VueJS的Websocket插件
vue-local-storage ★41 - 具有类型支持的Vuejs本地储存插件
lazy-vue ★41 - 懒加载图片
vue-bus ★36 - VueJS的事件总线
vue-reactive-storage ★35 - vue插件的Reactive层
vue-notifications ★32 - 非阻塞通知库
vue-lazy-component ★32 - 懒加载组件或者元素的Vue指令
v-media-query ★32 - vue中添加用于配合媒体查询的方法
vue-observe-visibility ★31 - 当元素在页面上可见或隐藏时检测
vue-ts-loader ★29 - 在Vue装载机检查脚本
vue-pagination-2 ★28 - 简单通用的分页组件
vuex-i18n ★26 - 定位插件
Vue.resize ★26 - 检测HTML调整大小事件的vue指令
vuex-shared-mutations ★25 - 分享某种Vuex mutations
vue-file-base64 ★16 - 将文件转换为Base64的vue组件
modal ★15 - Vue Bulma的modal组件
Famous-Vue ★15 - Famous库的vue组件
leo-vue-validator ★13 - 异步的表单验证组件
Vue-Easy-Validator ★11 - 简单的表单验证
vue-truncate-filter ★9 - 截断字符串的VueJS过滤器
vue-zoombox ★9 - 一个高级zoombox
vue-input-autosize ★5 - 基于内容自动调整文本输入的大小
vue-lazyloadImg ★3 - 图片懒加载插件 

服务端

nuxt.js ★2743 - 用于服务器渲染Vue app的最小化框架
express-vue ★137 - 简单的使用服务器端渲染vue.js
vue-ssr ★67 - 非常简单的VueJS服务器端渲染模板
vue-ssr ★56 - 结合Express使用Vue2服务端渲染
vue-easy-renderer ★22 - Nodejs服务端渲染 

辅助工具

DejaVue ★543 - Vuejs可视化及压力测试
vue-play ★445 - 展示Vue组件的最小化框架
vscode-VueHelper ★185 - 目前vscode最好的vue代码提示插件
vue-generate-component ★39 - 轻松生成Vue js组件的CLI工具
vue-multipage-cli ★33 - 简单的多页CLI
VuejsStarterKit ★26 - vuejs starter套件 

应用实例

koel ★7175 - 基于网络的个人音频流媒体服务
pagekit ★4021 - 轻量级的CMS建站系统
vuedo ★1040 - 博客平台
jackblog-vue ★943 - 个人博客系统
vue-cnode ★597 - 重写vue版cnode社区
CMS-of-Blog ★405 - 博客内容管理器
rss-reader ★326 - 简单的rss阅读器
vue-ghpages-blog ★208 - 依赖GitHub Pages无需本地生成的静态博客
swoole-vue-webim ★97 - Web版的聊天应用
vue-dashing-js ★70 - nuvo-dashing-js的fork
fewords ★52 - 功能极其简单的笔记本
vue-blog ★33 - 使用Vue2.0 和Vuex的vue-blog 

Demo示例

Vue-cnodejs ★2113 - 基于vue重写Cnodejs.org的webapp
NeteaseCloudWebApp ★1154 - 高仿网易云音乐的webapp
vue-zhihu-daily ★875 - 知乎日报 with Vuejs
vue-wechat ★732 - vue.js开发微信app界面
vue2-demo ★699 - 从零构建vue2 + vue-router + vuex 开发环境
eleme ★612 - 高仿饿了么app商家详情
vue-demo ★575 - vue简易留言板
maizuo ★498 - vue/vuex/redux仿卖座网
spa-starter-kit ★489 - 单页应用启动套件
vue-music ★485 - Vue 音乐搜索播放
douban ★402 - 模仿豆瓣前端
vue-Meizi ★394 - vue最新实战项目
zhihudaily-vue ★386 - 知乎日报web版
vue-demo-kugou ★310 - vuejs仿写酷狗音乐webapp
VueDemo_Sell_Eleme ★307 - Vue2高仿饿了么外卖平台
vue2.0-taopiaopiao ★246 - vue2.0与express构建淘票票页面
vue-leancloud-blog ★239 - 一个前后端完全分离的单页应用
node-vue-server-webpack ★239 - Node.js+Vue.js+webpack快速开发框架
mi-by-vue ★222 - VueJS仿小米官网
vue-fis3 ★199 - 流行开源工具集成demo
vue2.x-douban ★188 - Vue2实现简易豆瓣电影webApp
vue-demo-maizuo ★188 - 使用Vue2全家桶仿制卖座电影
vue-zhihudaily ★169 - 知乎日报 Web 版本
vue-adminLte-vue-router ★162 - vue和adminLte整合应用
vue-axios-github ★157 - 登录拦截登出功能
Zhihu-Daily-Vue.js ★134 - Vuejs单页网页应用
hello-vue-django ★113 - 使用带有Django的vuejs的样板项目
vue-cnode ★101 - vue单页应用demo
x-blog ★100 - 开源的个人blog项目
vue-express-mongodb ★96 - 简单的前后端分离案例
websocket_chat ★91 - 基于vue和websocket的多人在线聊天室
photoShare ★85 - 基于图片分享的社交平台
vue-zhihudaily-2.0 ★81 - 使用Vue2.0+vue-router+vuex创建的zhihudaily
notepad ★77 - 本地存储的记事本
vueBlog ★75 - 前后端分离博客
vue-ruby-china ★70 - VueJS框架搭建的rubychina平台
Zhihu_Daily ★70 - 基于Vue和Nodejs的Web单页应用
vue-koa-demo ★60 - 使用Vue2和Koa1的全栈demo
vue2.x-Cnode ★50 - 基于vue全家桶的Cnode社区
life-app-vue ★49 - 使用vue2完成多功能集合到小webapp
github-explorer ★49 - 寻找最有趣的GitHub库
vue-trip ★48 - vue2做的出行webapp
vue-ssr-boilerplate ★47 - 精简版的ofvue-hackernews-2
vue-bushishiren ★45 - 不是诗人应用
houtai ★44 - 基于vue和Element的后台管理系统
ios7-vue ★38 - 使用vue2.0 vue-router vuex模拟ios7
Framework7-VueJS ★38 - 使用移动框架的示例
cnode-vue ★37 - 基于vue和vue-router构建的cnodejs web网站SPA
vue-cli-multipage-bootstrap ★36 - 将vue官方在线示例整合到组件中
vue-cnode ★34 - 用 Vue 做的 CNode 官网
HyaReader ★30 - 移动友好的阅读器
zhihu-daily ★28 - 轻松查看知乎日报内容
seeMusic ★27 - 跨平台云音乐播放器
vue-cnode ★22 - 使用cNode社区提供的接口
zhihu-daily-vue ★20 - 知乎日报
sls-vuex2-demo ★20 - vuex2商城购物车demo
vue-dropload ★17 - 用以测试下拉加载与简单路由
vue-cnode-mobile ★17 - 搭建cnode社区
Vuejs-SalePlatform ★17 - vuejs搭建的售卖平台demo
v-notes ★17 - 简单美观的记事本
vue-starter ★16 - VueJs项目的简单启动页
vue-memo ★7 - 用 vue写的记事本应用 
#### UI组件

element ★9305 - 饿了么出品的Vue2的web UI工具套件
Vux ★6802 - 基于Vue和WeUI的组件库
mint-ui ★4776 - Vue 2的移动UI元素
iview ★4458 - 基于 Vuejs 的开源 UI 组件库
Keen-UI ★2363 - 轻量级的基本UI组件合集
vue-material ★2207 - 通过Vue Material和Vue 2建立精美的app应用
muse-ui ★1992 - 三端样式一致的响应式 UI 库
vuetify ★1678 - 为移动而生的Vue JS 2组件框架
vonic ★1494 - 快速构建移动端单页应用
eme ★1390 - 优雅的Markdown编辑器
vue-multiselect ★1166 - Vue.js选择框解决方案
vue-table ★824 - 简化数据表格
VueCircleMenu ★776 - 漂亮的vue圆环菜单
vue-chat ★748 - vuejs和vuex及webpack的聊天示例
radon-ui ★633 - 快速开发产品的Vue组件库
vue-waterfall ★605 - Vue.js的瀑布布局组件
vue-carbon ★595 - 基于 vue 开发MD风格的移动端
vue-beauty ★569 - 由vue和ant design创建的优美UI组件
vue-blu ★557 - 帮助你轻松创建web应用
vueAdmin ★556 - 基于vuejs2和element的简单的管理员模板
vue-syntax-highlight ★551 - Sublime Text语法高亮
vue-infinite-scroll ★524 - VueJS的无限滚动指令
Vue.Draggable ★493 - 实现拖放和视图模型数组同步
vue-awesome-swiper ★476 - vue.js触摸滑动组件
vue-calendar ★465 - 日期选择插件
bootstrap-vue ★458 - 应用于Vuejs2的Twitter的Bootstrap 4组件
vue-swipe ★361 - VueJS触摸滑块
vue-amap ★346 - 基于Vue 2和高德地图的地图组件
vue-chartjs ★333 - vue中的Chartjs的封装
vue-datepicker ★331 - 日历和日期选择组件
markcook ★318 - 好看的markdown编辑器
vue-google-maps ★287 - 带有双向数据绑定Google地图组件
vue-progressbar ★248 - vue轻量级进度条
vue-picture-input ★236 - 移动友好的图片文件输入组件
vue-infinite-loading ★224 - VueJS的无限滚动插件
vue-upload-component ★204 - Vuejs文件上传组件
vue-datetime-picker ★197 - 日期时间选择控件
vue-scroller ★196 - Vonic UI的功能性组件
vue2-calendar ★181 - 支持lunar和日期事件的日期选择器
vue-video-player ★178 - VueJS视频及直播播放器
vue-fullcalendar ★176 - 基于vue.js的全日历组件
rubik ★170 - 基于Vuejs2的开源 UI 组件库
VueStar ★169 - 带星星动画的vue点赞按钮
vue-mugen-scroll ★167 - 无限滚动组件
mint-loadmore ★167 - VueJS的双向下拉刷新组件
vue-tables-2 ★162 - 显示数据的bootstrap样式网格
vue-virtual-scroller ★158 - 带任意数目数据的顺畅的滚动
DataVisualization ★149 - 数据可视化
vue-quill-editor ★149 - 基于Quill适用于Vue2的富文本编辑器
Vueditor ★138 - 所见即所得的编辑器
vue-html5-editor ★132 - html5所见即所得编辑器
vue-msgbox ★127 - vuejs的消息框
vue-slider ★126 - vue 滑动组件
vue-core-image-upload ★124 - 轻量级的vue上传插件
vue-slide ★121 - vue轻量级滑动组件
vue-lazyload-img ★118 - 移动优化的vue图片懒加载插件
vue-drag-and-drop-list ★114 - 创建排序列表的Vue指令
vue-progressive-image ★107 - Vue的渐进图像加载插件
vuwe ★107 - 基于微信WeUI所开发的专用于Vue2的组件库
vue-dropzone ★105 - 用于文件上传的Vue组件
vue-charts ★101 - 轻松渲染一个图表
vue-swiper ★95 - 易于使用的滑块组件
vue-images ★93 - 显示一组图片的lightbox组件
vue-carousel-3d ★91 - VueJS的3D轮播组件
vue-region-picker ★89 - 选择**的省份市和地区
vue-typer ★89 - 模拟用户输入选择和删除文本的Vue组件
vue-impression ★88 - 移动Vuejs2 UI元素
vue-datatable ★87 - 使用Vuejs创建的DataTableView
vue-instant ★86 - 轻松创建自动提示的自定义搜索控件
vue-dragging ★86 - 使元素可以拖拽
vue-slider-component ★85 - 在vue1和vue2中使用滑块
vue2-loading-bar ★76 - 最简单的仿Youtube加载条视图
vue-datepicker ★75 - 漂亮的Vue日期选择器组件
vue-video ★70 - Vue.js的HTML5视频播放器
vue-toast-mobile ★68 - VueJS的toast插件
vue-image-crop-upload ★67 - vue图片剪裁上传组件
vue-tooltip ★66 - 带绑定信息提示的提示工具
vue-highcharts ★66 - HighCharts组件
vue-touch-ripple ★62 - vuejs的触摸ripple组件
coffeebreak ★61 - 实时编辑CSS组件工具
vue-datasource ★60 - 创建VueJS动态表格
vue2-timepicker ★60 - 下拉时间选择器
vue-date-picker ★59 - VueJS日期选择器组件
vue-scrollbar ★58 - 最简单的滚动区域组件
vue-quill ★56 - vue组件构建quill编辑器
vue-google-signin-button ★55 - 导入谷歌登录按钮
vue-svgicon ★53 - 创建svg图标组件的工具
vue-float-label ★49 - VueJS浮动标签模式
vue-baidu-map ★46 - 基于 Vue 2的百度地图组件库
vue-social-sharing ★45 - 社交分享组件
vue2-editor ★44 - HTML编辑器
vue-tagsinput ★41 - 基于VueJS的标签组件
vue-easy-slider ★41 - Vue 2.x的滑块组件
datepicker ★38 - 基于flatpickr的时间选择组件
vue-chart ★37 - 强大的高速的vue图表解析
vue-music-master ★37 - vue手机端网页音乐播放器
handsontable ★35 - 网页表格组件
vue-simplemde ★35 - VueJS的Markdown编辑器组件
vue-popup-mixin ★35 - 用于管理弹出框的遮盖层
cubeex ★33 - 包含一套完整的移动UI
vue-fullcalendar ★32 - vue FullCalendar封装
vue-material-design ★32 - Vue MD风格组件
vue-morris ★31 - Vuejs组件封装Morrisjs库
we-vue ★30 - Vue2及weui1开发的组件
vue-image-clip ★29 - 基于vue的图像剪辑组件
vue-bootstrap-table ★29 - 可排序可检索的表格
vue-radial-progress ★28 - Vue.js放射性进度条组件
vue-slick ★28 - 实现流畅轮播框的vue组件
vue-pull-to-refresh ★27 - Vue2的上拉下拉
vue-form-2 ★26 - 全面的HTML表单管理的解决方案
vue-side-nav ★26 - 响应式的侧边导航
mint-indicator ★26 - VueJS移动加载指示器插件
chartjs ★24 - Vue Bulma的chartjs组件
vue-scroll ★24 - vue滚动
vue-ripple ★24 - 制作谷歌MD风格涟漪效果的Vue组件
vue-touch-keyboard ★22 - VueJS虚拟键盘组件
vue-chartkick ★22 - VueJS一行代码实现优美图表
vue-ztree ★21 - 用 vue 写的树层级组件
vue-m-carousel ★20 - vue 移动端轮播组件
vue-datepicker-simple ★20 - 基于vue的日期选择器
vue-tabs ★20 - 多tab页轻型框架
vue-verify-pop ★19 - 带气泡提示的vue校验插件
vue-parallax ★15 - 整洁的视觉效果
vue-img-loader ★14 - 图片加载UI组件
vue-typewriter ★13 - vue组件类型
vue-smoothscroll ★12 - smoothscroll的VueJS版本
vue-city ★10 - 城市选择器
vue-tree ★10 - vue树视图组件
vue-ios-alertview ★8 - iOS7+ 风格的alertview服务
dd-vue-component ★7 - 订单来了的公共组件库
paco-ui-vue ★7 - PACOUI的vue组件
vue-cmap ★5 - Vue China map可视化组件
vue-button ★4 - Vue按钮组件 

开发框架

vue.js ★45466 - 流行的轻量高效的前端组件化方案
vue-admin ★3222 - Vue管理面板框架
electron-vue ★1273 - Electron及VueJS快速启动样板
vue-2.0-boilerplate ★241 - Vue2单页应用样板​
vue-spa-template ★223 - 前后端分离后的单页应用开发
Framework7-Vue ★210 - VueJS与Framework7结合
vue-bulma ★132 - 轻量级高性能MVVM Admin UI框架
vue-webgulp ★100 - 仿VueJS Vue loader示例
vue-element-starter ★34 - vue启动页 

实用库

vuex ★5997 - 专为 Vue.js 应用程序开发的状态管理模式
vuelidate ★750 - 简单轻量级的基于模块的Vue.js验证
qingcheng ★677 - qingcheng主题
vue-desktop ★461 - 创建管理面板网站的UI库
vue-meta ★257 - 管理app的meta信息
vue-axios ★209 - 将axios整合到VueJS的封装
vue-svg-icon ★116 - vue2的可变彩色svg图标方案
avoriaz ★110 - VueJS测试实用工具库
vue-framework7 ★83 - 结合VueJS使用的Framework7组件
vue-bootstrap-modal ★78 - vue的Bootstrap样式组件
vuep ★72 - 用实时编辑和预览来渲染Vue组件
vue-online ★67 - reactive的在线和离线组件
vue-lazy-render ★66 - 用于Vue组件的延迟渲染
vue-password-strength-meter ★65 - 交互式密码强度计
element-admin ★57 - 支持 vuecli 的 Element UI 的后台模板
vue-electron ★55 - 将选择的API封装到Vue对象中的插件
cleave ★55 - 基于cleave.js的Cleave组件
vue-events ★54 - 简化事件的VueJS插件
vue-shortkey ★53 - 应用于Vue.js的Vue-ShortKey 插件
vue-cordova ★50 - Cordova的VueJS插件
vue-router-transition ★49 - 页面过渡插件
vue-gesture ★48 - VueJS的手势事件插件
http-vue-loader ★46 - 从html及js环境加载vue文件
vue-qart ★46 - 用于qartjs的Vue2指令
vuemit ★44 - 处理VueJS事件
vue-websocket ★42 - VueJS的Websocket插件
vue-local-storage ★41 - 具有类型支持的Vuejs本地储存插件
lazy-vue ★41 - 懒加载图片
vue-bus ★36 - VueJS的事件总线
vue-reactive-storage ★35 - vue插件的Reactive层
vue-notifications ★32 - 非阻塞通知库
vue-lazy-component ★32 - 懒加载组件或者元素的Vue指令
v-media-query ★32 - vue中添加用于配合媒体查询的方法
vue-observe-visibility ★31 - 当元素在页面上可见或隐藏时检测
vue-ts-loader ★29 - 在Vue装载机检查脚本
vue-pagination-2 ★28 - 简单通用的分页组件
vuex-i18n ★26 - 定位插件
Vue.resize ★26 - 检测HTML调整大小事件的vue指令
vuex-shared-mutations ★25 - 分享某种Vuex mutations
vue-file-base64 ★16 - 将文件转换为Base64的vue组件
modal ★15 - Vue Bulma的modal组件
Famous-Vue ★15 - Famous库的vue组件
leo-vue-validator ★13 - 异步的表单验证组件
Vue-Easy-Validator ★11 - 简单的表单验证
vue-truncate-filter ★9 - 截断字符串的VueJS过滤器
vue-zoombox ★9 - 一个高级zoombox
vue-input-autosize ★5 - 基于内容自动调整文本输入的大小
vue-lazyloadImg ★3 - 图片懒加载插件 

服务端

nuxt.js ★2743 - 用于服务器渲染Vue app的最小化框架
express-vue ★137 - 简单的使用服务器端渲染vue.js
vue-ssr ★67 - 非常简单的VueJS服务器端渲染模板
vue-ssr ★56 - 结合Express使用Vue2服务端渲染
vue-easy-renderer ★22 - Nodejs服务端渲染 

#### 辅助工具

DejaVue ★543 - Vuejs可视化及压力测试
vue-play ★445 - 展示Vue组件的最小化框架
vscode-VueHelper ★185 - 目前vscode最好的vue代码提示插件
vue-generate-component ★39 - 轻松生成Vue js组件的CLI工具
vue-multipage-cli ★33 - 简单的多页CLI
VuejsStarterKit ★26 - vuejs starter套件 

应用实例

koel ★7175 - 基于网络的个人音频流媒体服务
pagekit ★4021 - 轻量级的CMS建站系统
vuedo ★1040 - 博客平台
jackblog-vue ★943 - 个人博客系统
vue-cnode ★597 - 重写vue版cnode社区
CMS-of-Blog ★405 - 博客内容管理器
rss-reader ★326 - 简单的rss阅读器
vue-ghpages-blog ★208 - 依赖GitHub Pages无需本地生成的静态博客
swoole-vue-webim ★97 - Web版的聊天应用
vue-dashing-js ★70 - nuvo-dashing-js的fork
fewords ★52 - 功能极其简单的笔记本
vue-blog ★33 - 使用Vue2.0 和Vuex的vue-blog 

Demo示例

Vue-cnodejs ★2113 - 基于vue重写Cnodejs.org的webapp
NeteaseCloudWebApp ★1154 - 高仿网易云音乐的webapp
vue-zhihu-daily ★875 - 知乎日报 with Vuejs
vue-wechat ★732 - vue.js开发微信app界面
vue2-demo ★699 - 从零构建vue2 + vue-router + vuex 开发环境
eleme ★612 - 高仿饿了么app商家详情
vue-demo ★575 - vue简易留言板
maizuo ★498 - vue/vuex/redux仿卖座网
spa-starter-kit ★489 - 单页应用启动套件
vue-music ★485 - Vue 音乐搜索播放
douban ★402 - 模仿豆瓣前端
vue-Meizi ★394 - vue最新实战项目
zhihudaily-vue ★386 - 知乎日报web版
vue-demo-kugou ★310 - vuejs仿写酷狗音乐webapp
VueDemo_Sell_Eleme ★307 - Vue2高仿饿了么外卖平台
vue2.0-taopiaopiao ★246 - vue2.0与express构建淘票票页面
vue-leancloud-blog ★239 - 一个前后端完全分离的单页应用
node-vue-server-webpack ★239 - Node.js+Vue.js+webpack快速开发框架
mi-by-vue ★222 - VueJS仿小米官网
vue-fis3 ★199 - 流行开源工具集成demo
vue2.x-douban ★188 - Vue2实现简易豆瓣电影webApp
vue-demo-maizuo ★188 - 使用Vue2全家桶仿制卖座电影
vue-zhihudaily ★169 - 知乎日报 Web 版本
vue-adminLte-vue-router ★162 - vue和adminLte整合应用
vue-axios-github ★157 - 登录拦截登出功能
Zhihu-Daily-Vue.js ★134 - Vuejs单页网页应用
hello-vue-django ★113 - 使用带有Django的vuejs的样板项目
vue-cnode ★101 - vue单页应用demo
x-blog ★100 - 开源的个人blog项目
vue-express-mongodb ★96 - 简单的前后端分离案例
websocket_chat ★91 - 基于vue和websocket的多人在线聊天室
photoShare ★85 - 基于图片分享的社交平台
vue-zhihudaily-2.0 ★81 - 使用Vue2.0+vue-router+vuex创建的zhihudaily
notepad ★77 - 本地存储的记事本
vueBlog ★75 - 前后端分离博客
vue-ruby-china ★70 - VueJS框架搭建的rubychina平台
Zhihu_Daily ★70 - 基于Vue和Nodejs的Web单页应用
vue-koa-demo ★60 - 使用Vue2和Koa1的全栈demo
vue2.x-Cnode ★50 - 基于vue全家桶的Cnode社区
life-app-vue ★49 - 使用vue2完成多功能集合到小webapp
github-explorer ★49 - 寻找最有趣的GitHub库
vue-trip ★48 - vue2做的出行webapp
vue-ssr-boilerplate ★47 - 精简版的ofvue-hackernews-2
vue-bushishiren ★45 - 不是诗人应用
houtai ★44 - 基于vue和Element的后台管理系统
ios7-vue ★38 - 使用vue2.0 vue-router vuex模拟ios7
Framework7-VueJS ★38 - 使用移动框架的示例
cnode-vue ★37 - 基于vue和vue-router构建的cnodejs web网站SPA
vue-cli-multipage-bootstrap ★36 - 将vue官方在线示例整合到组件中
vue-cnode ★34 - 用 Vue 做的 CNode 官网
HyaReader ★30 - 移动友好的阅读器
zhihu-daily ★28 - 轻松查看知乎日报内容
seeMusic ★27 - 跨平台云音乐播放器
vue-cnode ★22 - 使用cNode社区提供的接口
zhihu-daily-vue ★20 - 知乎日报
sls-vuex2-demo ★20 - vuex2商城购物车demo
vue-dropload ★17 - 用以测试下拉加载与简单路由
vue-cnode-mobile ★17 - 搭建cnode社区
Vuejs-SalePlatform ★17 - vuejs搭建的售卖平台demo
v-notes ★17 - 简单美观的记事本
vue-starter ★16 - VueJs项目的简单启动页
vue-memo ★7 - 用 vue写的记事本应用 

最近对前端算法分析比较感兴趣的话,估计你不会错过这些。

第一部分

第二部分

第三部分

第四部分

第五部分

希望你收藏,慢慢看,别急;
算法好,还是比较有用的。

关于CSS3动画机制原理思考和探索

前言

除了一直以来都是JavaScript来处理动画。基本都是通过改变CSS的位置特性来实现动画效果。

对于大部分上AB站的同学们,知道AB站点的弹幕是使用了视频 flash 来实现的。没有使用到前端知识来处理。

而且在gihub上会看到ABPlayerHTML5,一个可扩展的弹幕播放器的HTML5实现。

还有个库CommentCoreLibrary,JS弹幕模块核心,提供从基本骨架到高级弹幕的支持。

  • CSS3.0的属性
  • JavaScript控制布局
  • 启动硬件加速
  • 元素:SVG、Canvas

而现在很多关于动画除了CSS3.0动画之外就是借用了canvas 这个壳来处理动画效果。
很多市面上的库和插件,比如three.js....

CSS 3.0 的出现

transition 与 animation

动画事件

动画性能问题

3D动画

Vue2 玩耍过程中碰到的问题 - 收藏

  • VueJS 开发常见问题集锦
    由于公司的前端开始转向 VueJS,最近开始使用这个框架进行开发,遇到一些问题记录下来,以备后用。 主要写一些 官方手册 上没有写,但是实际开发中会遇到的问题,需要一定知识基础。

  • Vue1.x 迁移 Vue2.x 实战
    本篇文章记录了完整的前端 Vue1.x 项目迁移至 Vue2.x 的步骤和遇到的问题。并且在迁移的过程也对Vue进行进一步学习。

【超值】掘金官方-有关Vue.js的收藏夹大全

虽然是大概3个月前的掘金官方收集的,但是里面的东西足够我们玩大半年了。
虽然是大概3个月前的掘金官方收集的,但是里面的东西足够我们玩大半年了。
虽然是大概3个月前的掘金官方收集的,但是里面的东西足够我们玩大半年了。

vue(1) - 收藏集 - 掘金

…… stunning ... 『收藏』VUE 优秀 UI 组件库合集 - 前端 - 掘金github 开源的 Vue 优秀 UI 组件库合集✔... Vue音乐播放器2.0升级版来了 - 掘金Vue.js音乐播放……CNode社区 Vue.js打造一个开源的CNode社区,实现了浏览、发帖、收藏、回复、点赞、个人中心等等功能。 源代码 源代码地址:👉 https://github.com/microzz/vue…… 如果这个简单的项目能给您带来帮助请给小哥哥⭐Star好不好(手动笔芯)。 功能 根据分享出来的文章I... 『收藏』VUE 优秀 UI 组件库合集 - 前端 - 掘金github 开源的 Vue……

vue(2) - 收藏集 - 掘金

……需要... 『收藏』VUE 优秀 UI 组件库合集 - 前端 - 掘金github 开源的 Vue 优秀 UI 组件库合集✔... 史上最详细VUE2.0全套demo讲解 基础2(列表渲染) - 掘金……管理系统 - 前端 - 掘金Vue Management System ... 『收藏』VUE 优秀 UI 组件库合集 - 前端 - 掘金github 开源的 Vue 优秀 UI 组件库合集……/BUPT-HJM/vue-blo... 『收藏』VUE 优秀 UI 组件库合集 - 前端 - 掘金github 开源的 Vue 优秀 UI 组件库合集✔... Vue2.0进阶组件篇1 教你秒撸(短信倒……

vue(3) - 收藏集 - 掘金

……vue2.0的过渡系统的用法搞清楚,因为之前确实踩了不少坑。这里只涉及单元素/组件的过渡实现,vue2.0的文档中还讲到了初始渲染的过渡... Vue.js 全家桶高还原网易云音乐 (Windows PC…… 版) - 前端 - 掘金项目地址 由于网易云的api限制,部分功能可能会失效,如有需要可以clone项目下来在本地运行,如果api炸了,... Vue 组件开发实践之 scopedSlot 的传递…… - 前端 - 掘金导语 现今的前端开发都讲究模块化组件化,即把公共的交互和功能封装到一个个的组件之中,在开发整体界面的时候就能像搭积木一样快速清晰高效。在使用Vue开发我们的vhtml-ui的组件库的……

vue(4) - 收藏集 - 掘金

……关于一些Vue的文章。(3) - 掘金原文链接我的blog,欢迎STAR。 这次和想要大家分享的一篇文章解析Vue diff 算法 在上篇里,我们提到在渲染时,render>template>el……,但是最终,我们得到的都是render函数,那么render函数的作用是什么?接下来该干... vue-bel-table: 更优雅地使用 element ui 的 table 组件 - 前端 - 掘金……Description A vue table component that base on element ui.Just for using el-table component more……

vue(5) - 收藏集 - 掘金

……-bar vue编写的移动端筛选条组件。 Introduction 利用... 『收藏』VUE 优秀 UI 组件库合集 - 前端 - 掘金github 开源的 Vue 优秀 UI 组件库合集…… Vue 的时候,别人给我安利了一个国外的小案例,通过 Vue 和 Vuex 来实现一个记事本。 仔细剖析下,发现“麻雀虽小,五脏俱全”,是一个挺适合初学者学习分... 『收藏』VUE 优秀 UI 组件……作者 混元霹雳手-Ziksang 如果你学完这篇文章之后,你回答完面试官之后,拿一张图告诉面试官 在于前端面试,你给面试官讲一些官方名词,我知道react,vue,angular等等,一系列牛B的框架……

vue(6) - 收藏集 - 掘金

……完整的项目还是有很大差别的。于是自己想着用空余的时间写一个项目,选择了饿了么也只是因为... 『收藏』VUE 优秀 UI 组件库合集 - 前端 - 掘金github 开源的 Vue 优秀 UI 组件库……低仿饿了么 H5 - 纯前端 Vue 版 + 手把手教学 - 前端 - 掘金低仿饿了么H5-纯前端Vue版+手把手教学 这是一个低仿饿了么H5的纯前端练手,数据是伪造的,写的比较粗糙,写这个的目的……是为了加深一下熟练度,半年前看到别人写的仿cnodejs网站,我也用vue1仿了cnodeJs的网站,当时写的也是粗糙的令人发指,在线预览:... vue 仿 PC 端 163music 图片滚动组件……

vue(7) - 收藏集 - 掘金

…… System ... 『收藏』VUE 优秀 UI 组件库合集 - 前端 - 掘金github 开源的 Vue 优秀 UI 组件库合集✔... 使用 Vue2 和 Yii2 进行前后端分离开发 - 工具资源…… - 掘金Vue.js打造一个开源的CNode社区 Vue.js打造一个开源的CNode社区,实现了浏览、发帖、收藏、回复、点赞、个人中心等等功能。 源代码 源代码地址:👉 https…… vm.$mount()。在这篇,我们深入底层,了解原理。 老规矩,我们先分享一篇文章 Vue.js 源码学习笔记。 这篇文章里反... 『收藏』VUE 优秀 UI 组件库合集 - 前端 - 掘金……

vue(8) - 收藏集 - 掘金

……2017 百度前端技术学院——vue 源码分析之动态数据绑定一 - 前端 - 掘金一、Object.keys() Object.keys()方法会返回一个由给定对象的所有可枚举自身属性的属性名组成的……数组,数组中属性名的排列顺序和使用(for in)循环遍历该对象时返回的顺序一致 (顺序一致不包括数字属性)(两... [Vue 2] 新版本探究之 performance 相关 - 掘金作者:滴滴……公共前端 小春 前言: 最近各大前端技术周刊或者关注使用 Vue 的同学都在讨论前几天又出新版了 v2.2.1。 在此我们调研一下,各位同学现在用 Vue 2.* 一般是哪个版本呢?可以给我们留言哦……

vue(9) - 收藏集 - 掘金

……渲染编辑 Vue 组件代码并预览的组件... 『收藏』VUE 优秀 UI 组件库合集 - 前端 - 掘金github 开源的 Vue 优秀 UI 组件库合集✔... Vue 核心之数据劫持 - 前端……Vue.js 自定义指令的用法与实例 - 前端 - 掘金市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用。本文不讲语法,就讲……自定义指令的用法。 自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动。... Vue中你不知道但却很实用的黑科技 - 掘金本文纯技术干货,首发于 掘金,转载……

vue UI组件库和组件 - 收藏集 - 掘金

……... 『收藏』VUE 优秀 UI 组件库合集 - 前端 - 掘金github 开源的 Vue 优秀 UI 组件库合集✔... vue 2.2 API 在线手册 - 前端 - 掘金vue 2.2……写个 vue-loading-template 组件 - 掘金趁着5.1来临之际,告诉你们一个好消息: demo: https://jkchao.github.io/vue-loading/ 源码……(star ? start : start):https://github.com/jkchao/vue-loading 组... Vue.js 插件开发 - 前端 - 掘金作者:Joshua……

vue.js - 收藏集 - 掘金

……手摸手,带你用vue撸后台 系列一 - 掘金项目地址 前言 说好的教程终于来了,第一篇文章主要来说一说在开始写业务代码前的一些准备工作吧,但这里不会教你webpack的基础配置,热更新怎么做……,webpack速度优化等等,有需求的请自行google。 目录结构 ├── build ... vue 全家桶 SPA 前后分离的图文多人 blog 系统 - 前端 - 掘金fanpian this is…… for learning vuejs ... Vue.js 一个超长列表无限滚动加载的解决方案 - 前端 - 掘金在线DEMO 序 众所周知,列表滚动加载这种需求很常见,特别是在移动webapp上……

vue2 - 收藏集 - 掘金

……阿里面试的机会都没有,但是我感受到了一次面试10年阿里的前端开发,让我感觉一个字,比吃老坛酸菜还爽!虽然有答对... 『收藏』VUE 优秀 UI 组件库合集 - 前端 - 掘金github 开源的…… Vue 优秀 UI 组件库合集✔... Vue音乐播放器2.0升级版来了 - 掘金Vue.js音乐播放器2.0 之前初学Vue做了一个音乐播放器,受到不少人的喜欢。现在升级版来了!功能更强,技术栈更多……:Vue2.0、Vuex、vue-router、axios、SASS(SCSS)、Express(上线版本是Koa2)、Webpack、ES6... Vue2.0 探索之路——vuex 入门教程和思考……

Vue实例 - 收藏集 - 掘金

……Vue.js 全家桶高还原网易云音乐 (Windows PC 版) - 前端 - 掘金项目地址 由于网易云的api限制,部分功能可能会失效,如有需要可以clone项目下来在本地运行,如果api炸了……Vue 2.0高仿 今日头条 单页应用——vue-toutiao - 掘金vue-toutiao 这是用 vue.js 2.0 高仿 今日头条 的移动端项目,结合了原生app的部分功能以及网页版。 前言…… 本人是 今日头条 的重度用户,在学习vue.js过程中,在GitHub上看到了很多高仿webapp的好项目。由此在有了一定的技术... vue2+element 管理后台 集成解决方案 没有没做的……

优质的 Vue 开源项目 - 收藏集 - 掘金

……vue 2.2 API 在线手册 - 前端 - 掘金 vue 2.2 API 在线手册,一点就一个 iframe 很方便,直入主题,不废话;... Muse-UI 2.0 发布 - 前端 - 掘金……less文件,所有的颜色都有一个变量维护,通过编写 le... unvue: 基于 Vue 的同构渲染框架 - 前端 - 掘金 unopinionated, universal Vue.js app…… made simple Introduction ... 一只基于 Vue2.x 的移动端 & 微信 UI。 -YDUI Touch - 前端 - 掘金 Vue-ydui 是 YDUI Touch 的……

vue小集 - 收藏集 - 掘金

……Vue音乐播放器2.0升级版来了 - 掘金Vue.js音乐播放器2.0 之前初学Vue做了一个音乐播放器,受到不少人的喜欢。现在升级版来了!功能更强,技术栈更多:Vue2.0、Vuex、vue……-router、axios、SASS(SCSS)、Express(上线版本是Koa2)、Webpack、ES6... Vue 服务端渲染和 Vue 浏览器端渲染性能对比 - 前端 - 掘金Vue 2.0…… 开始支持服务端渲染的功能,所以本文章也是基于 Vue 2.0 以上版本。网上对于服务端渲染的资料还是比较少,最经典的莫过于 Vue 作者尤雨溪大神的 Vue-hacker-news。本人在公司做 Vue……

vue 学习 - 收藏集 - 掘金

……提高 webpack 构建 Vue 项目的速度 - 掘金前言 最近有人给我的 Vue2 后台管理系统解决方案 提了 issue ,说执行 npm run build 构建项目的时候极其慢,然后就引起……都已经使用了图片滚动... 用 Vue 实现一个全选指令 - 前端 - 掘金最近用vue做了两个项目,都需要实现全选反选的功能,两个项目用了两种实现方法,第一个项目用vue的computed,第二……个项目用指令来实现,用起来,发觉指令更加方便。 第一次做全选的时候是刚开始接触vue不久,全选的实现参考了知乎(链接:https://www... 用 vue 实现模态框组件 - 前端 - 掘金基本上每个……

vue+node - 收藏集 - 掘金

……vue2+element 管理后台 集成解决方案 没有没做的,只要想不到的 - 前端 - 掘金线上地址 前言 这半年来一直在用vue写管理后台,目前后台已经有七十多个页面,十几种权限,但维护成本依然……很低,效率依然很高,所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+elemen... 手摸手,带你用vue撸后台 系列一 - 掘金项目地址 前言 说好的教程终于来了,第一…… ... Vue.js 插件开发详解 - 掘金前言 随着 Vue.js 越来越火,Vue.js 的相关插件也在不断的被贡献出来,数不胜数。比如官方推荐的 vue-router、vuex 等,都是非常优秀的插件……

vue库 - 收藏集 - 掘金

……vue2+element 管理后台 集成解决方案 没有没做的,只要想不到的 - 前端 - 掘金线上地址 前言 这半年来一直在用vue写管理后台,目前后台已经有七十多个页面,十几种权限,但维护成本依然……很低,效率依然很高,所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+elemen... 单页应用 - Token 验证 - 掘金第一次接触单页应用,记录公司项目关于Token……(这又是另外一个悲伤的故事🙊……),有时间来研究一下热更新技术,绕过 Apple 的审核。 热更新现在大热的两个方案是 React N... Yet Another Vue Boilerplate……

关于Object.defineProperty的一些整理

开始

整理 ECMAScript5 的 Object.defineProperty() 的一些资料,因为它确实很神奇;实在是很有意思。

MDN 的解释:Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象。

而JavaScript中的对象定义有三种类型的属性:私有属性、实例属性和类属性,与Java类似,私有属性只能在对象内部使用,实例属性必须通过对象的实例进行引用,而类属性可以直接通过类名进行引用。

注意:JavaScript中没有类的概念,只有对象。

在对于定义一个对象的属性,我们知道已经有好几种方式:

  • 1、基于已有对象扩充其属性和方法
  • 2、工厂方式
  • 3、构造函数方式
  • 4、原型(“prototype”)方式
  • 5、动态原型方式

Object.defineProperty()有以下可选键值:

configurable
当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,也能够被删除。默认为 false。
enumerable
当且仅当该属性的 enumerable 为 true 时,该属性才能够出现在对象的枚举属性中。默认为 false。
数据描述符同时具有以下可选键值:

value
该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined。
writable
当且仅当该属性的 writable 为 true 时,该属性才能被赋值运算符改变。默认为 false。
存取描述符同时具有以下可选键值:

get
一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined。
set
一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认为 undefined。

在ECMAScript 3标准中,上面三个属性的值均为true且不可改:新建对象的property是可写的、可被枚举的、可删除的;而在ECMAScript 5标准中,可通过property的描述对象(property descriptor)来对这些属性进行配置和修改。

如果将property的值信息也作为property的属性来看的话,对象中的property拥有四个属性:value、writable、enumerable和configurable。

对于用getter和setter方法来定义的property,由于其没有writable属性(property是否可写取决于setter方法是否存在),因此这种property也有四个属性:get、set、enumerable和configurable — get和set属性的值为function。

Vue vs React: Javascript 框架之战 - (转)

英文:Peter Tasker 译文:众成翻译
www.zcfy.cc/article/vue-vs-react-battle-of-the-javascript-frameworks-3310.html

本文详细的介绍了vue.js和react.js的能力;
vue.js更灵活,能够更好的结合当前的项目,进行升级优化;
而react.js是由facebook团队创建开发及维护,跟vue有很多契合的地方,比如都注重显示层,都使用Virtual DOM,而react.js与vue.js区别在于模板 vs JSX、状态管理 vs 对象属性、React Native能在手机上创建原生应用;

几个值得收藏的国外有关Vue.js网站

原文出处:https://segmentfault.com/a/1190000010922063

鄙人瞎逛瞎搞,轻轻地收藏几个有关Vue.js的网站;
这暂且不是最好的也不是最全的网站采集处。
往后会慢慢健全起来的 ^o^ (^-^) (^o^) 。

想了解更多 戳我试试 (´^ิ∀^ิ`) (๑˜้ีз˜้ี) (((΄◞ิ(΄◞ิ(΄◞ิ౪◟ิ‘)◟ิ‘)◟ิ‘)))

一、Vue.js Weekly news!

戳我带飞

Vue.js Newsletter: Weekly dose of handpicked Vue.js news!

二、vuejsdevelopers

戳我带飞

Vue.js Developers is a community of web developers passionate about learning and building with VueJS. Check out our articles or join the discussion to keep up-to-date with everything Vue!

Vue.js Developers是一个热衷于学习和构建VueJS的web开发人员社区。

作者:Anthony Gore

三、vuejsfeed

戳我带飞

最新的Vue.js新闻、教程、插件等等

四、vuecomponents

戳我带飞

Vue.js组件集合社区

五、madewithvuejs

戳我带飞

收藏了用Vue.js实现的网站

六、vuejsexamples

戳我带飞

Vue.js的Demo满满的
Vue.js的Demo满满的
Vue.js的Demo满满的

重要的话说三遍


想了解更多 戳我试试 (´^ิ∀^ิ`) (๑˜้ีз˜้ี) (((΄◞ิ(΄◞ิ(΄◞ิ౪◟ิ‘)◟ิ‘)◟ิ‘)))

后续会继续更新...
如果大家有哪些更好的网站
望送出助攻

Vue 开源项目库汇总(转)

最近做了一个Vue开源项目库汇总,里面集合了OpenDigg 上的优质的Vue开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star。

地址:https://github.com/opendigg/awesome-github-vue

awesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库集合。我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们。

如果收录的项目有错误,可以通过issue反馈给我们。这里的项目Star数不是实时更新的,一般是一周更新一次。

前端知识点, 总有一款《学会总结》适合你 —— 2019.4~2019.6

关于Vue2.0的过渡效果与过渡状态--列表过渡

前言

在上一篇过渡效果 #2 里面,基本是提到了简单的,单个的组件的动画效果;Vue2.0上的列表过渡说的很清楚,只不过去理清楚之外肯定会思考例子和自己实践中得到不一样的知识。

列表过渡

目前为止,关于过渡我们已经讲到:

  • 单个节点

  • 一次渲染多个节点
    那么怎么同时渲染整个列表,比如使用 v-for ?在这种场景中,使用 <transition-group> 组件。在我们深入例子之前,先了解关于这个组件的几个特点:

  • 不同于 <transition>, 它会以一个真实元素呈现:默认为一个 <span>。你也可以通过 tag 特性更换为其他元素。

  • 元素 一定需要 指定唯一的 key 特性值

列表的进入和离开过渡

<div id="list-demo" class="demo">
  <button v-on:click="add">Add</button>
  <button v-on:click="remove">Remove</button>
  <transition-group name="list" tag="p">
    <span v-for="item in items" v-bind:key="item" class="list-item">
      {{ item }}
    </span>
  </transition-group>
</div>

这个例子有个问题,当添加和移除元素的时候,周围的元素会瞬间移动到他们的新布局的位置,而不是平滑的过渡,我们下面会解决这个问题。

列表的位移过渡

<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画,还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性,它会在元素的改变定位的过程中应用。像之前的类名一样,可以通过 name 属性来自定义前缀,也可以通过 move-class 属性手动设置。

.flip-list-move {
  transition: transform 1s;
}

看上面这两家结合案例

官方装逼:

这个看起来很神奇,内部的实现,Vue 使用了一个叫 FLIP 简单的动画队列使用 transforms 将元素从之前的位置平滑过渡新的位置。我们将之前实现的例子和这个技术结合,使我们列表的一切变动都会有动画过渡。

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<div id="list-complete-demo" class="demo">
  <button v-on:click="shuffle">Shuffle</button>
  <button v-on:click="add">Add</button>
  <button v-on:click="remove">Remove</button>
  <transition-group name="list-complete" tag="p">
    <span
      v-for="item in items"
      v-bind:key="item"
      class="list-complete-item"
    >
      {{ item }}
    </span>
  </transition-group>
</div>
.list-complete-item {
  transition: all 1s;
  display: inline-block;
  margin-right: 10px;
}
.list-complete-enter, .list-complete-leave-active {
  opacity: 0;
  transform: translateY(30px);
}
.list-complete-leave-active {
  position: absolute;
}
new Vue({
  el: '#list-complete-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9],
    nextNum: 10
  },
  methods: {
    randomIndex: function () {
      return Math.floor(Math.random() * this.items.length)
    },
    add: function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },
    remove: function () {
      this.items.splice(this.randomIndex(), 1)
    },
    shuffle: function () {
      this.items = _.shuffle(this.items)
    }
  }
})

就会发现其实啥也没弄,就是控制了CSS的类的加载和处理CSS3.0的动画的和位置。

需要注意的是使用 FLIP 过渡的元素不能设置为 display: inline 。作为替代方案,可以设置为 display: inline-block 或者放置于 flex 中。

延伸到案例中

第一个就是多维度的排列和连连看啊,队列里面的动画,再次就是匹配不匹配中来的动画。
就是所谓的有增删移动的东西都可以考虑这样的使用。

结合之前的动画的绑定中去处理。

可复用的过渡

动态过渡

三个库

到目前为止,看到使用了三个外库:

animate
velocity
lodash

Vue 2.4.0 正式发布,服务器端渲染+异步组件

Vue 2.4.0 正式发布了,Vue 是一款轻量级 JavaScript MVVM框架。

"Fear is freedom! Subjugation is liberation! Contradiction is truth!"
"恐惧就是自由!征服就是解放!矛盾就是真理!"

新版了带来一些改进和 bug 修复,具体如下:

更新:

  • Full SSR + async component support in core: SSR now supports rendering async components used anywhere and the client also supports async components during the hydration phase. This means async components / code-splitting now just works during SSR and is no longer limited at the route level. (9cf6646 & 7404091)

  • Easier creation of wrapper components: (6118759)

    • New component option: inheritAttrs. Turns off the default behavior where
      parent scope non-prop bindings are automatically inherited on component root
      as attributes.
    • New instance properties: $attrs & $listeners. $attrs contains the parent-scope attribute bindings that were not recognized as props, and $listeners contains the v-on listeners registered in the parent scope (without the .native modifier). These are essentially aliases of $vnode.data.attrs and $vnode.data.on, but are reactive.
    • Combining these allows us to simplify a component like this down into this:
      <div>
       <input v-bind="$attrs" v-on="$listeners">
      </div> 
      
    • Based on discussion in #5983.
  • v-on: support v-on object syntax with no arguments. This pairs well with the new $listeners instance property when creating higher-order components. Note this syntax does not support modifiers. (11614d6)

  • Now auto-resolves ES module default export when resolving async components. This enables keeping using the simpler const Foo = () => import('./Foo.vue') syntax when declaring async components with the changes introduced in [email protected]. (0cd6ef3)

  • support .sync modifier for v-bind="object" (#5943) (3965e50), closes #5937

  • keep-alive: support Array for include and exclude (#5956) (51c595a)

  • weex: implement "weex.supports" api to support feature detection (#6053) (b1512d8)

  • vm.$watch now also supports using the same object format supported by the watch component option: { handler: () => {}, deep: true } (#5645) (5aac170)

  • types: add types for vue-server-renderer (#5775) (e6de9a5)

  • Vue.config.errorHandler now also captures errors thrown in custom event handlers (#5709) (11b7d5d)

  • add new config option Vue.config.warnHandler for defining a custom callback for runtime warnings. This only works in the development build. (#5883) (9881b40)

  • add comments option to allow preserving comments in template (#5951) (e4da249), closes #5392

性能改进:

  • ssr: vue-template-compiler now has two new SSR-specific compile methods that generates SSR-specific render function code by optimizing parts of the template into string concatenation. This improves raw SSR render performance by 2~8x depending on how much of the template can be optimized. Note this will have a much smaller impact on requests per second for a real app because raw render performance is only a small portion of the overall time spent in a request.
  • This is enabled by default in vue-loader@>=12 and can be disabled using the optimizeSSR option.
  • remove src directory from npm module, which should reduce download size when installing from npm. (#6072) (e761573)

官方为 Vue 创建了一个全新的服务器端渲染指南,建议所有使用者阅读。此外,还更新了 HackerNews 的 Demo,以反映最新的最佳做法。

Bug 修复:

  • check enterToClass/leaveToClass existence before adding it (#5912) (34d8c79)
  • ensure cleanup in watcher.get (#5988) (f6cd44c), closes #5975
  • improve Vue.set/Vue.delete API to support multi type of array index (#5973) (eea0920)
  • multiple merged vnode hooks not invoked properly (91deb4f), closes #6076
  • prefetch should not have as attribute (#5683) (ebca266)
  • core: add merge strategy for provide option (#6025) (306997e), closes #6008
  • support plugin with multi version vue (#5985) (049f317), closes #5970
  • core: should preserve reactivity-ness of injected objects (8d66691), closes #5913
  • parser: the first newline following pre and textarea tag should be ignored (#6022) (4d68079)
  • ref: refactor function registerRef (#6039) (254d85c), closes #5997
  • ssr: fix bundleRenderer mapped async chunks caching check (#5963) (de42186)
  • ssr: reference error when create $ssrContext for root component (#5981) (5581654), closes #5941
  • transition group should work with dynamic name (#6006) (#6019) (d8d4ca6)
  • v-model: fix input change check for type="number" (0a9aab5), closes #6069
  • v-model: use consistent behavior during IME composition for other text-like input types (fix #5902) (4acc8c8)
  • v-bind object should not override props on scopedSlots (#5995) (458030a)
  • fix out-in transition for async components (#5760) (c3cdfcf)
  • fix memory leak by preventing data.pendingInsert from keeping reference to removed nodes (#5839) (4733408)
  • reduce memory usage by avoiding keeping reference to old vdom tree after patch (#5851) (07a3726)
  • fix XHTML compatibility (#5852) (69f946b)
  • Merge inject option when extending a component (#5827) (080c387)
  • support string index when using Vue.set on Array (#5889) (8a2c514)
  • ignore reserved attributes (is, ref, ...) in v-bind object syntax (#5881) (d33c125)
  • fix slot resolved incorrect with abstract component (#5888) (213f136)

更新内容较多,详情请参阅发布说明:https://github.com/vuejs/vue/releases/tag/v2.4.0

关于Vue2.0的过渡效果与过渡状态

前言

因为是MVVM模式,加上又是单页面应用,会考虑到页面的切换过渡效果和各种组件、控件、插件的界面动态切换效果。固然就会在这一块加入概念和处理方式。

大概的处理方式就是:

  • CSS3.0的动画
  • JavaScript的处理

看一下官方过渡效果

通过 Vue 2.0 的过渡系统, 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。
包括以下工具:

  • CSS 过渡和动画中自动应用 class
  • 可以配合使用第三方 CSS 动画库,如 Animate.css
  • 在过渡钩子函数中使用 JavaScript 直接操作 DOM
  • 可以配合使用第三方 JavaScript 动画库,如 Velocity.js
  • 在这里,我们只会讲到进入、离开和列表的过渡, 你也可以看下一节的 管理过渡状态.

单元素/组件的过渡

贴个例子:

<div id="demo">
  <button v-on:click="show = !show">
    点击我切换(Toggle)
  </button>
  <transition name="fade">
    <p v-if="show">我就是个动画</p>
  </transition>
</div>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}
new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

在上面的案例,会发现:有个 transition 的封装元素,而且还会发生CSS的类的命名格式。

Vue 2.0 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加 entering/leaving 过渡

  • 条件渲染 (使用 v-if
  • 条件展示 (使用 v-show
  • 循环语句 (使用 v-for;只在插入和删除时触发,使用 vue-animated-list 插件)
  • 动态组件 (数据驱动组件过渡)
  • 组件根节点 (组件的根节点上,并且被 Vue2.0 实例 DOM 方法(如 vm.$appendTo(el))触发。)

在 transition 的封装元素里有个name属性并赋了值 fade ;上面说得很明白了,可以给任何元素和组件添加 entering/leaving 过渡。这个时候去瞄一下CSS的类命名就完全明白了。

本来这里作者是想封装个基本动画的;最后是没必要的,所以需要自己添加,也可以引入动画库和插件。

这里应该还涉及到 transition 的封装组件的状态和处理机制,这才是好玩的东西,也是个重点。下面讲到,点击我吧。

我们先来看一段Vue2.0源码:

// 这是切换CSS的类命名
var autoCssTransition = cached(function (name) {
  return {
    enterClass: (name + "-enter"),
    leaveClass: (name + "-leave"),
    appearClass: (name + "-enter"),
    enterActiveClass: (name + "-enter-active"),
    leaveActiveClass: (name + "-leave-active"),
    appearActiveClass: (name + "-enter-active")
  }
});
  // 开始 enter 的 transition 
  beforeEnterHook && beforeEnterHook(el);
  if (expectsCSS) {
    addTransitionClass(el, startClass);
    addTransitionClass(el, activeClass);
    nextFrame(function () {
      removeTransitionClass(el, startClass);
      if (!cb.cancelled && !userWantsControl) {
        whenTransitionEnds(el, type, cb);
      }
    });
  }
 // 触发 leave 的 transition 
  if (expectsCSS) {
      addTransitionClass(el, leaveClass);
      addTransitionClass(el, leaveActiveClass);
      nextFrame(function () {
        removeTransitionClass(el, leaveClass);
        if (!cb.cancelled && !userWantsControl) {
          whenTransitionEnds(el, type, cb);
        }
      });
    }

从上面看出来添加了startClass接着就是删除了它,初始化元素的状态并集合 transition 的封装组件的状态和处理机制。

看官方解析:

元素封装成过渡组件之后,在遇到插入或删除时,Vue 2.0 将

  • 自动嗅探目标元素是否有 CSS 过渡或动画,并在合适时添加/删除 CSS 类名。
  • 如果过渡组件设置了过渡的 JavaScript 钩子函数,会在相应的阶段调用钩子函数。
  • 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画,DOM 操作(插入/删除)在下一帧中立即执行。(注意:此指浏览器逐帧动画机制,与 Vue 2.0,和 Vue 2.0 的 nextTick 概念不同)

过渡的-CSS-类名

会有 4 个(CSS)类名在 enter/leave 的过渡中切换

  • v-enter: 定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。
  • v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效,在 transition/animation 完成之后移除。
  • v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。
  • v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效,在 transition/animation完成之后移除。

transition

对于这些在 enter/leave 过渡中切换的类名,v- 是这些类名的前缀。使用 <name="my-transition>" 可以重置前缀,比如 v-enter 替换为 my-transition-enter

v-enter-activev-leave-active 可以控制 进入/离开 过渡的不同阶段,在下面章节会有个示例说明。

不过看起来是很复杂的,我就简单说上几句:

  • v-enter: 就是元素插入时的初始化状态,自己爱咋样定义就咋样定义,不过在下一个帧移除。
  • v-enter-active: 就是和v-enter在下一行代码插入的,不过它是在 transition/animation 完成之后移除的。
  • v-leave: 被触发离开时生效,在下一个帧移除。基本这个鬼是用不到的。
  • v-leave-active: 就是和v-leave在下一行代码插入的,在 transition/animation完成之后移除。

其实如果感觉到很困惑的话,一定是对DOM插入状态和CSS3.0动画的理解不彻底。

有时候去看看源码就很明白很清楚了

Vue.js应用的四种AJAX请求数据模式

Vue.js应用的四种AJAX请求数据模式

翻译原文出处:4 AJAX Patterns For Vue.js Apps
脾人翻译略差,别见笑。

如果您闲的没事干去两个Vue.js开发人员:“在Vue应用中使用AJAX的正确姿势是咋样的?”,您将会得到三种或更多的不同回答。

Vue.js官方没有提供实现AJAX的指定方式,并且有许多不同的设计模式可以被有效地使用。每个都有自己的利弊,应根据要求进行判断。你甚至可以同时使用几个!

在本文中,我将向您展示您可以在Vue应用程序中实现AJAX的四个位置:

1、根实例
2、组件Components
3、Vuex actions
4、路线导航卫士
5、另加:奖金模式

我将解释每个方法,举一个例子,并涵盖利弊。

一、根实例

在使用Vue框架时,您可以一开始就从根实例发出所有AJAX请求,即写好所有的数据请求,并将所有状态存储在该实例中。如果任何子组件需要数据,它将会顺着props中传下来。如果子组件需要刷新数据,则将使用自定义事件来提示根实例请求它。

new Vue({
  data: {
    message: ''
  },
  methods: {
    refreshMessage(resource) {
      this.$http.get('/message').then((response) {
        this.message = response.data.message;
      });
    }
  }
})

Vue.component('sub-component', {
  template: '<div>{{ message }}</div>',
  props: [ 'message' ]
  methods: {
    refreshMessage() {
      this.$emit('refreshMessage');
    }
  }
});

优点

  • 将所有的AJAX逻辑和数据保存在一个地方。
  • 保持您的组件“独立性”,以便它们可以更加专注于展示。

缺点

随着您的应用扩展,需要书写大量的“props”和自定义事件。

二、组件Components

在使用Vue框架时,组件负责管理自己的AJAX请求和独立状态。实际上,您可能需要创建几个“容器组件”来管理本地组“展示组件”的数据。

例如,filter-list可能是一个容器组件包装filter-input和filter-reset,它们作为展示组件。filter-list将包含AJAX数据逻辑,并且将管理该组中所有组件的数据,通过props和事件进行通信。

请参阅译文《容器组件和展示组件》原作者:Dan Abramov,可以更好地深入了解这种模式。

为了简化此架构的实现,您可以将任何AJAX逻辑抽象为混合,然后在组件中使用mixin使其成为AJAX。

let mixin = {
  methods: {
    callAJAX(resource) {
      //...
    }
  }
};

Vue.component('container-comp', {
  // No meaningful template, I just manage data for my children
  template: '<div><presentation-comp :mydata="mydata"></presentation-comp></div>', 
  mixins: [ myMixin ],
  data() {
    return {
     //... 
    }
  },

});

Vue.component('presentation-comp', {
  template: '<div>I just show stuff like {{ mydata }}</div>',
  props: [ 'mydata' ]
});

优点

  • 保持组件脱钩和可重用。
  • 在任何时候和任何地点都可以获取数据。

缺点

  • 与其他组件或组件组不通信数据。
  • 组件可能会产生很多累赘的职责和重复的功能。

三、Vuex actions

在使用Vue框架时,您可以在Vuex store中管理状态和AJAX逻辑; 组件可以通过dispatch方法操作来请求新数据(store.dispatch将用于触发actions动作)。

如果您要使用此模式,最好从您的action中返回一个promise,以便对AJAX请求的解析做出反应,例如隐藏加载微调器,重新启用按钮等。

store = new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    updateMessage(state, payload) {
      state.message = payload
    }
  },
  actions: {
    refreshMessage(context) {
      return new Promise((resolve) => {
        this.$http.get('...').then((response) => {
          context.commit('updateMessage', response.data.message);
          resolve();
        });
      });
    }
  }
});

Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  methods: {
    refreshMessage() {
      this.$store.dispatch('refeshMessage').then(() => {
        // do stuff
      });
    }
  },
  computed: {
    message: { return this.$store.state.message; }
  }
});

本人比较喜欢这种数据请求模式,因为它很好地分离了你的状态和表现的逻辑。如果你正在使用Vuex,这是要走的路。如果你不使用Vuex,这模式可能是一个很好的理由。

优点

  • 所有的根组件架构的优点,不需要props 和自定义事件。

缺点

  • 增加Vuex的开销。

四、路线导航卫士

在使用Vue框架时,您的应用程序分为多个页面,当路由更变时,将抓取页面及其子组件所需的所有数据。

这种方法的主要优点是它真正简化了您的UI。如果组件独立获取自己的数据,则当组件数据以任意顺序填充时,页面将不可预测地重新呈现。

实现这一点的一个整洁的方法是在您的服务器上为每个页面创建端点,例如/about,/contact与您的应用程序中的路由名称相匹配。然后,您可以实现一个通用beforeRouteEnter钩子,将所有数据属性合并到页面组件的数据中:

import axios from 'axios';

router.beforeRouteEnter((to, from, next) => {
  axios.get(`/api${to.path}`).then(({ data }) => {
    next(vm => Object.assign(vm.$data, data))
  });
})

优点

  • 使UI更可预测。

缺点

  • 总体来说,直到所有数据准备就绪了 ,页面才能呈现。
  • 如果不使用路线,这模式没有太多的帮助。

奖金模式:将第一个AJAX调用的服务器渲染到页面中

建议在初始页面加载时使用AJAX来检索应用程序状态,因为它需要额外的往返服务器,这将延迟应用程序的渲染。

相反,将初始应用程序状态注入HTML页面的内联脚本中,以便应用程序作为全局变量在需要时可用。

<html>
...
<head>
  ...
  <script type="text/javascript">
   window.__INITIAL_STATE__ = '{ "data": [ ... ] }';
  </script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

然后,AJAX可以更适合地用于后续数据提取。

如果您有兴趣了解有关此架构的更多信息,请参阅作者的文章“避免此全面堆栈Vue / Laravel应用程序中的常见反模式”。

投稿:逐行剖析Vue.js源码【不错,不错(*^-^)ρ(*╯^╰)】

利用工作之余时间逐行剖析Vuejs源码,将Vuejs源码分为九大模块,逐个击破,希望能帮助到更多的Vue初学者。
image
在线阅读地址:https://nlrx-wjc.github.io/Learn-Vue-Source-Code/

项目地址:https://github.com/NLRX-WJC/Learn-Vue-Source-Code

本项目受到了阮一峰老师的肯定,已刊登在阮一峰老师微信公众号的科技爱好者周刊第87期,同时也被多个微博大V转发,短短一个月时间内在github上star数量就已经突破2k!

集Vue+TyleScript+Webpack+...开发的资源流水线(前README.md文案)

集Vue+TyleScript+Webpack+...开发的资源流水线  

Vue+

Vue是东西呢?http://cn.vuejs.org/

从Vue2.0开始吧,之前有用过Vue1.0+。

由尤雨溪开发并维护的前端框架,在这两年2015、2016国内大大被重用和提起。

Vue 2.0 中文版

在国内有些大公司已经引进Vue来处理业务:

UC浏览器、稀土掘金、
滴滴, 还出了一本书 Vue.js 权威指南
饿了么,开源了一个基于Vue的UI库 GitHub - ElemeFE/element: Desktop UI elements for Vue.js 2.0
阿里的 weex GitHub - alibaba/weex: A framework for building Mobile cross-platform UI
GitLab选择了Vue https://about.gitlab.com/2016/10/20/why-we-chose-vue/

荔枝FM,移動端部分使用Vue

B 站的三个项目 (•̀ω•́ 」∠)
圈子:哔哩哔哩兴趣圈,二次元兴趣交友社区
直播(仅首页与活动页):哔哩哔哩直播,二次元弹幕直播平台
周边商城:bilibili-周边商城

上面的信息基本来自知乎》https://www.zhihu.com/question/33264609

更新项目

简书
饿了吗
网易云音乐
知乎日报

Node爬虫接口: https://ecitlm.github.io/SpliderApi/#/

开始Vue

已经在知乎发表了一篇文章 新手向:Vue 2.0 的建议学习顺序

我在这里就加几点:

  • 前端基础就不说了,HTML+CSS+JavaScript
  • 有过开发插件、模块化(module)、组件、控件
  • Node、工程化工具(grunt|gulp|webpack)
  • ....

好啦~~~

一般其实呢
最重要的就是会排查错误和查找问题,也要会最新资讯。  

npm 和cnpm 的关系  
sass、node-sass 在npm install的时候为什么老是错误  

翻墙和网络好

哈哈哈,看到下面有人评论:Vue 不难学,难的是配置 Webpack……哈哈。

所以在学前端的时候,还需要学浏览器、 HTTP、数据、网络 ...

更类似的东东

之前很久之前就是JSP,有看过、接触过JSP的同学们都知道
JSP 的语法就是在HTML里加入自定义的东西和加入了动态语言

哦,好吧,我们就说MVC模式,还有MVVM模式............
哎呀,可能早期还会接触到backbone框架的人,或者已经不是很重要了
重要的是接触过angular的人,这一下就会更加很好非常棒地.....
就是很棒,别说了

我想说的就是:

  • 分离
  • HTML动态解析模板
  • 结构化
  • 模块化
  • 工程化

一步一步来...

Vue 基础

 有个Vue社区 http://www.vue-js.com/

2.0中文社区,上面有提到,再来再次给出《Vue 2.0 中文版

 看一下2.0的API:https://vuefe.github.io/api/

组件

vue-router

来,链接在这里:vue-router 2

路由对象和路由匹配

路由对象,即$router会被注入每个组件中,可以利用它进行一些信息的获取。如

属性 说明
$route.path 当前路由对象的路径,如'/view/a'
$rotue.params 关于动态片段(如/user/:username)的键值对信息,如{username: 'paolino'}
$route.query 请求参数,如/foo?user=1获取到query.user = 1
$route.router 所属路由器以及所属组件信息
$route.matched 数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
$route.name 当前路径名字

路由选项

路由选项名 默认值 作用
hashbang true 将路径格式化为#!开头
history false 启用HTML5 history模式,可以使用pushState和replaceState来管理记录
abstract false 使用一个不依赖于浏览器的浏览历史虚拟管理后端。
transitionOnLoad false 初次加载是否启用场景切换
saveScrollPosition false 在启用html5 history模式的时候生效,用于后退操作的时候记住之前的滚动条位置
linkActiveClass "v-link-active" 链接被点击时候需要添加到v-link元素上的class类,默认为active

如,我想采用一个有路径格式化并启用Html5 history功能的路由器,则可以在路由器初始化的时候,指定这些参数:

var router = new VueRouter({
  hashbang: true,
  history: true
});

请暂时参考这篇文章VueJs路由跳转——vue-router的使用

注意项

  • 响应路由参数的变化(组件内部跳同一个组件)
  • 嵌套路径的 children
  • 编程式的导航

 1、声明式:router-link :to="..." || 编程式:router.push(...)
这个方法会向 history 栈添加一个新的记录

      // 字符串  
      router.push('home')

      // 对象
      router.push({ path: 'home' })

      // 命名的路由
      router.push({ name: 'user', params: { userId: 123 }})

      // 带查询参数,变成 /register?plan=private
      router.push({ path: 'register', query: { plan: 'private' }})
      

2、声明式:router-link :to="..." replace || 编程式:router.replace(...)
   不会向 history 添加新记录,替换掉当前的 history 记录

3、router.go(n)

    // 在浏览器记录中前进一步,等同于 history.forward()
    router.go(1)

    // 后退一步记录,等同于 history.back()
    router.go(-1)

    // 前进 3 步记录
    router.go(3)

    // 如果 history 记录不够用,那就默默地失败呗
    router.go(-100)
    router.go(100)
    

4、操作 History

 你也许注意到 router.push、 router.replace 和 router.go 跟 window.history.pushState、 window.history.replaceState 和 window.history.go好像, 实际上它们确实是效仿 window.history API 的。 还有值得提及的,vue-router 的导航方法 (push、 replace、 go) 在各类路由模式(history、 hash 和 abstract)下表现一致。
  • 命名路由 和 命名视图
     命名路由就是在路由加个 name 的标签
     命名视图就是在视图加个 name 的标签,可以设置默认值

  • 重定向 和 别名
     重定向:内部跳转

    { path: '/a', redirect: '/b' }  
    { path: '/a', redirect: { name: 'foo' }}  
    { path: '/a', redirect: to => {
        // 方法接收 目标路由 作为参数
        // return 重定向的 字符串路径/路径对象
    }}

 别名:保持当前路由去访问另一个路由

    { path: '/a', component: A, alias: '/b' }
  • HTML5 History 模式

 这个给个链接自己去玩 http://router.vuejs.org/zh-cn/essentials/history-mode.html
 因为这个比较复杂和需要后台来配合...

  • 导航钩子(路由ing锁)
    正如其名,vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的。
     来来来:http://router.vuejs.org/zh-cn/advanced/navigation-guards.html

  • 路由元信息 (就是标志过滤处理)

  • 过渡动效 ...

  • 数据获取
     1、导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。  
     2、导航完成之前获取:导航完成前,在路由的 enter 钩子中获取数据,在数据获取成功后执行导航。

  • 滚动行为
    注意: 这个功能只在 HTML5 history 模式下可用。

  • 路由懒加载
     说白了就是模块化加载
    结合 Vue 的 异步组件 和 Webpack 的 code splitting feature, 轻松实现路由组件的懒加载。

Vuex 状态管理  

 登录状态,信息储存、暂存,操作状态。

 有空可以去解读源码:http://vuex.vuejs.org/en/index.html
 有中文版: https://segmentfault.com/a/1190000007108052  

Vue-loading

Vue-resource

动画过渡

http://vuejs.org/guide/transitions.html

项目目录

webpack

Vue-cli 构建工具

npm install -g vue-cli  
vue init webpack my-project

还需要一些周边知识

Node+npm Es6 Sass webpack gulp  

项目

豆瓣API 聚合数据

前端知识点, 总有一款《学会总结》适合你 —— 2019.1~2019.3

Vue 2.5 is coming

Message from Vue.js Team

Thank you for joining our AMA. The questions were brilliant; we all had much fun answering them. Here is a summary of the AMA:

  • Vue 2.5 is coming
    • vue-test-utils; including an upgrade to the testing documentation
    • Improved TypeScript support
  • vue-cli 3.0 has started and we want the community to participate
  • We plan public roadmap to make it easier to get on board and contribute.
  • Egoist and Linusborg might or might not be machines/AI
  • React patent issues don't affect Vue; we are unlikely to see any issues surrounding this. Vue will remain on MIT license.
  • Company backing is not an issue for us. We believe Vue has already surpassed the critical mass and "survival" is really no longer an issue.
  • Weex, NativeScript + Vue, and other tooling will be supported by the team for the long term. We are helping to mature the documentation and bridge the gap to help adoption.
  • React Fiber is interesting. Vue can leverage some learnings, and we will watch the space. Although we don't see a strong need to implement something similar.
  • Vue 3.0 is in the planning phase, targeting evergreen browsers. This will help us enhance the reactivity system and reduce library size. 2.x and 3.x will be maintained in parallel.
  • Web components will not (yet) be part of core, but we will continue to watch this space
  • We wish Wordpress all the best with their upcoming challenges and will support them as much as we can. It's still too early to say what will happen here, but we are very excited as a team on the prospects it brings.

分享链接来自:https://hashnode.com/ama/with-vuejs-team-cj7itlrki03ae62wuv2r2005s

总有一款总结和学习的文章适合你

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.