支出三个呈现类型列表的行使,Vue开源项目库汇总

By admin in 4858美高梅 on 2019年6月29日

那方面官方网址给的示范是索要工具来编写翻译的,不过nodejs又从不活力去学,只能曲线救国。VueJS的作者在另多个网址有一篇小说讲到能够用jQuery.getScript或RequireJS达成组件,却绝非给示例,于是自身查寻觅了一种方法。

来源:

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和vue第22中学央银行使滑块

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

  • 导入Google报到按键

vue-svgicon★53

  • 始建svgLogo组件的工具

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的马克down编辑器组件

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

  • 创建GoogleMD风格涟漪效应的Vue组件

vue-touch-keyboard★22

  • VueJS虚构键盘组件

vue-chartkick支出三个呈现类型列表的行使,Vue开源项目库汇总。★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
写了贰个。该模板基于 马克down 文件进行布署,只须求按一定法则编写
马克down 文件,然后使用二个
在线工具 转为 JSON
文件就可以。上边是该类型的在线地址和源码。本文首要记录一下等级次序中用到的相干知识。

在线演示   
源码

用到的工具:

UI组件

开辟框架

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启动页

效果

程序最后的效果如下图所示:

4858美高梅 1

凡事项目只包蕴七个零件:项目介绍 和
侧边导航,逻辑相比较容易,十二分顺应入门。

vue.js — 0.12.+ (需要0.12中async component支持)
require.js
text.js — RequireJS text plugin

element★9305

实用库

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的可变彩色svgLogo方案

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

  • 图片懒加载插件

条件安顿

此处大家选用 Gulp 和 Webpack 用作项目创设筑工程具。初次使用 Gulp 和 Webpack
可能不太适应,因为它们的安顿或然让您看的三只雾水。然则不用思量,那七个毕竟只是二个工具,在初阶时未尝须求特意的摸底它们的行事规律,只要能运作起来就足以。等到应用了一段时间之后,大势所趋的就精晓该怎么安顿了。这里根本记录一下连串中利用的陈设,假诺想要系统的就学怎么样采用那多少个工具,能够参照上边包车型地铁篇章:

  • Gulp入门教程
  • 一钟头包教会 —— webpack
    入门指南

文本列表

  • 饿了么出品的Vue2的web UI工具套件

服务端

nuxt.js★2743

  • 用来服务器渲染Vue app的最小化框架

express-vue★137

  • 粗略的利用服务器端渲染vue.js

vue-ssr★67

  • 非常轻巧的VueJS服务器端渲染模板

vue-ssr★56

  • 结合Express使用Vue2服务端渲染

vue-easy-renderer★22

  • Nodejs服务端渲染

Gulp 和 Webpack 集成

Gulp 和 Webpack 集成一个相比容易的不二等秘书技正是将 Webpack 作为 Gulp 的二个task,如上边包车型客车款式:

var gulp = require("gulp");
var webpack = require("webpack");

gulp.task("webpack", function (callback) {
    //webpack配置文件
    var config = {
        watch: true,
        entry: {
            index: __dirname + '/src/js/index.js'
        },
        output: {
            path: __dirname + '/dist/js',
            filename: '[name].js'
        }
        //........
    };
    webpack(config, function (err, stats) {
        console.log(stats.toString());
    });
});

gulp.task('default', [ 'webpack']);

上面大家分别介绍一下 gulp 和 webpack 的安排

index.html
index.js
comp.js (组件在此处定义)
comp.html (组件的模板)

Vux★6802 –
基于Vue和WeUI的组件库

协理理工科程师具

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

Gulp 配置

Gulp 中驷比不上舌配置了多个职务:webpack 和 browserSync,这里关键说一下
browserSync。browserSync
首要用以自动刷新浏览器。首先大家安插要求监听的文件,当这一个文件发出更动后,调用
browserSync 使浏览器自动刷新页面。下边是切实的布置

var gulp = require("gulp");
var browserSync = require('browser-sync');

// 添加 browserSync 任务
gulp.task('browserSync', function () {
    browserSync({
        server: {
            baseDir: '.'
        },
        port: 80
    })
});

