mirror of
				https://gitee.com/vant-contrib/vant.git
				synced 2025-10-31 03:22:08 +08:00 
			
		
		
		
	
		
			
				
	
	
		
			85 lines
		
	
	
		
			2.1 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
			
		
		
	
	
			85 lines
		
	
	
		
			2.1 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
| <p>
 | ||
|     <a href="https://github.com/youzan/"><img alt="有赞logo" width="36px" src="https://img.yzcdn.cn/public_files/2017/02/09/e84aa8cbbf7852688c86218c1f3bbf17.png" alt="youzan">
 | ||
|     </a>
 | ||
| </p>
 | ||
| <p align="center">
 | ||
|     <img alt="项目logo" src="https://img.yzcdn.cn/upload_files/2017/04/20/FlkVrSlOr-SGK9qQqtilN6-IFZyT.png">
 | ||
| </p>
 | ||
| <p align="center">A Vue.js 2.0 Mobile UI at YouZan</p>
 | ||
| 
 | ||
| [](https://travis-ci.org/youzan/vant) [](https://codecov.io/github/youzan/vant?branch=dev) [](https://www.npmjs.com/package/vant) [](https://www.npmjs.com/package/vant) 
 | ||
|  
 | ||
| [访问中文版](./README.zh-CN.md)
 | ||
| 
 | ||
| ## Install
 | ||
| 
 | ||
| ```shell
 | ||
| npm i -S vant
 | ||
| ```
 | ||
|  
 | ||
| ## Usage
 | ||
| 
 | ||
| ### Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
 | ||
| 
 | ||
|    ```js
 | ||
|    // .babelrc or babel-loader option
 | ||
|    {
 | ||
|      "plugins": [
 | ||
|        ["import", { "libraryName": "vant", "style": true }]
 | ||
|      ]
 | ||
|    }
 | ||
|    ```
 | ||
| 
 | ||
|    Then you can import components from vant, equivalent to import manually below.
 | ||
| 
 | ||
|    ```js
 | ||
|    // import js and css modularly, parsed by babel-plugin-import
 | ||
|    import { Button } from 'vant';
 | ||
|    ```
 | ||
| 
 | ||
| ### Manually import
 | ||
| 
 | ||
|    ```jsx
 | ||
|    import { Button } from 'vant';
 | ||
|    import 'vant/lib/vant-css/button.css';
 | ||
|    ```
 | ||
|  
 | ||
|  
 | ||
| ### Import all components
 | ||
|  
 | ||
| ```javascript
 | ||
| import Vue from 'vue';
 | ||
| import vant from 'vant';
 | ||
| import 'vant/lib/vant-css/index.css';
 | ||
| 
 | ||
| Vue.use(vant);
 | ||
| ```
 | ||
|  
 | ||
| ## Development
 | ||
| 
 | ||
| ### Add a new component
 | ||
| 
 | ||
| ```shell
 | ||
| make init componentName
 | ||
| ```
 | ||
| 
 | ||
| ### Start coding
 | ||
| 
 | ||
| Start development mode:
 | ||
| 
 | ||
| ```shell
 | ||
| npm run dev
 | ||
| ```
 | ||
| 
 | ||
| Visit [http://localhost:8080](http://localhost:8080) to see an example of all components.
 | ||
| 
 | ||
| ## Preview
 | ||
| 
 | ||
| You can scan the following QR code to access the demo:
 | ||
| 
 | ||
| 
 | ||
|  
 | ||
| ## LICENSE
 | ||
| 
 | ||
| [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89)
 |