ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-17 08:37:23 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

docs: update install guide

Browse Source
This commit is contained in:
chenjiahan
2020-10-24 10:38:09 +08:00
parent c6d10abdf9
commit 2a5c67d304
4 changed files with 107 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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/vant@2.10/lib/index.css"
/>
<!-- import script -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.10/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
@@ -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
@@ -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/vant@2.10/lib/index.css"
/>
<!-- import script -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.10/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