// 配置需要监听的文件,当这些文件发生变化之后
// 将调用 browserSync.reload 使浏览器自动刷新
gulp.task("watch", function () {
    gulp.watch("./**/*.html", browserSync.reload);
    gulp.watch("dist/**/*.js", browserSync.reload);
    gulp.watch("dist/**/*.css", browserSync.reload);
});

// 添加到默认任务
gulp.task('default', ['browserSync', 'watch', 'webpack']);

事实上组件分成了js和html,html是模板内容,这里就像与“叁个文件对应三个零件”稍有不符,但一旦模板内容比较多,那是有必要的,也更有利于维护。
直接上代码。

mint-ui★4776

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-黑客news-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写的记事本应用

Webpack 配置

作者们采取 webpack
举行能源打包的办事,正是说将各个财富(css、js、图片等)交给 Webpack
举行管理,它会将财富整合压缩,大家在页面中只需引用压缩之后的文本就能够。webpack
的底子配置文件如下所示

gulp.task("webpack", function (callback) {

    //webpack配置文件
    var config = {
        // true 表示 监听文件的变化
        watch: true,
        // 加载的插件项
        plugins: [
            new ExtractTextPlugin("../css/[name].css")
        ],
        // 入口文件配置
        entry: {
            index: __dirname + '/src/js/index.js'
        },
        // 输出文件配置
        output: {
            path: __dirname + '/dist/js',
            filename: '[name].js'
        },

        module: {
            // 加载器配置,它告诉 Webpack 每一种文件需要采用什么加载器来处理,
            // 只有配置好了加载器才能处理相关的文件。
            // test 用来测试是什么文件,loader 表示对应的加载器
            loaders: [
                {test: /\.vue$/, loader: 'vue-loader'}
            ]
        },
        resolve: {
            // 模块别名定义,方便后续直接引用别名,无须多写长长的地址
            // 例如下面的示例,使用时只需要写 import Vue from "vue"
            alias: {
                vue: path.join(__dirname, "/node_modules/vue/dist/vue.min.js")
            },
            // 自动扩展文件后缀名,在引入文件时只需写文件名,而不用写后缀
            extensions: ['.js', '.json', '.less', '.vue']
        }
    };
    webpack(config, function (err, stats) {
        console.log(stats.toString());
    });
});

webpack 的相关安插表明能够参谋前边的交付的小说,上边说一下使用 webpack 2
相逢的坑:

comp.html — 组件模板

  • Vue 2的移动UI元素

extract-text-webpack-plugin

extract-text-webpack-plugin 会将 css 样式打包成多个独立的 css
文件,而不是一向将样式打包到 js 文件中。下边是选拔形式

{
    plugins: [new ExtractTextPlugin("../css/[name].css")],
    module: {
        loaders: [{
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
            })
        },
        {
            test: /\.less$/,
            loader: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader!less-loader"
            })
        }
    },
}

此地需求专注的地点就是,extract-text-webpack-plugin 在 webpack 1 和
webapck 2 中的安装格局各异,须要依附使用的 webpack 版本来安装:

# for webpack 1
npm install --save-dev extract-text-webpack-plugin
# for webpack 2
npm install --save-dev extract-text-webpack-plugin@beta
<h2>{{title}}</h2>
<p>{{content}}</p>
comp.js -- 组件定义
define(['text!comp.html'], function (temp) { // 在requirejs中定义一个模块,依赖为模板文本
 return {
 props: ['title', 'content'],
 template: temp
 }
});

iview★4458

压缩文件

利用 UglifyJsPlugin 插件能够裁减 css 和 js
文件,但是一起初时老是一点都不大概压缩文件,后来翻开了一晃资料,大概是因为上边多少个原因:

  1. uglifyjs-webpack-plugin 注重于 uglify-js,而 uglify-js 私下认可不协助ES6 语法,所以需求安装支撑 ES6 语法的 uglify-js
    npm install mishoo/UglifyJS2#harmony --save
  2. webpack 2 中,UglifyJsPlugin 私下认可不收缩 loaders,若是要开动 loaders
    压缩,必要投入上边包车型地铁布局:
    js plugins: [ new webpack.LoaderOptionsPlugin({ minimize: true }) ]

