基于 Vue.js 实现的精致移动端组件库——cube-ui

咪亚

"\u003Cdiv\u003E\u003Ch1\u003E介绍\u003C\u002Fh1\u003E\u003Cp\u003Ecube-ui是一个基于Vue.js实现的移动端组件库，它是由滴滴内部组件库精简提炼出来的，追求接近原生的体验！\u003C\u002Fp\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp9.pstatp.com\u002Flarge\u002Fpgc-image\u002Fa029f14fecf74934b8b0373fecbe9aa4\" img_width=\"1920\" img_height=\"871\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Ch1\u003E特性\u003C\u002Fh1\u003E\u003Cul\u003E\u003Cli\u003E\u003Cstrong\u003E质量可靠\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E由滴滴内部组件库精简提炼而来，经历了业务一年多的考验，并且每个组件都有充分单元测试，为后续集成提供保障。\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Cstrong\u003E体验极致\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E以迅速响应、动画流畅、接近原生为目标，在交互体验方面追求极致。\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Cstrong\u003E标准规范\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E遵循统一的设计交互标准，高度还原设计效果；接口标准化，统一规范使用方式，开发更加简单高效。\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Cstrong\u003E扩展性强\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。\u003C\u002Fp\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp9.pstatp.com\u002Flarge\u002Fpgc-image\u002F8e766bba2cbb4f75a318665d8f569328\" img_width=\"489\" img_height=\"699\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Ch1\u003EGithub\u003C\u002Fh1\u003E\u003Cp\u003E此组件库在Github上star数达6k+,还是非常受人欢迎的，至今仍在积极维护\u003C\u002Fp\u003E\u003Cblockquote\u003E\u003Cp\u003Ehttps:\u002F\u002Fgithub.com\u002Fdidi\u002Fcube-ui\u002F\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Ch1\u003E快速上手\u003C\u002Fh1\u003E\u003Cp\u003E官方文档提供了新手教程项目，感兴趣的可以去看看\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E脚手架\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E如果你正在使用新版本的 Vue CLI vue-cli@3，那么推荐你直接使用 vue-cli-plugin-cube-ui 插件。在你初始化完项目后直接执行 vue add cube-ui 即可\u003C\u002Fp\u003E\u003Cp\u003E如果你打算用在一个新项目中使用 cube-ui，可以通过官方提供的一套基于 vue-cli 实现的脚手架模板去初始化 cube-ui 项目的配置和基础代码，这样你就可以忽略安装步骤，直接看使用部分。\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E安装\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E此安装部分只针对于 vue-cli < 3 的情况\u003C\u002Fp\u003E\u003Cpre\u003E npm install cube-ui --save\u003Cbr\u003E\u003C\u002Fpre\u003E\u003Cp\u003Ecube-ui 搭配 webpack 2+ 支持后编译和普通编译 2 种构建方式（默认使用后编译），使用前都需要修改应用的依赖和配置。\u003C\u002Fp\u003E\u003Cp\u003E其中有一些配置就不在此浪费篇幅，大家直接去官网文档查看\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E引入\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E全部或者按需引入\u003C\u002Fp\u003E\u003Cpre\u003Eimport Vue from &#x27;vue&#x27;\u003Cbr\u003Eimport Cube from &#x27;cube-ui&#x27;\u003Cbr\u003EVue.use(Cube)\u003Cbr\u003E\u003C\u002Fpre\u003E\u003Chr\u003E\u003Cpre\u003Eimport {\u003Cbr\u003E \u002F* eslint-disable no-unused-vars *\u002F\u003Cbr\u003E Style,\u003Cbr\u003E Button\u003Cbr\u003E} from &#x27;cube-ui\u003Cbr\u003E\u003C\u002Fpre\u003E\u003Chr\u003E\u003Ch1\u003E国际化\u003C\u002Fh1\u003E\u003Cp\u003Ecube-ui 默认是用的中文语言包，并且已经注册了。cube-ui 内部也内置了对应的英文语言包，但是你需要如下的逻辑来注册语言包，同时切换至对应的语言。\u003C\u002Fp\u003E\u003Cpre\u003Eimport Vue from &#x27;vue&#x27;\u003Cbr\u003E import { Locale } from &#x27;cube-ui&#x27;\u003Cbr\u003E import enUSMessages from &#x27;cube-ui\u002Fsrc\u002Flocale\u002Flang\u002Fen-US&#x27;\u003Cbr\u003E Vue.use(Locale)\u003Cbr\u003E \u002F\u002F 切换至英语，并且缓存当前语言包\u003Cbr\u003E Locale.use(&#x27;en-US&#x27;, enUSMessages)\u003Cbr\u003E\u003C\u002Fpre\u003E\u003Chr\u003E\u003Ch1\u003E组件预览\u003C\u002Fh1\u003E\u003Cul\u003E\u003Cli\u003E按钮，提供了各种类型、样子、状态以及图标。\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Fe87c94180cb749bbaa33ea675e4b61ac\" img_width=\"383\" img_height=\"717\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cul\u003E\u003Cli\u003ELoading\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F0217c301f41e485f8d05a45756359b13\" img_width=\"394\" img_height=\"719\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cul\u003E\u003Cli\u003ETips\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F039a43b5b8434727bc751e73f4cc3846\" img_width=\"373\" img_height=\"721\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cul\u003E\u003Cli\u003EToolbar\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp9.pstatp.com\u002Flarge\u002Fpgc-image\u002F2490696b26284f1095ae4b8286f4dc33\" img_width=\"379\" img_height=\"714\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cul\u003E\u003Cli\u003ETabBar\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002Fc79b30b0bcf14c7986187f86adf4f54f\" img_width=\"359\" img_height=\"697\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cul\u003E\u003Cli\u003E表单类\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F776cc8a68b49444e8fabfd953ae3d39a\" img_width=\"380\" img_height=\"733\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Ff97b022841a8404f8926c48df618e57f\" img_width=\"359\" img_height=\"728\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Fa62b681e8169484e947e37fd308a211b\" img_width=\"367\" img_height=\"720\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002Ff256d8713e5d410799ec95d66dc97e1a\" img_width=\"374\" img_height=\"738\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp9.pstatp.com\u002Flarge\u002Fpgc-image\u002F8ba6f2107b5645e586d962411bd6c68e\" img_width=\"376\" img_height=\"732\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002Fda156f95311645d6bd286b3d4dfad2a6\" img_width=\"368\" img_height=\"735\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cul\u003E\u003Cli\u003E弹出层\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F48ab86acf81043c38e470a452f61b08d\" img_width=\"372\" img_height=\"713\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp9.pstatp.com\u002Flarge\u002Fpgc-image\u002F6608b9a59a7640e9a0a074bc3a41a486\" img_width=\"377\" img_height=\"727\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F8e22a74438f446de9b4fe6e1bd0d9141\" img_width=\"375\" img_height=\"714\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp9.pstatp.com\u002Flarge\u002Fpgc-image\u002F9caf51eab559411bb5ce7b84c503a824\" img_width=\"372\" img_height=\"708\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp9.pstatp.com\u002Flarge\u002Fpgc-image\u002F5de527be48eb4921b0cbc2fd8908f528\" img_width=\"371\" img_height=\"707\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F3a85185c800e4df99cfb51b91b2e15b5\" img_width=\"370\" img_height=\"712\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002Fab9e732fc40f4622b812d35f399571d2\" img_width=\"372\" img_height=\"713\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002Ff807dc7a8cec4dc39732cf57a47e5264\" img_width=\"372\" img_height=\"707\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F055834d9bf744cde9f95b156e50e6d1e\" img_width=\"368\" img_height=\"709\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cul\u003E\u003Cli\u003E滚动\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002Fc061964458994cd58dff0a1eecb3d140\" img_width=\"371\" img_height=\"730\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp9.pstatp.com\u002Flarge\u002Fpgc-image\u002F249f853226e64b72b447e00416969b61\" img_width=\"370\" img_height=\"717\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F8a275c6ec1e74c19a8a2576cd4a9fe8c\" img_width=\"367\" img_height=\"730\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp9.pstatp.com\u002Flarge\u002Fpgc-image\u002Fb598b2e4821d4cb690bdd02bf8bcac41\" img_width=\"381\" img_height=\"723\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F2691a4111ce3444bb046566178a0a743\" img_width=\"381\" img_height=\"723\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F762bf07698d84480826cb8be2174034c\" img_width=\"380\" img_height=\"707\" alt=\"基于 Vue.js 实现的精致移动端组件库——cube-ui\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Chr\u003E\u003Cp\u003E以上是cube-ui的部分组件预览，可以看出是非常丰富的，基本满足项目的日常开发，其接近原生的追求值得推荐\u003C\u002Fp\u003E\u003Ch1\u003E总结\u003C\u002Fh1\u003E\u003Cp\u003E目前的现状是各类框架组件的共同打造的前端生态，但是日常使用最多的还是那些积极维护以及使用人数多的组件，cube-ui作为滴滴内部组件的提炼，其质量还是相当高的，甚至你还可以用它开发出另一个打车App，赶紧去尝试下吧!\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E"'.slice(6, -6),      groupId: '6726336100299702795
8 d5 G# s' v" E$ e- W+ o来源：https://www.toutiao.com/a6726336100299702795/
/ g. j: `% W  _. P, f& x& w; O免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！