mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Doc] update quickstart.md
This commit is contained in:
陈嘉涵
parent
77b0f8e6a6
commit
d6f5cd3a81
@ -10,34 +10,26 @@ npm install -g @vue/cli
|
||||
|
||||
# Create a project
|
||||
vue create hello-world
|
||||
```
|
||||
|
||||
After the creation is complete, you can open the GUI by command.
|
||||
|
||||
```bash
|
||||
# Open GUI
|
||||
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
|
||||
|
||||
#### NPM
|
||||
|
||||
```shell
|
||||
```bash
|
||||
# npm
|
||||
npm i vant -S
|
||||
```
|
||||
|
||||
#### YARN
|
||||
|
||||
```shell
|
||||
# yarn
|
||||
yarn add vant
|
||||
```
|
||||
|
||||
#### CDN
|
||||
### CDN
|
||||
|
||||
```html
|
||||
<!-- import style -->
|
||||
@ -48,12 +40,14 @@ yarn add vant
|
||||
<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
|
||||
# Install babel-plugin-import
|
||||
# Install plugin
|
||||
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
|
||||
// Then you can import components from vant
|
||||
import { Button } from 'vant';
|
||||
```
|
||||
|
||||
> 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
|
||||
import Button from 'vant/lib/button';
|
||||
import 'vant/lib/button/style';
|
||||
```
|
||||
|
||||
#### 3. Import all components
|
||||
### 3. Import all components
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
## Other
|
||||
|
||||
### Rem units
|
||||
|
||||
|
||||
@ -10,43 +10,35 @@ npm install -g @vue/cli
|
||||
|
||||
# 创建一个项目
|
||||
vue create hello-world
|
||||
```
|
||||
|
||||
创建完成后，可以通过命令打开图形化界面
|
||||
|
||||
```bash
|
||||
# 打开图形化界面
|
||||
# 创建完成后，可以通过命令打开图形化界面，如下图所示
|
||||
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)，示例工程会帮助你了解如下内容：
|
||||
|
||||
- 基于 vant 搭建单页面应用
|
||||
- 基于 vant 搭建单页面应用，配置按需引入
|
||||
- 配置 rem 适配方案
|
||||
- 配置 TypeScript 工程
|
||||
- 配置自定义主题色方案
|
||||
|
||||
### 安装
|
||||
|
||||
#### NPM
|
||||
|
||||
```shell
|
||||
```bash
|
||||
# npm
|
||||
npm i vant -S
|
||||
```
|
||||
|
||||
#### YARN
|
||||
|
||||
```shell
|
||||
# yarn
|
||||
yarn add vant
|
||||
```
|
||||
|
||||
#### CDN
|
||||
### 通过 CDN 引入
|
||||
|
||||
```html
|
||||
<!-- 引入样式 -->
|
||||
@ -57,19 +49,19 @@ yarn add vant
|
||||
<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
|
||||
# 安装 babel-plugin-import 插件
|
||||
# 安装插件
|
||||
npm i babel-plugin-import -D
|
||||
```
|
||||
|
||||
```js
|
||||
// .babelrc 中配置
|
||||
// 在.babelrc 中添加配置
|
||||
// 注意：webpack 1 无需设置 libraryDirectory
|
||||
{
|
||||
"plugins": [
|
||||
@ -93,15 +85,15 @@ module.exports = {
|
||||
};
|
||||
```
|
||||
|
||||
接着你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为方式二中的按需引入形式
|
||||
|
||||
```js
|
||||
// 接着你可以在代码中直接引入 Vant 组件
|
||||
// 插件会自动将代码转化为方式二中的按需引入形式
|
||||
import { Button, Cell } from 'vant';
|
||||
```
|
||||
|
||||
> 如果你在使用 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 'vant/lib/button/style';
|
||||
```
|
||||
|
||||
#### 方式三. 导入所有组件
|
||||
|
||||
### 方式三. 导入所有组件
|
||||
|
||||
Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
@ -122,6 +116,8 @@ Vue.use(Vant);
|
||||
|
||||
> 注意：配置 babel-plugin-import 插件后将不允许导入所有组件
|
||||
|
||||
## 其他
|
||||
|
||||
### Rem 适配
|
||||
|
||||
Vant 中的样式默认使用`px`作为单位，如果需要使用`rem`单位，推荐使用以下两个工具
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 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
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
`Vant`提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以使用下面提供的方法
|
||||
Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以使用下面提供的方法
|
||||
|
||||
### 示例工程
|
||||
|
||||
|
||||
@ -1,23 +1,25 @@
|
||||
<template>
|
||||
<section class="van-doc-demo-pages">
|
||||
<h2>{{ $t('title') }}</h2>
|
||||
<p>{{ $t('description') }}</p>
|
||||
<div class="van-doc-demo-pages__gallery">
|
||||
<div
|
||||
: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)"
|
||||
<h1>{{ $t('title') }}</h1>
|
||||
<div class="card">
|
||||
<p>{{ $t('description') }}</p>
|
||||
<div class="van-doc-demo-pages__gallery">
|
||||
<div
|
||||
: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)"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user