Vant - 有赞移动端 Vue 组件库
A Vue.js 2.0 Mobile UI at YouZan
特性
- 50+ 个经过有赞线上业务检验的组件
- 单元测试覆盖率超过 90%
- 完善的中英文文档和示例
- 支持 babel-plugin-import
- 支持 TypeScript
- 支持 SSR
安装
npm i -S vant
快速上手
方式一. 使用 babel-plugin-import (推荐)
# 安装 babel-plugin-import 插件
npm i babel-plugin-import -D
// 在 .babelrc 或 babel-loader 中添加插件配置
// 注意:webpack 1 无需设置 libraryDirectory。
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
接着你可以在代码中直接引入 Vant 组件,插件会自动将代码转化为方式二中的按需引入形式。
import { Button } from 'vant';
方式二. 按需引入组件
import Button from 'vant/lib/button';
import 'vant/lib/vant-css/base.css';
import 'vant/lib/vant-css/button.css';
方式三. 导入所有组件
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/vant-css/index.css';
Vue.use(Vant);
CDN
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css">
<!-- 引入组件 -->
<script src="https://unpkg.com/vant/lib/vant.min.js"></script>
更多内容请参考 快速上手.
贡献代码
修改代码请阅读我们的 开发指南。
使用过程中发现任何问题都可以提 Issue 给我们,当然,我们也非常欢迎你给我们发 PR。
浏览器支持
现代浏览器以及 Android 4.0+, iOS 6+.
手机预览
可以手机扫码以下二维码访问手机端 demo:
链接
开源协议
本项目基于 MIT 协议,请自由地享受和参与开源。
docker的web管理工具
海鸥
简介
Seagull 友好的docker Web界面管理工具
- 易于安装和卸载在Docker容器
- 单击开始/停止/删除容器和镜像
- 超快速(小于10ms)的搜索和过滤
- 支持多主机管理和监控
- 国际化主要包括英语、汉语、德语和法语
更多信息, 请到 dockerseagull.com, 观看 三分钟视频 和 官方的幻灯片.
github地址
点击跳转: https://github.com/tobegit3hub/seagull
安装
docker run -d -p 10086:10086 -v /var/run/docker.sock:/var/run/docker.sock tobegit3hub/seagull
或运行 docker-compose up -d
.
截图
多主机
Seagull支持监控多台服务器。确保你开始Docker守护这样。
docker -H tcp://0.0.0.0:2375 -H unix:///var/run/docker.sock -api-enable-cors=true -d
参与
Seagull is written in Go with tools like Docker, Beego, AngularJS, Bootstrap and JQuery.
- Install golang and setup
$GOPATH
go get github.com/astaxie/beego
go get github.com/tobegit3hub/seagull
go build seagull.go
sudo ./seagull
More detail in seagull-design-and-implement and we have excellent documents in docs.
提醒
The issue #2 每个人都可以在IP和端口海鸥接触访问您的码头工人守护。为了安全,你可以绑定到本地主机的访问限制。
docker run -d -p 127.0.0.1:10086:10086 -v /var/run/docker.sock:/var/run/docker.sock tobegit3hub/seagull
类似的Docker项目
现在有很多类似的项目提供了Web界面来监控Docker。海鸥就是受他们影响并且期望做得比他们更好。
我想把这些项目都介绍给你们,任何人都可以根据他们所需要的进行选择。
Dockerui
这是它的Github主页,https://github.com/crosbymichael/dockerui.
你可以发现海鸥的UI是有点像Dockerui。因为我们都使用了Bootstrap和AngularJS作为前端框架。它是一个很好的项目并且在Github上有差不多2000个关注。
海鸥从Dockerui中学习了很多,包括使用JQuery.Gritter作为网站通知。但Dockerui的界面不够简洁,而且它没有考虑到国际化的需求,而我们考虑到了。我们愿意为全世界的开发者多做些事情。Dockerui还没有实现搜索功能而海鸥则很擅长这点。
Dockerui和海鸥是同类型产品,用于监控Docker。你没必要同时使用他们。而我们的目标就是用一个更友好、更实用的UI满足用户,并且取代Dockerui。
Zdocker
这是它的Github主页,https://github.com/love320/Zdocker.
Zdocker做了同类的事情来监控Docker镜像和容器。但它是使用Java实现的,而且没有提供Docker镜像,而且人们很难使用和学习。
这只能算是个人项目,我并不建议你去使用。因为目前为止我也不知道该怎样去运行它。
Shipyard
这是它的Github主页,https://github.com/shipyard/shipyard.
Shipyard设计来管理一个Docker集群。你必须输入服务器的SSH认证代码才能部署Shipyard引擎。然后你就可以通过命令行或者Web界面在你管理的服务器上部署容器了。
它和海鸥是非常不同的,因为海鸥仅仅是监控Docker而不会要求更多的权限。因此你可以使用Shipyard作为管理系统,同时使用海鸥来监控Docker。
CAdvisor
这是它的Github主页,https://github.com/google/cadvisor.
CAdvisor来自于Google,它主要是为了分析容器的资源。你可以使用它来监控你的容器占用CPU或者内存的历史情况。
然后,你不能用CAdivsor来管理你的镜像和容器。
Docker Registry Web
这是它的Github主页,https://github.com/atc-/docker-registry-web.
这是为Docker参与设计的Web界面。它的UI展示不错但你必须手动添加私有仓库地址。它用了Cookies来存储这个地址所以每次你运行时都要重新添加。
当我尝试去搜索Docker镜像时程序崩溃了。当我尝试去或者镜像详细信息的时候它显示“方法未授权”。
我希望他们可以在我们添加私有仓库时就默认添加Docker官方仓库。但我不太可能因为http://registry.hub.docker.com不支持CORS。
Docker Registry UI
这是它的Github主页,https://github.com/worksap-ate/docker-registry-ui.
这也是为Docker仓库设计的Web界面。它能用但是UI不是很好。
Docker Register Frontend
这是它的Github主页,https://github.com/kwk/docker-registry-frontend.
这几乎是跟Docker-registry-web和Docker-registry-ui是一样的东西。
一个markdown编辑器editor.md
Editor.md
Editor.md : The open source embeddable online markdown editor (component), based on CodeMirror & jQuery & Marked.
Features
- Support Standard Markdown / CommonMark and GFM (GitHub Flavored Markdown);
- Full-featured: Real-time Preview, Image (cross-domain) upload, Preformatted text/Code blocks/Tables insert, Code fold, Search replace, Read only, Themes, Multi-languages, L18n, HTML entities, Code syntax highlighting…;
- Markdown Extras : Support ToC (Table of Contents), Emoji, Task lists, @links.html"">@Links…;
- Compatible with all major browsers (IE8+), compatible Zepto.js and iPad;
- Support decode & fliter of the HTML tags & attributes;
- Support TeX (LaTeX expressions, Based on KaTeX), Flowchart and Sequence Diagram of Markdown extended syntax;
- Support AMD/CMD (Require.js & Sea.js) Module Loader, and Custom/define editor plugins;
Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror、jQuery 和 Marked 构建。
主要特性
- 支持通用 Markdown / CommonMark 和 GFM (GitHub Flavored Markdown) 风格的语法,也可变身为代码编辑器;
- 支持实时预览、图片(跨域)上传、预格式文本/代码/表格插入、代码折叠、跳转到行、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能;
- 支持 ToC(Table of Contents)、Emoji表情、Task lists、@links.html">@链接等 Markdown 扩展语法;
- 支持 TeX 科学公式(基于 KaTeX)、流程图 Flowchart 和 时序图 Sequence Diagram;
- 支持识别和解析 HTML 标签,并且支持自定义过滤标签及属性解析,具有可靠的安全性和几乎无限的扩展性;
- 支持 AMD / CMD 模块化加载(支持 Require.js & Sea.js),并且支持自定义扩展插件;
- 兼容主流的浏览器(IE8+)和 Zepto.js,且支持 iPad 等平板设备;
Examples
https://pandao.github.io/editor.md/examples/index.html
Download & install
Bower install :
bower install editor.md
Usages
HTML:
```html