设若按上边包车型地铁修改了只怕不能够压缩文件,能够试着将 node_modules
删除,然后重新安装正视。

于今,多个归纳的沙盘就建好了。然后正是在VueJS中注册这么些组件。

  • 基于 Vuejs 的开源 UI 组件库

Vue

本有的关键记录一下顺序中用到的 Vue 语法,要是想要系统的上学一下
Vue.js,可以参照下面包车型地铁篇章:

  • Vue.js 教程

index.js

Keen-UI★2363

HelloWorld

我们率先来看贰个最简便的 Vue 示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
    {{ message }}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

</body>
</html>

每一种 Vue 应用都会成立三个 Vue 的根实例,在根实例中需求传入 html 标签的
id,用来报告 Vue 该标签中的内容供给被 Vue
来深入分析。上边是一个简易的数额绑定的事必躬亲,在运转实 {{ message }}
会被深入分析为 “Hello Vue!”。

require.config({
 paths: { // 指定text.js和vue.js的路径,不需要.js后缀,详见RequireJS文档
 text: '../../../assets/requirejs/text',
 vue: '../../../assets/vue/vue'
 }
});

require(['vue'], function (Vue) { // 依赖vue.js
 Vue.component('comp', function (resolve) { // 注册一个异步组件
 require(['comp'], function (comp) { // 因为我们要按需加载组件,因此require(['comp'])必须在function里
 resolve(comp)
 })
 });
 new Vue({
 el: 'body'
 });

 //new Vue({
 // el: 'body',
 // components: {
 // comp: function (resolve) {
 // require(['comp'], function (comp) {
 // resolve(comp)
 // })
 // }
 // }
 //});
});
  • 轻量级的基本UI组件合集

基础

本节参考自 Vue 粤语文书档案,略有修改

在写 Vue 应用从前,大家要熟识一下 Vue
的中坚语法,首要不外乎数据绑定、事件管理、条件、循环等,上面大家各种看下相关的学问。

index.html

vue-material★2207

数据绑定

Vue.js 使用了依据 HTML 的模板语法,允许开采者表明式地将 DOM 绑定至底层
Vue 实例的数目。全部 Vue.js 的模版都是官方的 HTML
,所以能被依据标准的浏览器和 HTML 分析器分析。上面是 Vue.js
数据绑定的相关语法:

  • 文本
    多少绑定最广泛的款型便是使用 “Muestache”
    语法(双大括号),如上面包车型客车样式:

    Message: {{ msg }} 
    

    Muestache 标签会被剖判为对应对象上的 msg 属性值。当 msg
    属性发生改动今后,Muestache 标签处剖析的源委也会随着更新。

    由此采纳 v-once
    指令,我们能够推行一次性分析,即数据变动时,深入分析的从头到尾的经过不会趁机更新。必要注意的是
    v-once 会影响该节点上的具备数据绑定

    This will never change: {{ msg }}
    
  • Raw HTML
    任凭属性值是何等内容,Muestache
    标签里的剧情都会被深入分析为纯文本。若是希望将绑定的值解析为 HTML
    格式,就供给运用 v-html 指令:

    <div v-html="variable"></div>
    
  • 属性值
    Mustache 语法无法用在 HTML 的品质中,假诺想为属性绑定变量,需求使用
    v-bind 指令:

    <div v-bind:id="dynamicId"></div>
    

    假设 dynamicId=1,那么地方代码就能被分析为

    <div id="1"></div>
    

    另外 v-bind 指令能够被缩写为
    :,所以我们在程序中平日见到的是底下的语法格局:

    <div :id="dynamicId"></div>
    <!-- 等价于 -->
    <div v-bind:id="dynamicId"></div>
    
  • 表达式
    对此有着的数码绑定, Vue.js 都提供了完全的 JavaScript
    表明式帮衬,如下边包车型客车花样:

    // 加法
    {{ number + 1 }}
    
    // 三元表达式
    {{ ok ? 'YES' : 'NO' }}
    
    // JS 库函数
    {{ message.split('').reverse().join('') }}
    
    // 指令中使用表达式
    <div v-bind:id="'list-' + id"></div>
    
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
</head>
<body>

