diff --git a/README.md b/README.md index 3a95da0ef..273fd6f06 100644 --- a/README.md +++ b/README.md @@ -43,67 +43,16 @@ npm i vant -S npm i vant@beta -S ``` -## CDN - -```html - - - - - - -``` - ## Quickstart -#### 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 -``` - -```js -// set babel config in .babelrc or babel-loader -// Note: Don't set libraryDirectory if you are using webpack 1. -{ - "plugins": [ - ["import", { - "libraryName": "vant", - "libraryDirectory": "es", - "style": true - }] - ] -} -``` - -Then you can import components from vant, equivalent to import manually below. - -```js -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 - -```js -import Button from 'vant/lib/button'; -import 'vant/lib/button/style'; -``` - -#### 3. Import all components - ```js import Vue from 'vue'; -import Vant from 'vant'; +import { Button } from 'vant'; import 'vant/lib/index.css'; -Vue.use(Vant); +Vue.use(Button); ``` -> If you configured babel-plugin-import, you won't be allowed to import all components. - See more in [Quickstart](https://youzan.github.io/vant#/en-US/quickstart). ## Contribution @@ -122,7 +71,6 @@ Modern browsers and Android 4.0+, iOS 6+. * [Vant Weapp: Weapp UI](https://github.com/youzan/vant-weapp) * [Zent: PC UI base on React](https://youzan.github.io/zent) - ## Preview You can scan the following QR code to access the demo: diff --git a/README.zh-CN.md b/README.zh-CN.md index 283e9b2b2..43f6998e7 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -42,84 +42,17 @@ npm i vant -S npm i vant@beta -S ``` -## CDN - -```html - - - - - - -``` - ## 快速上手 -### 方式一. 自动按需引入组件 (推荐) - -[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式 -```bash -# 安装插件 -npm i babel-plugin-import -D -``` - -```js -// 在.babelrc 中添加配置 -// 注意:webpack 1 无需设置 libraryDirectory -{ - "plugins": [ - ["import", { - "libraryName": "vant", - "libraryDirectory": "es", - "style": true - }] - ] -} - -// 对于使用 babel7 的用户,可以在 babel.config.js 中配置 -module.exports = { - plugins: [ - ['import', { - libraryName: 'vant', - libraryDirectory: 'es', - style: true - }, 'vant'] - ] -}; -``` - -```js -// 接着你可以在代码中直接引入 Vant 组件 -// 插件会自动将代码转化为方式二中的按需引入形式 -import { Button } from 'vant'; -``` - -> 如果你在使用 TypeScript,可以使用 [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) 实现按需引入 - -### 方式二. 手动按需引入组件 - -在不使用插件的情况下,可以手动引入需要的组件 - -```js -import Button from 'vant/lib/button'; -import 'vant/lib/button/style'; -``` - -### 方式三. 导入所有组件 - -Vant 支持一次性导入所有组件,引入所有组件会增加代码包体积,因此不推荐这种做法 - ```js import Vue from 'vue'; -import Vant from 'vant'; +import { Button } from 'vant'; import 'vant/lib/index.css'; -Vue.use(Vant); +Vue.use(Button); ``` -> 注意:配置 babel-plugin-import 插件后将不允许导入所有组件 - -更多内容请参考 [快速上手](https://youzan.github.io/vant#/zh-CN/quickstart). +vant 也支持按需引入、CDN 引入等方式,详细说明见 [快速上手](https://youzan.github.io/vant#/zh-CN/quickstart). ## 贡献代码 diff --git a/docs/markdown/quickstart.en-US.md b/docs/markdown/quickstart.en-US.md index f1a3353cd..a8844b8c5 100644 --- a/docs/markdown/quickstart.en-US.md +++ b/docs/markdown/quickstart.en-US.md @@ -29,17 +29,6 @@ npm i vant -S npm i vant@beta -S ``` -### CDN - -```html - - - - - - -``` - ## Usage ### 1. Import on demand @@ -102,6 +91,28 @@ Vue.use(Vant); > If you configured babel-plugin-import, you won't be allowed to import all components. +### 4. CDN + +```html + + + + + + + + +``` + ## Other ### Rem units diff --git a/docs/markdown/quickstart.zh-CN.md b/docs/markdown/quickstart.zh-CN.md index cd34066f8..87f6af320 100644 --- a/docs/markdown/quickstart.zh-CN.md +++ b/docs/markdown/quickstart.zh-CN.md @@ -38,17 +38,6 @@ npm i vant -S npm i vant@beta -S ``` -### 通过 CDN 引入 - -```html - - - - - - -``` - ## 引入组件 ### 方式一. 自动按需引入组件 (推荐) @@ -116,6 +105,28 @@ Vue.use(Vant); > 注意:配置 babel-plugin-import 插件后将不允许导入所有组件 +### 方式四. 通过 CDN 引入 + +```html + + + + + + + + +``` + ## 其他 ### Rem 适配