blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[Doc] update quickstart.md

Browse Source
This commit is contained in:
陈嘉涵 2019-05-16 11:09:09 +08:00
parent 77b0f8e6a6
commit d6f5cd3a81
5 changed files with 58 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
docs/markdown/quickstart.en-US.md
View File

@ -10,34 +10,26 @@ npm install -g @vue/cli
# Create a project # Create a project
vue create hello-world vue create hello-world
```
After the creation is complete, you can open the GUI by command.
```bash
# Open GUI # Open GUI
vue ui vue ui
``` ```
In the GUI, click on 'Dependencies' -> `Install Dependencies` and add `vant` to the dependencies. <img width="100%" style="border-radius: 3px; box-shadow: 0 1px 1px rgba(0, 0, 0, .1);" src="https://img.yzcdn.cn/vant/vue-cli-demo-201809030812.png" >
<img width="100%" style="box-shadow: 0 1px 1px rgba(0, 0, 0, .1); border-radius: 3px;" src="https://img.yzcdn.cn/vant/vue-cli-demo-201809030812.png" > In the GUI, click on 'Dependencies' -> `Install Dependencies` and add `vant` to the dependencies.
### Install ### Install
#### NPM ```bash
# npm
```shell
npm i vant -S npm i vant -S
```
#### YARN # yarn
```shell
yarn add vant yarn add vant
``` ```
#### CDN ### CDN
```html ```html
<!-- import style --> <!-- import style -->
@ -48,12 +40,14 @@ yarn add vant
<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
``` ```
### Usage ## Usage
#### 1. Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended) ### 1. Import on demand
Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) to import components on demand
```bash ```bash
# Install babel-plugin-import # Install plugin
npm i babel-plugin-import -D npm i babel-plugin-import -D
``` ```
@ -82,22 +76,21 @@ module.exports = {
}; };
``` ```
Then you can import components from vant, equivalent to import manually below.
```js ```js
// Then you can import components from vant
import { Button } from 'vant'; 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. Manually import
```js ```js
import Button from 'vant/lib/button'; import Button from 'vant/lib/button';
import 'vant/lib/button/style'; import 'vant/lib/button/style';
``` ```
#### 3. Import all components ### 3. Import all components
```js ```js
import Vue from 'vue'; import Vue from 'vue';
@ -109,6 +102,7 @@ Vue.use(Vant);
> If you configured babel-plugin-import, you won't be allowed to import all components. > If you configured babel-plugin-import, you won't be allowed to import all components.
## Other
### Rem units ### Rem units

48
docs/markdown/quickstart.zh-CN.md
View File

@ -10,43 +10,35 @@ npm install -g @vue/cli
# 创建一个项目 # 创建一个项目
vue create hello-world vue create hello-world
```
创建完成后，可以通过命令打开图形化界面 # 创建完成后，可以通过命令打开图形化界面，如下图所示
```bash
# 打开图形化界面
vue ui vue ui
``` ```
在图形化界面中，点击`依赖` -> `安装依赖`，然后将 `vant` 添加到依赖中即可。 <img width="100%" style="border-radius: 3px; box-shadow: 0 1px 1px rgba(0, 0, 0, .1);" src="https://img.yzcdn.cn/vant/vue-cli-demo-201809032000.png" >
<img width="100%" style="box-shadow: 0 1px 1px rgba(0, 0, 0, .1); border-radius: 3px;" src="https://img.yzcdn.cn/vant/vue-cli-demo-201809032000.png" > 在图形化界面中，点击`依赖` -> `安装依赖`，然后将 `vant` 添加到依赖中即可。
### 示例工程 ### 示例工程
我们提供了一个基于 Vue Cli 3 的示例工程，仓库地址为 [Vant Demo](https://github.com/youzan/vant-demo)，示例工程会帮助你了解如下内容： 我们提供了一个基于 Vue Cli 3 的示例工程，仓库地址为 [Vant Demo](https://github.com/youzan/vant-demo)，示例工程会帮助你了解如下内容：
- 基于 vant 搭建单页面应用 - 基于 vant 搭建单页面应用，配置按需引入
- 配置 rem 适配方案 - 配置 rem 适配方案
- 配置 TypeScript 工程 - 配置 TypeScript 工程
- 配置自定义主题色方案 - 配置自定义主题色方案
### 安装 ### 安装
#### NPM ```bash
# npm
```shell
npm i vant -S npm i vant -S
```
#### YARN # yarn
```shell
yarn add vant yarn add vant
``` ```
#### CDN ### 通过 CDN 引入
```html ```html
<!-- 引入样式 --> <!-- 引入样式 -->
@ -57,19 +49,19 @@ yarn add vant
<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
``` ```
### 引入组件 ## 引入组件
#### 方式一. 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐) ### 方式一. 自动按需引入组件 (推荐)
`babel-plugin-import` 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
```bash ```bash
# 安装 babel-plugin-import 插件 # 安装插件
npm i babel-plugin-import -D npm i babel-plugin-import -D
``` ```
```js ```js
// .babelrc 中配置 // 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory // 注意：webpack 1 无需设置 libraryDirectory
{ {
"plugins": [ "plugins": [
@ -93,15 +85,15 @@ module.exports = {
}; };
``` ```
接着你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为方式二中的按需引入形式
```js ```js
// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button, Cell } from 'vant'; import { Button, Cell } from 'vant';
``` ```
> 如果你在使用 TypeScript，可以使用 [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) 实现按需引入 > 如果你在使用 TypeScript，可以使用 [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) 实现按需引入
#### 方式二. 按需引入组件 ### 方式二. 手动按需引入组件
在不使用插件的情况下，可以手动引入需要的组件 在不使用插件的情况下，可以手动引入需要的组件
@ -109,8 +101,10 @@ import { Button, Cell } from 'vant';
import Button from 'vant/lib/button'; import Button from 'vant/lib/button';
import 'vant/lib/button/style'; import 'vant/lib/button/style';
``` ```
#### 方式三. 导入所有组件 ### 方式三. 导入所有组件
Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法
```js ```js
import Vue from 'vue'; import Vue from 'vue';
@ -122,6 +116,8 @@ Vue.use(Vant);
> 注意：配置 babel-plugin-import 插件后将不允许导入所有组件 > 注意：配置 babel-plugin-import 插件后将不允许导入所有组件
## 其他
### Rem 适配 ### Rem 适配
Vant 中的样式默认使用`px`作为单位，如果需要使用`rem`单位，推荐使用以下两个工具 Vant 中的样式默认使用`px`作为单位，如果需要使用`rem`单位，推荐使用以下两个工具

2
docs/markdown/theme.en-US.md
View File

@ -2,7 +2,7 @@
### Intro ### Intro
`Vant` provides a set of default themes, if you want to custom the theme color or other styles, you can use the following methods: Vant provides a set of default themes, if you want to custom the theme color or other styles, you can use the following methods:
### Less variables ### Less variables

2
docs/markdown/theme.zh-CN.md
View File

@ -2,7 +2,7 @@
### 介绍 ### 介绍
`Vant`提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以使用下面提供的方法 Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以使用下面提供的方法
### 示例工程 ### 示例工程

36
docs/src/components/DemoPages.vue
View File

@ -1,23 +1,25 @@
<template> <template>
<section class="van-doc-demo-pages"> <section class="van-doc-demo-pages">
<h2>{{ $t('title') }}</h2> <h1>{{ $t('title') }}</h1>
<p>{{ $t('description') }}</p> <div class="card">
<div class="van-doc-demo-pages__gallery"> <p>{{ $t('description') }}</p>
<div <div class="van-doc-demo-pages__gallery">
:class="['van-doc-demo-pages__item', { 'van-doc-demo-pages__item--active': index === currentDemo }]" <div
v-for="(demo, index) in demos" :class="['van-doc-demo-pages__item', { 'van-doc-demo-pages__item--active': index === currentDemo }]"
> v-for="(demo, index) in demos"
<h4>{{ demo.title }}</h4>
<a
:href="demo.source"
target="_blank"
>
{{ $t('source') }}
</a>
<img
:src="demo.preview"
@click="onChangeDemo(demo, index)"
> >
<h4>{{ demo.title }}</h4>
<a
:href="demo.source"
target="_blank"
>
{{ $t('source') }}
</a>
<img
:src="demo.preview"
@click="onChangeDemo(demo, index)"
>
</div>
</div> </div>
</div> </div>
</section> </section>