<component is="comp" title="我是一个组件" content="fjkldsjfkldjsklgjks"></component>

<script data-main="index" src="../../../assets/require.js"></script>

</body>
</html>
  • 由此Vue Material和Vue 2创建优质的app应用

事件处理

透过接纳 v-on 指令能够监听 DOM 事件来触发 JS
管理函数,下边是二个整机的以身作则:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
    <button v-on:click="increase">增加 1</button>
    <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            increase: function() {
                this.counter++;
            }
        }
    })
</script>

</body>
</html>

日常情形下,v-on 会被简写为 @,所以大家在程序中貌似是看到上面的款式

<button @click="increase">增加 1</button>
<!-- 等价于 -->
<button v-on:click="increase">增加 1</button>

运转代码,把<component>注释掉就会见到有别于。

muse-ui★1992

规范化指令 v-if

通过 v-if 指令大家得以依附有个别准则来决定是不是渲染内容,如上边包车型地铁花样

<h1 v-if="ok">Yes</h1>

大家平时将 v-if 和 v-else 结合起来使用,如下所示:

<div v-if="Math.random() > 0.5">
    Now you see me
</div>
<div v-else>
      Now you don't
</div>

在 Vue 2.1.0 中新添了三个 v-else-if 指令,能够开始展览链式判别:

<div v-if="type === 'A'">
    A
</div>
<div v-else-if="type === 'B'">
      B
</div>
<div v-else-if="type === 'C'">
      C
</div>
<div v-else>
      Not A/B/C
</div>

要是组件比较多,注册组件就能很麻烦,由此得以把那有个别提炼出来。

  • 三端样式一样的响应式 UI 库

巡回指令 v-for

通过 v-for
指令,大家能够依照一组数据进行迭代渲染,上边是叁个宗旨示例:

<ul id="example-1">
    <li v-for="item in items">
        {{ item.message }}
    </li>
</ul>

var example1 = new Vue({
    el: '#example-1',
    data: {
        items: [
              {message: 'Foo' },
              {message: 'Bar' }
        ]
    }
})

上面是一个粗略的对数组迭代的亲自过问,大家还足以针对对象举办迭代,即使只行使一个参数,正是本着对象的属性值进行迭代:

<ul id="repeat-object" class="demo">
    <li v-for="value in object">
        {{ value }}
    </li>
</ul>

若是传入第二个参数,就是对准对象的属性值以及质量名进行迭代,注意这里二个参数表示的是属性名,也便是key

<div v-for="(value, key) in object">
    {{ key }} : {{ value }}
</div>

一旦再传播第多个参数,第八个参数就象征索引

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }} : {{ value }}
</div>

精雕细琢后的index.js

vuetify★1678

组件

组件是 Vue.js 最有力的职能之一。组件能够扩充HTML元素,封装可选用的代码。在大家的顺序中隐含多少个零件:project 组件和
sidebar 组件,如下图所示。这里大家珍视介绍单文件组件的接纳,就要组件用到
html、js 和 css 都写在三个文书里,每一个组件自成一个种类。

4858美高梅 2

require.config({
 paths: {
 text: '../../../assets/requirejs/text',
 vue: '../../../assets/vue/vue'
 }
});

function conponent(name) {
 return function (resolve, reject) {
 require([name], function (comp) {
 resolve(comp)
 })
 }
}

require(['vue'], function (Vue) {
 Vue.component('comp', conponent('comp'));
 Vue.component('comp2', conponent('comp2'));

 new Vue({
 el: 'body'
 });
});
  • 为运动而生的Vue JS 2组件框架

文件结构

单文件组件一般使用 “.vue” 作为后缀名,一般的文本结构如下所示:

project.vue

<template>
    <div>
        {{ key }}
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                "key": "value"
            }
        },

        methods:  {
            demoMethod: function() {

            }
        }

    }
</script>

<style lang="less">
    @import "xxx.less";
</style>

export 将模块输出,default
申明使用文件名作为模块输有名,那就像是于将模块在系统中注册一下,然后其它模块才可用使用
import 援引该模块。

接下来大家须要在主文件中登记该器件:

index.js

import project from '../components/project/project.vue'
Vue.component("project", project);

