mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Docs: add balbel-plugin-import install guide
This commit is contained in:
parent
74da05c30d
commit
9679a59d9f
@ -10,10 +10,14 @@ npm i vant -S
|
|||||||
|
|
||||||
### 引入组件
|
### 引入组件
|
||||||
|
|
||||||
#### 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
|
#### 方式一. 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
|
||||||
|
```bash
|
||||||
|
# 安装 babel-plugin-import 插件
|
||||||
|
npm i babel-plugin-import -D
|
||||||
|
```
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// .babelrc or babel-loader option
|
// 在 .babelrc 或 babel-loader 中添加插件配置
|
||||||
{
|
{
|
||||||
"plugins": [
|
"plugins": [
|
||||||
["import", { "libraryName": "vant", "style": true }]
|
["import", { "libraryName": "vant", "style": true }]
|
||||||
@ -21,28 +25,27 @@ npm i vant -S
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
接着你可以直接引入 vant 组件,等价于下方的按需引入组件
|
接着你可以在代码中直接引入 Vant 组件,插件会自动将代码转化为方式二中的按需引入形式。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// 模块化地引入 js 和 css, 通过 babel-plugin-import 插件解析
|
|
||||||
import { Button } from 'vant';
|
import { Button } from 'vant';
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 按需引入组件
|
#### 方式二. 按需引入组件
|
||||||
|
|
||||||
```jsx
|
```js
|
||||||
import { Button } from 'vant/lib/button';
|
import { Button } from 'vant/lib/button';
|
||||||
import 'vant/lib/vant-css/button.css';
|
import 'vant/lib/vant-css/button.css';
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 导入所有组件
|
#### 方式三. 导入所有组件
|
||||||
|
|
||||||
```javascript
|
```js
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import vant from 'vant';
|
import Vant from 'vant';
|
||||||
import 'vant/lib/vant-css/index.css';
|
import 'vant/lib/vant-css/index.css';
|
||||||
|
|
||||||
Vue.use(vant);
|
Vue.use(Vant);
|
||||||
```
|
```
|
||||||
|
|
||||||
### 自定义主题
|
### 自定义主题
|
||||||
@ -67,8 +70,7 @@ cd packages/vant-css
|
|||||||
修改你下载主题对应的样式即可,然后引入你修改后的主题。
|
修改你下载主题对应的样式即可,然后引入你修改后的主题。
|
||||||
|
|
||||||
### vue-cli 模板
|
### vue-cli 模板
|
||||||
|
可以使用`vue-cli`来初始化`Vant`的通用模板:
|
||||||
可以使用`vue-cli`来初始化`vant`的通用模板:
|
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
vue init youzan/vue-cli-template-vant projectName
|
vue init youzan/vue-cli-template-vant projectName
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
<style lang="postcss">
|
||||||
body {
|
body {
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
}
|
||||||
|
@ -34,3 +34,11 @@ export default {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="postcss">
|
||||||
|
.zan-doc-content--quickstart {
|
||||||
|
h3:not(:first-of-type) {
|
||||||
|
margin-top: 35px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user