mirror of
				https://gitee.com/vant-contrib/vant.git
				synced 2025-10-27 01:32:10 +08:00 
			
		
		
		
	docs: adjust quickstart (#7293)
This commit is contained in:
		
							parent
							
								
									88b88f56ae
								
							
						
					
					
						commit
						9b635a45ef
					
				| @ -15,7 +15,7 @@ | ||||
| 
 | ||||
| ### 本地开发 | ||||
| 
 | ||||
| 按照下面的步骤操作,即可在本地开发 Vant 组件 | ||||
| 按照下面的步骤操作,即可在本地开发 Vant 组件。 | ||||
| 
 | ||||
| ```bash | ||||
| # 克隆仓库 | ||||
| @ -47,7 +47,7 @@ vant | ||||
| 
 | ||||
| ### 添加新组件 | ||||
| 
 | ||||
| 添加新组件时,请按照下面的目录结构组织文件,并在 `vant.config.js` 中配置组件名称 | ||||
| 添加新组件时,请按照下面的目录结构组织文件,并在 `vant.config.js` 中配置组件名称。 | ||||
| 
 | ||||
| ``` | ||||
| src | ||||
| @ -78,7 +78,7 @@ src | ||||
| 
 | ||||
| ### 同步最新代码 | ||||
| 
 | ||||
| 提 Pull Request 前,请依照下面的流程同步主仓库的最新代码 | ||||
| 提 Pull Request 前,请依照下面的流程同步主仓库的最新代码: | ||||
| 
 | ||||
| ```bash | ||||
| # 添加主仓库到 remote,作为 fork 后仓库的上游仓库 | ||||
|  | ||||
| @ -35,7 +35,7 @@ yarn add vant | ||||
| 
 | ||||
| ### 1. Import on demand | ||||
| 
 | ||||
| Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) to import components on demand | ||||
| Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) to import components on demand. | ||||
| 
 | ||||
| ```bash | ||||
| # Install plugin | ||||
| @ -72,7 +72,7 @@ module.exports = { | ||||
| import { Button } from 'vant'; | ||||
| ``` | ||||
| 
 | ||||
| > If you are using TypeScript,please use [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) instead | ||||
| > If you are using TypeScript,please use [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) instead. | ||||
| 
 | ||||
| ### 2. Manually import | ||||
| 
 | ||||
|  | ||||
| @ -2,7 +2,7 @@ | ||||
| 
 | ||||
| ### 脚手架 | ||||
| 
 | ||||
| 在新项目中使用 Vant 时,推荐使用 Vue 官方提供的脚手架 [Vue Cli](https://cli.vuejs.org/zh/) 创建项目 | ||||
| 在新项目中使用 Vant 时,推荐使用 Vue 官方提供的脚手架 [Vue Cli](https://cli.vuejs.org/zh/) 创建项目。 | ||||
| 
 | ||||
| ```bash | ||||
| # 安装 Vue Cli | ||||
| @ -21,7 +21,7 @@ vue ui | ||||
| 
 | ||||
| ### 通过 npm 安装 | ||||
| 
 | ||||
| 在现有项目中使用 Vant 时,可以通过`npm`或`yarn`安装 | ||||
| 在现有项目中使用 Vant 时,可以通过 `npm` 或 `yarn` 安装: | ||||
| 
 | ||||
| ```bash | ||||
| # 通过 npm 安装 | ||||
| @ -47,7 +47,7 @@ yarn add vant | ||||
| 
 | ||||
| ### 方式一. 自动按需引入组件 (推荐) | ||||
| 
 | ||||
| [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式 | ||||
| [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。 | ||||
| 
 | ||||
| ```bash | ||||
| # 安装插件 | ||||
| @ -89,7 +89,7 @@ import { Button } from 'vant'; | ||||
| 
 | ||||
| ### 方式二. 手动按需引入组件 | ||||
| 
 | ||||
| 在不使用插件的情况下,可以手动引入需要的组件 | ||||
| 在不使用插件的情况下,可以手动引入需要的组件。 | ||||
| 
 | ||||
| ```js | ||||
| import Button from 'vant/lib/button'; | ||||
| @ -98,7 +98,7 @@ import 'vant/lib/button/style'; | ||||
| 
 | ||||
| ### 方式三. 导入所有组件 | ||||
| 
 | ||||
| Vant 支持一次性导入所有组件,引入所有组件会增加代码包体积,因此不推荐这种做法 | ||||
| Vant 支持一次性导入所有组件,引入所有组件会增加代码包体积,因此不推荐这种做法。 | ||||
| 
 | ||||
| ```js | ||||
| import Vue from 'vue'; | ||||
| @ -112,7 +112,7 @@ Vue.use(Vant); | ||||
| 
 | ||||
| ### 方式四. 通过 CDN 引入 | ||||
| 
 | ||||
| 使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接,之后你可以通过全局变量`vant`访问到所有组件。 | ||||
| 使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接,之后你可以通过全局变量 `vant` 访问到所有组件。 | ||||
| 
 | ||||
| ```html | ||||
| <!-- 引入样式文件 --> | ||||
| @ -145,14 +145,14 @@ Vue.use(Vant); | ||||
| 
 | ||||
| ### Rem 适配 | ||||
| 
 | ||||
| Vant 中的样式默认使用`px`作为单位,如果需要使用`rem`单位,推荐使用以下两个工具: | ||||
| Vant 中的样式默认使用 `px` 作为单位,如果需要使用 `rem` 单位,推荐使用以下两个工具: | ||||
| 
 | ||||
| - [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 是一款 postcss 插件,用于将单位转化为 rem | ||||
| - [lib-flexible](https://github.com/amfe/lib-flexible) 用于设置 rem 基准值 | ||||
| 
 | ||||
| #### PostCSS 配置 | ||||
| 
 | ||||
| 下面提供了一份基本的 postcss 配置,可以在此配置的基础上根据项目需求进行修改 | ||||
| 下面提供了一份基本的 postcss 配置,可以在此配置的基础上根据项目需求进行修改。 | ||||
| 
 | ||||
| ```js | ||||
| module.exports = { | ||||
|  | ||||
| @ -31,7 +31,7 @@ Vant 使用了 [Less](http://lesscss.org/) 对样式进行预处理,并内置 | ||||
| 
 | ||||
| #### 按需引入样式(推荐) | ||||
| 
 | ||||
| 在 babel.config.js 中配置按需引入样式源文件,注意 babel6 不支持按需引入样式,请手动引入样式 | ||||
| 在 babel.config.js 中配置按需引入样式源文件,注意 babel6 不支持按需引入样式,请手动引入样式。 | ||||
| 
 | ||||
| ```js | ||||
| module.exports = { | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user