当注册成功未来,就足以 html 中采用该零件了

index.html

<project></project>

至此。

vonic★1494

生命周期

Vue 的要给组件会经历 创造 -> 编写翻译 -> 挂载 -> 卸载 -> 销毁
等一多元事件,那个事件时有发生的内外都会接触二个有关的钩子(hook)函数,通过那么些钩子函数,我们可以在事件产生的左右做一些操作,上面先看下官方给出的贰个Vue 对象的生命周期图,在那之中红框内标明的正是相应的钩子函数

4858美高梅 3

上面是关于那个钩子函数的讲明:

hook 描述
beforeCreate 组件实例刚被创建,组件属性计算之前
created 组件实例创建完成,属性已绑定,但是 DOM 还未生成, $el 属性还不存在
beforeMount 模板编译/挂载之前
mounted 模板编译/挂载之后
mounted 模板编译/挂载之后(不保证组件已在 document 中)
beforeUpdate 组件更新之前
updated 组件更新之后
activated for keep-alive,组件被激活时调用
deactivated for keep-alive,组件被移除时调用
beforeDestory 组件销毁前调用
destoryed 组件销毁后调用

上边是钩子函数的选择办法:

export default {
    created: function() {
        console.log("component created");
    },
    data {},
    methods: {}
}

正文已被收拾到了《Vue.js前端组件学习课程》,应接大家学习阅读。

  • 飞快营造移动端单页应用

父亲和儿子组件通讯

老爹和儿子组件通讯可以应用 props down 和 events up 来陈说,父组件通过 props
向下传递数据给子组件,子组件通过 events 给父组件发送新闻,上面暗中表示图:

4858美高梅 4

图片来源于

如上正是本文的全体内容,希望对我们的就学抱有帮衬,也愿意我们多多协助脚本之家。

eme★1390 –
优雅的Markdown编辑器

父组件向子组件传递数据

由此使用
props,父组件能够把数量传递给子组件,这种传递是单向的,当父组件的习性爆发变化时,会传递给子组件,可是不会反过来。上边是多个演示

comp.vue

<template>
    {{ message }}{{ shortMsg }}
</template>

<script>
    export default {
        props: ["message", "shortMsg"],

    }
</script>

index.html

<div id="app">
    <!-- 在这里将信息传递给子组件,:message 表示子组件中的变量名 -->
    <comp :message="hello" :short-msg = "hi"></comp>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            "hello": "Hello",
            "hi": "Hi"
        }

    })
</script>

在上头的流水线中,父组件首先将在传递的数目绑定到子组件的品质上,然后子组件在
props
中声称与绑定属性同样的变量名,就能够利用该变量了,须求专注的有些是只要变量选择驼峰的命名情势,在绑定属性时,将要将驼峰格式改为
- 连接的方式,假设地点所示 shortMsg -> short-msg

你恐怕感兴趣的篇章:

  • Vuejs 单文件组件实例详解
  • 详解在WebStorm中增多Vue.js单文书组件的高亮及语法协助
  • vue webuploader
    文件上传组件开采
  • 轶事Vue单文件组件详解
  • Vue单文件组件基础模板小结
  • vuejs 单文件组件.vue
    文件的使用
  • Vue单文件组件的哪些选取办法介绍
  • jquery加载单文件vue组件的方式
  • Vuejs实现带样式的单文件组件新措施
  • vue文件树组件使用详解

vue-multiselect★1166

子组件向父组件通讯

固然子组件须求把新闻传送给父组件,能够行使自定义事件:

  1. 使用 $on(eventName) 监听事件
  2. 利用 $emit(eventName) 触发事件

上面是二个演示:

comp.vue

<script>
    export default {
        methods: {
            noticeParent: function() {
                // 事件名,传输值
                this.$emit('child_change', "value");
            }
        }
    }
</script>

index.html

<div id="app">
    <comp @child_change="childChange"></comp>
</div>
<script>
    var app = new Vue({
        el: '#app',
        methods: {
            childChange: function(msg) {
                console.log("child change", msg);
            }
        }
    });
</script>

