当前位置:   article > 正文

移动端 | Van组件库的使用方法_vant cdn引入

vant cdn引入

目录

一、安装

1.1 通过npm安装

1.2 通过CDN安装

二、引入组件

2.1 方法一:常规用法

2.2 方法二:按需引入组件样式

三、组件用法

3.1 全局注册

3.2 局部注册

3.3


一、安装

1.1 通过npm安装

在现有项目中使用Vant时,可以通过npm进行安装:

  1. # Vue 3 项目,安装最新版 Vant
  2. npm i vant
  3. # Vue 2 项目,安装 Vant 2
  4. npm i vant@latest-v2

也可以通过 yarnpnpm 进行安装:

  1. # 通过 yarn 安装
  2. yarn add vant
  3. # 通过 pnpm 安装
  4. pnpm add vant

1.2 通过CDN安装

使用Vant最简单的方法是直接在HTML文件中引入CDN链接,之后你可以通过全局变量 vant 访问到所有组件:

  1. <!-- 引入样式文件 -->
  2. <link
  3. rel="stylesheet"
  4. href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"
  5. />
  6. <!-- 引入 Vue 和 Vant 的 JS 文件 -->
  7. <script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
  8. <script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
  9. <script>
  10. // 在 #app 标签下渲染一个按钮组件
  11. const app = Vue.createApp({
  12. template: `<van-button>按钮</van-button>`,
  13. });
  14. app.use(vant);
  15. // 通过 CDN 引入时不会自动注册 Lazyload 组件
  16. // 可以通过下面的方式手动注册
  17. app.use(vant.Lazyload);
  18. // 调用工具函数,弹出一个 Toast
  19. vant.showToast('提示');
  20. app.mount('#app');
  21. </script>

二、引入组件

2.1 方法一:常规用法

下面是使用Vant组件的用法示例:

  1. import { createApp } from 'vue';
  2. // 1. 引入你需要的组件
  3. import { Button } from 'vant';
  4. // 2. 引入组件样式
  5. import 'vant/lib/index.css';
  6. const app = createApp();
  7. // 3. 注册你需要的组件
  8. app.use(Button);

2.2 方法二:按需引入组件样式

在基于 vitewebpack 或 vue-cli 的项目中使用 Vant 时,可以使用 unplugin-vue-components 插件,它可以自动引入组件,并按需引入组件的样式。

相比于常规用法,这种方式可以按需引入组件的 CSS 样式,从而减少一部分代码体积,但使用起来会变得繁琐一些。如果业务对 CSS 的体积要求不是特别极致,我们推荐使用更简便的常规用法。

1.安装插件

  1. # 通过 npm 安装
  2. npm i unplugin-vue-components -D
  3. # 通过 yarn 安装
  4. yarn add unplugin-vue-components -D
  5. # 通过 pnpm 安装
  6. pnpm add unplugin-vue-components -D

2.配置插件

如果是基于 vite 的项目,在 vite.config.js 文件中配置插件:

  1. import vue from '@vitejs/plugin-vue';
  2. import Components from 'unplugin-vue-components/vite';
  3. import { VantResolver } from 'unplugin-vue-components/resolvers';
  4. export default {
  5. plugins: [
  6. vue(),
  7. Components({
  8. resolvers: [VantResolver()],
  9. }),
  10. ],
  11. };

如果是基于 vue-cli 的项目,在 vue.config.js 文件中配置插件:

  1. const { VantResolver } = require('unplugin-vue-components/resolvers');
  2. const ComponentsPlugin = require('unplugin-vue-components/webpack');
  3. module.exports = {
  4. configureWebpack: {
  5. plugins: [
  6. ComponentsPlugin({
  7. resolvers: [VantResolver()],
  8. }),
  9. ],
  10. },
  11. };

如果是基于 webpack 的项目,在 webpack.config.js 文件中配置插件:

  1. const { VantResolver } = require('unplugin-vue-components/resolvers');
  2. const ComponentsPlugin = require('unplugin-vue-components/webpack');
  3. module.exports = {
  4. plugins: [
  5. ComponentsPlugin({
  6. resolvers: [VantResolver()],
  7. }),
  8. ],
  9. };

3.使用组件

完成以上两步,就可以直接在模板中使用 Vant 组件了,unplugin-vue-components 会解析模板并自动注册对应的组件。

  1. <template>
  2. <van-button type="primary" />
  3. </template>

4.引入函数组件样式

Vant 中有个别组件是以函数的形式提供的,包括 ToastDialogNotify 和 ImagePreview 组件。在使用函数组件时,unplugin-vue-components 无法自动引入对应的样式,因此需要手动引入样式。

  1. // Toast
  2. import { showToast } from 'vant';
  3. import 'vant/es/toast/style';
  4. // Dialog
  5. import { showDialog } from 'vant';
  6. import 'vant/es/dialog/style';
  7. // Notify
  8. import { showNotify } from 'vant';
  9. import 'vant/es/notify/style';
  10. // ImagePreview
  11. import { showImagePreview } from 'vant';
  12. import 'vant/es/image-preview/style';

三、组件用法

3.1 全局注册

全局注册后,你可以在app下的任意子组件中使用注册的Vant组件

  1. import { Button } from 'vant';
  2. import { createApp } from 'vue';
  3. const app = createApp();
  4. // 方式一. 通过 app.use 注册
  5. // 注册完成后,在模板中通过 <van-button> 或 <VanButton> 标签来使用按钮组件
  6. app.use(Button);
  7. // 方式二. 通过 app.component 注册
  8. // 注册完成后,在模板中通过 <van-button> 标签来使用按钮组件
  9. app.component(Button.name, Button);

3.2 局部注册

局部注册后,你可以在当前组件中使用注册的Vant组件

  1. import { Button } from 'vant';
  2. export default {
  3. components: {
  4. [Button.name]: Button,
  5. },
  6. };

3.3 <script setup>

在<script setup >中可以直接使用Vant组件,不需要进行组件注册。

  1. <script setup>
  2. import { Button } from 'vant';
  3. </script>
  4. <template>
  5. <Button />
  6. </template>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/93236
推荐阅读
  

闽ICP备14008679号