What is Vant
Brief introduction
Vant is like a set of open source-based component library Vue2.0 of Mobile. By Vant, you can quickly build a unified style pages, improve development efficiency. At present, nearly 50 components that are widely used in each mobile terminal has Like business. Vant aimed at faster and easier development based on Vue's beautiful and easy to use mobile site. Like components are derived from the properties there are micro-mall business, and there are tested through praise business, more reliable complete detailed documentation of Chinese specialized team of designers to maintain visual standard, unified and elegant support babel-plugin-import single test coverage Over 90% recommendation rate with webpack, babel use Vant.
There Chan
After reading, you might ask, "There are like" What the hell?
Seems to be a micro-mall, to help you build a site like derivative, and has been listed in Hong Kong seems to be the company web site Zhejiang, Tell me what network had registered in 2012, but I have not heard before.
Since it is a platform company, so the technology should be.
Official website: https: //www.youzan.com/ from_source = baidu_pz_shouye_0?
Popularity
How popular? Frankly, I do not know, but based on not very good. Because it is impossible to count how many people use only by the star on github, the major technical forums, to determine the frequency of occurrence of blog popularity.
I Baidu search "vue.js ui library", there have been many ui library, but did not see a trace vant, mainly element, vux, ivew such as these. However, since the project in use, but also learn about good.
Recommend 21 top-Vue UI library!
http://blog.talkingdata.com/?p=5993
Recommend 10 common Vue UI library
https://www.sohu.com/a/239663533_468707
2018 vue nine popular front-end UI framework
https://blog.csdn.net/qq_36538012/article/details/82152052
characteristic
- After 50+ online business to praise test components
- Unit test coverage more than 80%
- Perfect English documentation and samples
- Support babel-plugin-import
- Support TypeScript
- Support for SSR
important
Introduction says very clearly, vant is mobile, that is suitable for mobile phone vue end, if you develop a pc end of vue, it might not take vant component library.
In addition, it is in addition to the mobile components, there is a special small program component library, the official website address is:
https://youzan.github.io/vant-weapp/#/intro
Basic knowledge of Vant
Pronunciation
Won (/ vænt /)
English did not vant this word.
Official website
https://youzan.github.io/vant/#/zh-CN/intro
github Address:
https://github.com/youzan/vant/blob/HEAD/README.zh-CN.md
default is English, you can click on the Chinese version. Currently (2019-1-5) has 7108 star.
Open the original agreement
MIT.
It is safe to use.
Start writing code
vue.js environment
Because vant vue is based, so by default you should have installed vue development environment. Including nodejs, npm so on.
Installation vant
NPM
NPM and UAV -S
YARN
vant add yarn
CDN
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css">
<!-- 引入组件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script>Explanation
Official website lists the three installation methods (not three steps to complete the step by step oh). I generally use or install npm.
What yarn that?
Official website: fast, reliable, secure dependency management tool. It can be understood as the package manager. Similar npm. There are already some people from npm turned to the yarn.
Official website: HTTPS: //yarnpkg.com/zh-Hans/
GitHub: HTTPS: //github.com/yarnpkg/yarn/
currently has 34,201 star.
Chinese website? : Https: //yarn.bootcss.com
Profile of yarn in a blog:
the Yarn released in October 2016, and quickly have 24000 Star on Github. The only npm 12000 Star. The project is maintained by some senior developers, including Sebastian McKenzie (Babel.js) and Yehuda Katz (Ember.js, Rust, Bundler, etc.).
Package
50 a plurality of components, each component has a detailed example code official, most commendable is a right side shows a corresponding UI, very user-friendly, intuitive so it is easy to learn. Such as button components:
https://youzan.github.io/vant/#/zh-CN/button
postscript
Before writing code, you should first see more style guide vue.js official website, it will guide you better coding, including naming conventions and other components, in my references listed address. vant in this style is recommended (see: https: //youzan.github.io/vant/#/zh-CN/style-guide). While some people may say: bad style, running the code looks like :(
appendix
version
Currently (19-1-5) for the latest version is 1.5.1
version updates more frequently, you can see more active. At least two versions of each month, many have almost 10 version.
Official website lists each version of content, and the corresponding PR (pull request) number.
The oldest lists 0.5.2 version (2017.4.26). The following three important versions listed.
v1.5.1
2019-01-01
Improvements
Card: New price, num slot 2416 #
Slider: 2373 New button slot #
Slider: new active-color, inactive-color attribute 2374 #
Tabbar: new active-color property # 2372
Sku: new sku-selected event # 2386
Bug Fixes
style problems too long to repair Card # 2414 describes
the repair button assembly ContactList unregistered dependency issues # 2415
fix problems in the file Icon agreement page can not be displayed # 2385
v1.0.0
2018-03-19
Breaking changes
New List # 682 assembly
new assembly Collapse # 674
construct: Upgrade to webpack 4, optimize build configuration 693 #
the Popup: new lock-scroll attribute, waste lock-on-scroll, prevent- scroll attribute 688 #
Waterfall assembly no longer maintained, it is recommended to use the List component instead of # 683
Improvements
AddressEdit: new show-delete attribute 716 #
SwipeCell: Swipe optimization animation fluency 685 #
Field,: au configured to support the maximum size / minimum height of 718 #
Locale: streamlining the configuration document i18n 701 #
PullRefresh: Support manual trigger loading animation # 684
switch: add size property 723 supports custom sizes #
Sku: amount new head slots 705 #
Sku: optimization DOM structure 704 #
the tab: support switching by sliding gesture # 695 # 694
the tag: adjusting label style # 689
Toast: support by Vue.use registration # 690
Bug Fixes
fix the problem at the border is not showing Actionsheet # 686
repair AddressEdit problem when the data changes provinces, municipalities not selected properly # 680
repair Stepper value overflow issue # 691
restorations Badge selected font weight # 687
v0.5.2
2017-04-26
Improvements
added Picker assembly 20 # test
new Col & Row test assembly # 16
New Uploader unit tests # 9
Bug Fixes
fix Webpack packaging error # 21
to fix the problem is not removed when Dom node Toast # 19 closed
prosthetic components style issue # 5
Reference material
vant official website
vant github official website
vuejs official website - Style Guide
article to understand the difference between npm, yarn, pnpm
2019.1.5