Skip to content

Commit

Permalink
docs: update install guide
Browse files Browse the repository at this point in the history
  • Loading branch information
chenjiahan committed Oct 24, 2020
1 parent c6d10ab commit 2a5c67d
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 103 deletions.
8 changes: 3 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,13 @@
## Install

```bash
# Using npm
# Install vant 2.x for Vue 2 project
npm i vant -S

# Using yarn
yarn add vant
# Install vant 3.x for Vue 3 project
npm i vant@next -S
```

> Tips: Please install Vant 3.0 for Vue 3 projects, see [issue#7035](https://github.com/youzan/vant/issues/7035).
## Quickstart

```js
Expand Down
8 changes: 3 additions & 5 deletions README.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,15 +44,13 @@ Vant 是**有赞前端团队**开源的移动端组件库,于 2016 年开源
## 安装

```bash
# 通过 npm 安装
# Vue 2 项目,安装 Vant 2.x 版本:
npm i vant -S

# 通过 yarn 安装
yarn add vant
# Vue 3 项目,安装 Vant 3.x 版本:
npm i vant@next -S
```

> Tips: Vue 3 项目请安装 Vant 3.0,参见 [issue#7035](https://github.com/youzan/vant/issues/7035)
## 快速上手

```js
Expand Down
88 changes: 44 additions & 44 deletions docs/markdown/quickstart.en-US.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,50 @@
# Quickstart

### Starter kit
## Install

We recomment to use [Vue Cli](https://cli.vuejs.org/) to create a project.
### npm

```bash
# Install vant 2.x for Vue 2 project
npm i vant -S

# Install vant 3.x for Vue 3 project
npm i vant@next -S
```

### CDN

The easiest way to use Vant is to include a CDN link in the html file, after which you can access all components via the global variable `vant`.

```html
<!-- import style -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css"
/>

<!-- import script -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script>

<script>
// Render the Button component
new Vue({
el: '#app',
template: `<van-button>Button</van-button>`,
});
// Call function component
vant.Toast('Message');
// Register Lazyload directive
Vue.use(vant.Lazyload);
</script>
```

### CLI

We recomment to use [Vue Cli](https://cli.vuejs.org/) to create a new project.

```bash
# Install Vue Cli
Expand All @@ -19,18 +61,6 @@ vue ui

In the GUI, click on 'Dependencies' -> `Install Dependencies` and add `vant` to the dependencies.

### Install

```bash
# Using npm
npm i vant -S

# Using yarn
yarn add vant
```

> Tips: Please install Vant 3.0 for Vue 3 projects, see [issue#7035](https://github.com/youzan/vant/issues/7035)
## Usage

### 1. Import on demand
Expand Down Expand Up @@ -93,36 +123,6 @@ Vue.use(Vant);

> If you configured babel-plugin-import, you won't be allowed to import all components.
### 4. CDN

The easiest way to use Vant is to include a CDN link in the html file, after which you can access all components via the global variable `vant`.

```html
<!-- import style -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css"
/>

<!-- import script -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script>

<script>
// Render the Button component
new Vue({
el: '#app',
template: `<van-button>Button</van-button>`,
});
// Call function component
vant.Toast('Message');
// Register Lazyload directive
Vue.use(vant.Lazyload);
</script>
```

## Other

### Rem units
Expand Down
106 changes: 57 additions & 49 deletions docs/markdown/quickstart.zh-CN.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,57 @@
# 快速上手

### 脚手架
### 介绍

在新项目中使用 Vant 时,推荐使用 Vue 官方提供的脚手架 [Vue Cli](https://cli.vuejs.org/zh/) 创建项目。
通过本章节你可以了解到 Vant 的安装方式和组件使用方法。

## 安装

### 通过 npm 安装

在现有项目中使用 Vant 时,可以通过 `npm``yarn` 进行安装:

```bash
# Vue 2 项目,安装 Vant 2.x 版本:
npm i vant -S

# Vue 3 项目,安装 Vant 3.x 版本:
npm i vant@next -S
```

### 通过 CDN 安装

使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接,之后你可以通过全局变量 `vant` 访问到所有组件。

```html
<!-- 引入样式文件 -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css"
/>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script>

<script>
// 在 #app 标签下渲染一个按钮组件
new Vue({
el: '#app',
template: `<van-button>按钮</van-button>`,
});
// 调用函数组件,弹出一个 Toast
vant.Toast('提示');
// 通过 CDN 引入时不会自动注册 Lazyload 组件
// 可以通过下面的方式手动注册
Vue.use(vant.Lazyload);
</script>
```

### 通过脚手架安装

在新项目中使用 Vant 时,推荐使用 Vue 官方提供的脚手架 [Vue Cli](https://cli.vuejs.org/zh/) 创建项目并安装 Vant。

```bash
# 安装 Vue Cli
Expand All @@ -17,27 +66,17 @@ vue ui

![](https://img.yzcdn.cn/vant/vue-cli-demo-201809032000.png)

在图形化界面中,点击`依赖` -> `安装依赖`,然后将 `vant` 添加到依赖中即可。

### 通过 npm 安装

在现有项目中使用 Vant 时,可以通过 `npm``yarn` 安装:

```bash
# 通过 npm 安装
npm i vant -S
在图形化界面中,点击 `依赖` -> `安装依赖`,然后将 `vant` 添加到依赖中即可。

# 通过 yarn 安装
yarn add vant
```

> Tips: Vue 3 项目请安装 Vant 3.0,参见 [issue#7035](https://github.com/youzan/vant/issues/7035)
## 示例

### 示例工程

我们提供了一个基于 Vue Cli 的[示例工程](https://github.com/youzan/vant-demo)示例工程会帮助你了解如下内容
我们提供了丰富的[示例工程](https://github.com/youzan/vant-demo)通过示例工程你可以了解如下内容

- 基于 Vant 搭建单页面应用,配置按需引入组件
- 基于 Vue Cli 和 Vant 搭建应用
- 基于 Nuxt 和 Vant 搭建应用
- 配置按需引入组件
- 配置基于 Rem 的适配方案
- 配置基于 Viewport 的适配方案
- 配置基于 TypeScript 的工程
Expand Down Expand Up @@ -110,37 +149,6 @@ Vue.use(Vant);

> Tips: 配置按需引入后,将不允许直接导入所有组件。
### 方式四. 通过 CDN 引入

使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接,之后你可以通过全局变量 `vant` 访问到所有组件。

```html
<!-- 引入样式文件 -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css"
/>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script>

<script>
// 在 #app 标签下渲染一个按钮组件
new Vue({
el: '#app',
template: `<van-button>按钮</van-button>`,
});
// 调用函数组件,弹出一个 Toast
vant.Toast('提示');
// 通过 CDN 引入时不会自动注册 Lazyload 组件
// 可以通过下面的方式手动注册
Vue.use(vant.Lazyload);
</script>
```

## 进阶用法

### Rem 适配
Expand Down

0 comments on commit 2a5c67d

Please sign in to comment.