【简化Vue.js应用开发】分享一个常用Vue.js自定义过滤器合集,适合开发Dashboard后台管理类应用
发布于 3 年前 作者 panteng 10371 次浏览 来自 分享

Vue-Filters-Kit

整合常用的Vue.js custom filters,帮助你快速格式化时间、小数等数据,适合开发Dashboard后台管理类应用。

screenshot.jpg

GitHub: https://github.com/panteng/vue-filters-kit

示例: http://panteng.me/demos/vue-filters-kit

写在后面

这个项目的诞生的原因是,最近这一年我用Vue.js写了很多后台管理类的网站,这种网站会涉及很多数据格式化相关的工作。通常我会使用Vue过滤器实现数据格式化。因此我打算将一些常用的自定义过滤器整合起来,做成一个库,以后在写新项目时直接拿来用就好,不需要再从头编写。

目前整合了我自己在Vue.js应用中常用的过滤器,包括booleanFormatter(格式化布尔值),byteFormatter(将Byte值转换为kb、mb、gb或tb), percentageFormatter(将小数转化为百分数)和timestampFormatter(将时间戳转换为时间)。我将陆续增加更多的自定义过滤器。

欢迎提bug和建议。如果你有其他常用的过滤器想补充,也欢迎pull request。

25 回复

也就 4 个 filter 是吧。。。?

楼主是妹纸~~ <br> <br>来自吊吊的 <a href=“https://github.com/ihanyang/cnode-vue” target="_blank">cnode-vue</a>

@wq123456 感谢支持

@alsotang 对。这个项目就是把我自己在开发dashboard类应用中常用的过滤器整合一下,目前就这四个比较常用。

@ihanyang 我不是- - 头像是willa holland

QQ截图20160422095635.png 这程序怎么处理的?

@youarenode 这你去问Moment.js和Webpack的作者。这是uglify之后的代码,那些看不懂的语言是应该是Moment.js的国际化处理代码,至于代码格式那是Webpack压缩打包造成的。另外这个项目的核心是那些filters文件,而不是这个由Webpack生成的bundle.js,所以不要弄错重点,怎么打包你自己决定,不一定要按照我的方式来。

@panteng 嗯嗯,你的开发工作流 是怎样的?

@youarenode 我平时喜欢用gulp或webpack实现自动化。但工作流都是一样的:用SASS写样式,然后编译生成一个bundle.css。用CommonJS写脚本,然后打包生成一个bundle.js,最后在index.html中引入bundle.css和bundle.js。

你可以参考我的另一个项目中关于gulp的用法,我在里面写了一些注释(仅供参考)。

https://github.com/panteng/wechat-h5-boilerplate

@panteng 用CommonJS写脚本,具体你用的是哪些?能推荐下吗。谢谢,最近我在整理前端开发工作流。

@youarenode 这是我项目中跟打包JS有关的gulp任务:

var browserfify = require('gulp-browserify');
var rename = require('gulp-rename');

// bundle CommonJS modules and save the result as bundles/bundle.js
gulp.task('bundle-js', function () {
  return gulp.src('javascripts/main.js')
    .pipe(browserify({ transform: ['partialify'], debug: true }))
    .pipe(rename('bundle.js'))
    .pipe(gulp.dest('bundles'));
});

主要用到browserify和partialify这两个工具

@panteng 恩,谢谢。为什么不用grunt?

@youarenode Grunt的不同任务之间需要靠文件进行交互,而Gulp不同任务之间是通过流进行交互的,不需要往磁盘上写文件,所以效率更高,也更灵活。另外Gulp的编程式写法比Grunt的配置式写法更符合人类思维。

@youarenode 开发Vue应用我更喜欢用Webpack,因为它不仅能打包JS模块,还能打包图片、CSS等,还能自动刷新浏览器,很方便。用Gulp或Grunt虽然也可以实现类似功能,但要麻烦得多。

这个是好东西 时间戳炒鸡常用

@qiansimin88 感谢支持。

妹纸的要支持 自豪地采用 CNodeJS ionic

@kvkens 我不是…

mark 学习了 支持楼主

我对你的头像很困惑。这姑娘看到什么了流鼻血

回到顶部