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

Merge branch '2.x' into dev

Browse Source
This commit is contained in:
chenjiahan
2020-10-24 10:41:39 +08:00
parent ab580f844b 2a5c67d304
commit 5ebecc61b3
4 changed files with 111 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,51 @@
# 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@next/lib/index.css"
/>
<!-- import script -->
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js"></script>
<script>
// Render the Button component
const app = Vue.createApp({
template: `<van-button>Button</van-button>`,
});
app.use(vant);
app.mount('#app');
// Call function component
vant.Toast('Message');
// Register Lazyload directive
// app.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 +62,6 @@ vue ui
In the GUI, click on 'Dependencies' -> `Install Dependencies` and add `vant` to the dependencies.
### Install
```bash
# Using npm
npm i vant@next -S
# Using yarn
yarn add vant@next
```
> 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
@@ -94,37 +125,6 @@ app.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@next/lib/index.css"
/>
<!-- import script -->
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js"></script>
<script>
// Render the Button component
const app = Vue.createApp({
template: `<van-button>Button</van-button>`,
});
app.use(vant);
app.mount('#app');
// Call function component
vant.Toast('Message');
// Register Lazyload directive
// app.use(vant.Lazyload);
</script>
```
## Other
### Rem units