在上头的代码中,父组件通过 v-on 绑定了 child_chagne 事件,当
child_chagne 事件被触发时候就可以调用 childChange
方法。在子组件中得以因而 $emit 触发 child_change
事件。这里需求小心的是事件名不用选择驼峰命名,也毫不用 -
字符,能够利用下划线 _ 连接单词。

  • Vue.js选用框化解方案

Event Bus 通信

伊芙nt Bus
通讯情势是一种越发通用的通讯方式,它不只能够用来老爹和儿子组件也能够用来非父亲和儿子组件。它的法规正是采纳二个空的
Vue
实例作为中心事件总线,通过自定义事件的监听和接触,来达成通讯成效,下边是三个暗中提示图:

4858美高梅 5

图片来自

上面我们来看八个实际的实例:

  • 第一定义叁个空的 Vue 实例,作为事件总线

    EventBus.js

    import Vue from 'vue'
    export default new Vue()
    
  • 在组件一中针对有些事件开始展览监听

    comp1.vue

    <script>
    import eventBus from "EventBus.js"
    export default {
        created: function() {
            eventBus.$on("change", function() {
                console.log("change");
            })
        }
    }
    </script>
    
  • 在组件二中触发相应事件产生通讯

    comp2.vue

    <script>
    import eventBus from "EventBus.js"
    export default {  
        methods: {
            notice: function() {
                this.$emit('change', "value");
            }
        }
    }
    </script>
    

vue-table★824

ES6

本节摘自 ECMAScript 6 入门

与 ES5 相比较,ES6 提供了越来越完美的职能和语法,程序中大家接纳一些 ES6
语法,这里做七个简短的记录,假使想要系统的上学 ES6,可以参照下边包车型大巴篇章:

  • ECMAScript 6 入门
  • 简化数据表格

let

ES6 新添了 let 命令,用于证明变量。使用 let
证明的变量具备块级功效域,所以在注解变量时,应该接纳 let,而不是 var。

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

VueCircleMenu★776

for of 循环

ES6 借鉴 C++、Java、C# 和 Python
语言,引进了for…of循环,作为遍历全体数据结构的统一的法子

const arr = ['red', 'green', 'blue'];

for(let v of arr) {
  console.log(v); // red green blue
}
  • 优质的vue圆环菜单

Set 和 Map

ES6 引进了 Set 和 Map 结构。上边是五头的切切实实介绍

vue-chat★748

Set

属性

属性 描述
Set.prototype.size 返回Set实例的成员总数。

方法

方法名 描述
add(value) 添加某个值,返回Set结构本身。
delete(value) 删除某个值,返回一个布尔值,表示删除是否成功。
has(value) 返回一个布尔值,表示该值是否为Set的成员。
clear() 清除所有成员,没有返回值。
   
keys() 返回键名的遍历器
values() 返回键值的遍历器
entries() 返回键值对的遍历器
forEach() 使用回调函数遍历每个成员

选用示例:

const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
  console.log(i);
}
  • vuejs和vuex及webpack的聊天示例

Map

属性

属性 描述
Map.prototype.size 返回 Map 实例的成员总数。

方法

方法名 描述
set(key, value) set方法设置键名key对应的键值为value,然后返回整个 Map 结构。如果key已经有值,则键值会被更新,否则就新生成该键。
get(key) 读取 key 对应的键值,如果找不到 key,返回 undefined。
has(key) 返回一个布尔值,表示某个键是否在当前 Map 对象之中。
delete(key) 删除某个键,返回true。如果删除失败,返回false。
clear() 清除所有成员,没有返回值。
   
keys() 返回键名的遍历器
values() 返回键值的遍历器
entries() 返回所有成员的遍历器
forEach() 遍历 Map 的所有成员。

动用示例:

const m = new Map();
const o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

radon-ui★633

参照作品

  • Vue 2.0
    升(cai)级(keng)之旅
  • Vue
    2.0费用实践(组件间通信)
  • Vuejs2.0
    组件通信总计
  • 敏捷支付产品的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

  • Infiniti滚动组件

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和vue第22中学选取滑块

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

  • 导入Google登陆开关

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

  • 构建谷歌(Google)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的可变彩色svgLogo方案

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-红客news-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-cnode4858美高梅 ,★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写的记事本应用

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有