[Doc] improve quickstart (#1187)

This commit is contained in:
neverland
2018-05-29 21:06:41 +08:00
committed by GitHub
parent b68ac32325
commit f44e788ae8
11 changed files with 1287 additions and 1185 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -16,17 +16,17 @@
### 快速上手
请参考 [快速上手](#/zh-CN/quickstart).
请参考 [快速上手](#/zh-CN/quickstart)
### 贡献代码
修改代码请阅读我们的 [开发指南](https://github.com/youzan/vant/blob/dev/.github/CONTRIBUTING.zh-CN.md)
修改代码请阅读我们的 [开发指南](https://github.com/youzan/vant/blob/dev/.github/CONTRIBUTING.zh-CN.md)
使用过程中发现任何问题都可以提 [Issue](https://github.com/youzan/vant/issues) 给我们,当然,我们也非常欢迎你给我们发 [PR](https://github.com/youzan/vant/pulls)
使用过程中发现任何问题都可以提 [Issue](https://github.com/youzan/vant/issues) 给我们,当然,我们也非常欢迎你给我们发 [PR](https://github.com/youzan/vant/pulls)
### 浏览器支持
现代浏览器以及 Android 4.0+, iOS 6+.
现代浏览器以及 Android 4.0+, iOS 6+
### 链接
@@ -40,4 +40,4 @@
### 开源协议
本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议,请自由地享受和参与开源
本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议,请自由地享受和参与开源

View File

@@ -1,14 +1,42 @@
## Quickstart
### Starter kit
Use [vue-cli](https://github.com/vuejs/vue-cli) to create a vant project.
```shell
vue init youzan/vue-cli-template-vant projectName
```
### Install
#### NPM
```shell
npm i vant -S
```
#### YARN
```shell
yarn add vant
```
#### CDN
```html
<!-- import style -->
<link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css" />
<!-- import script -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vant/lib/vant.min.js"></script>
```
### Usage
#### 1. Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
```bash
# Install babel-plugin-import
npm i babel-plugin-import -D
@@ -43,7 +71,6 @@ import 'vant/lib/vant-css/button.css';
```
#### 3. Import all components
If you configured babel-plugin-import, you won't be allowed to import all components.
```js
import Vue from 'vue';
@@ -53,24 +80,28 @@ import 'vant/lib/vant-css/index.css';
Vue.use(Vant);
```
### CDN
> If you configured babel-plugin-import, you won't be allowed to import all components.
```html
<!-- import style -->
<link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css" />
<!-- import script -->
<script src="https://unpkg.com/vant/lib/vant.min.js"></script>
```
### Rem units
### vue-cli template
```shell
vue init youzan/vue-cli-template-vant projectName
```
### rem units
Vant use `px` as size units by defaultyou can use tools such as `postcss-pxtorem` to transform units to `rem`.
- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem)
- [lib-flexible](https://github.com/amfe/lib-flexible)
postcss config example:
```js
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
}
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
```

View File

@@ -1,14 +1,46 @@
## 快速上手
### 脚手架
我们提供了开箱即用的开发脚手架,通过 [vue-cli](https://github.com/vuejs/vue-cli) 即可快速创建一个基于 `Vant` 的项目。
```shell
vue init youzan/vue-cli-template-vant my-project
```
### 安装
#### NPM
```shell
npm i vant -S
```
#### YARN
```shell
yarn add vant
```
#### CDN
访问下面的文件 URL会自动重定向至最新版本的 CDN 链接,建议使用固定版本的 CDN 链接,避免升级时受到非兼容性更新的影响。
```html
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css">
<!-- 引入组件 -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vant/lib/vant.min.js"></script>
```
### 引入组件
#### 方式一. 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
`babel-plugin-import` 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式
```bash
# 安装 babel-plugin-import 插件
npm i babel-plugin-import -D
@@ -16,7 +48,7 @@ npm i babel-plugin-import -D
```js
// 在 .babelrc 或 babel-loader 中添加插件配置
// 注意webpack 1 无需设置 libraryDirectory
// 注意webpack 1 无需设置 libraryDirectory
{
"plugins": [
["import", {
@@ -28,14 +60,16 @@ npm i babel-plugin-import -D
}
```
接着你可以在代码中直接引入 Vant 组件,插件会自动将代码转化为方式二中的按需引入形式
接着你可以在代码中直接引入 Vant 组件,插件会自动将代码转化为方式二中的按需引入形式
```js
import { Button } from 'vant';
import { Button, Cell } from 'vant';
```
#### 方式二. 按需引入组件
在不使用插件的情况下,可以手动引入需要的组件
```js
import Button from 'vant/lib/button';
import 'vant/lib/vant-css/base.css';
@@ -43,7 +77,6 @@ import 'vant/lib/vant-css/button.css';
```
#### 方式三. 导入所有组件
配置 babel-plugin-import 插件后将不允许导入所有组件的方式
```js
import Vue from 'vue';
@@ -53,25 +86,30 @@ import 'vant/lib/vant-css/index.css';
Vue.use(Vant);
```
### CDN
>注意:配置 babel-plugin-import 插件后将不允许导入所有组件
```html
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css">
<!-- 引入组件 -->
<script src="https://unpkg.com/vant/lib/vant.min.js"></script>
```
### Rem 适配
### vue-cli 模板
可以使用`vue-cli`来初始化`Vant`的通用模板:
Vant 中的样式默认使用`px`作为单位,如果需要使用`rem`单位,推荐使用以下两个工具
```shell
vue init youzan/vue-cli-template-vant projectName
```
### rem 适配
Vant 中的组件样式默认使用`px`作为单位,如果需要使用`rem`作为单位,推荐使用以下两个工具
- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 用于将单位转化为 rem
- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 是一款 postcss 插件,用于将单位转化为 rem
- [lib-flexible](https://github.com/amfe/lib-flexible) 用于设置 rem 基准值
下面提供了一份基本的 postcss 配置,可以在此配置的基础上根据项目需求进行修改
```js
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
}
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
```
> 注意:在配置 postcss-loader 时,应避免 ignore node_modules 目录,这会导致 Vant 的样式无法被编译

View File

@@ -58,7 +58,7 @@ export default {
}
h2 {
font-size: 32px;
font-size: 36px;
line-height: 60px;
font-weight: normal;
}

View File

@@ -89,10 +89,6 @@ module.exports = {
path: '/icon',
title: 'Icon - 图标'
},
{
path: '/image-preview',
title: 'ImagePreview - 图片预览'
},
{
path: '/lazyload',
title: 'Lazyload - 图片懒加载'
@@ -168,7 +164,7 @@ module.exports = {
]
},
{
groupName: '表单',
groupName: '表单组件',
list: [
{
path: '/checkbox',
@@ -240,6 +236,10 @@ module.exports = {
path: '/cell-swipe',
title: 'CellSwipe - 滑动单元格'
},
{
path: '/image-preview',
title: 'ImagePreview - 图片预览'
},
{
path: '/switch-cell',
title: 'SwitchCell - 开关单元格'
@@ -384,10 +384,6 @@ module.exports = {
path: '/icon',
title: 'Icon'
},
{
path: '/image-preview',
title: 'ImagePreview'
},
{
path: '/lazyload',
title: 'Lazyload'
@@ -535,6 +531,10 @@ module.exports = {
path: '/cell-swipe',
title: 'CellSwipe'
},
{
path: '/image-preview',
title: 'ImagePreview'
},
{
path: '/switch-cell',
title: 'SwitchCell'