vue项目中vant-ui按需导入

最新推荐文章于 2024-01-13 23:37:09 发布

原创最新推荐文章于 2024-01-13 23:37:09 发布 · 156 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了在Vue项目中实现Vant-UI按需导入的方法。先安装插件，使用命令npm i babel-plugin-import -D，接着在babel.config.js文件中复制相关代码，之后可按需导入。可创建vant.js文件并引入man.js，也可直接将代码写进man.js。

vue项目中vant-ui按需导入

首先安装插件,命令：npm i babel-plugin-import -D
找到babel.config.js 文件将下面代码复制进去

"plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]

然后我们就可以按需导入了
这里创建一个vant.js文件

import Vue from "vue"
import {Button} from 'vant'
Vue.use(Button);

然后将这个文件引入man.js,也可以将上面代码直接写进man.js

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

墨·漓

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vant-ui 按需引入

snowflak的博客

06-03

1448

1.当我们在项目中使用vant的时候，首先安装vant-ui插件分别是：先安装vant-ui，再安装按需引入的插件安装vant-ui npm i vant --save 安装按需引入的插件 npm i babel-plugin-import -D 2.在min.js中引入vant import 'vant/lib/index.css'; // 全局引入按需引入UI库 vant import '@/plugins/vant' 3.在vant官网中找到按需引入并把它复制到babel.config.js中

vue移动端按需引入vant-ui

shenyaohua的博客

02-08

1061

vue项目中引入vant（自动按需引入）一、使用场景二、使用步骤1.安装2.自动按需引入组件配置 (官方推荐)3.新建vant.js文件，格式如下：4.main.js中引入5.vue文件中使用==注意== 一、使用场景 Vant 是有赞前端团队开源的移动端组件库，此文记录vue移动端项目自动按需引入vant组件库方法，此方法也是官方推荐方法。二、使用步骤 1.安装 //命令行执行安装 yarn add/npm/cnpm i vant -S 2.自动按需引入组件配置 (官方推荐) //第1步：安装自动.

参与评论您还未登录，请先登录后发表或查看评论

vue按需引入vant组件

画画的贝贝的博客

03-02

1099

vant组件库官网:Vant 3 - Mobile UI Components built on Vue vant安装: npm i vant -s 按需引入插件安装: npm i babel-plugin-import -D 在.babelrec文件中添加按需引入配置 { "plugins":[ ["import",{ "libraryName":"vant", "libraryDirectory":"es", ...

【记账本实战】03 集成 Vant UI 组件库

m0_62611367的博客

01-13

3158

在 Vue 项目中集成 Vant UI 组件库，按需引入组件，适配移动端 rem 单位，添加 iconfont 文字图标库

精选资源

vue2.x-vant-demo

04-11

【Vue2.x-Vant-Demo】是一个基于Vue2.x框架和Vant UI库的示例项目，用于展示如何在实际开发中应用这两个技术。Vue2.x是目前广泛使用的前端JavaScript框架，它提供了组件化、虚拟DOM、响应式数据绑定等功能，极大地...

Vant-UI 按需引入

weixin_49612239的博客

06-03

293

第1步，下包 // 通过 npm 安装 npm install vant -S // -S: --save-dev 生产环境的依赖（dependencies） // -D: --dev 开发环境的依赖（devDependencies）第2步，下需要的插件 // babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式 npm i babel-plugin-import -D 第3步，配置在src目录下配置 .b

UI素材|最全面的移动端 UI KIT 模板

awayaya1的博客

10-07

1121

什么是UI组件 UI 设计组件（UI KIT），直译过来就是用户界面成套元件，是界面设计常用控件或元件，「组」是设计元素的组合方式，「件」由不同的元件组成。组件的优势 1、保证一致性 Consistency 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。 2、反馈用户 Feedback 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；页面反馈：操作后，通过页面元素的变

vite中 vue项目中引入并使用vant

业余前端的职业经历

03-17

6031

vue3 来的同时。也带火了 vite,不过现在仍然是webpack称王的时代,vite也在快速发展中. 今天讲的主角是 vant, 那么在vite中使用按照官方文档照样给我报错了初始化 vite项目之后安装vant npm install vant --save yarn add vent --save 在vite中使用vant还需要其他的插件辅助, 就是vite-plugin-style-import 这里官方推荐的是 1.4.1版本 yarn add vite-plugin-style-im

Vue3框架Vite引用vant组件方法及相关问题解决方法

qq_39111074的博客

03-19

4940

Vue3框架Vite引用vant组件方法及相关问题解决方法

VUE项目中安装和使用vant组件

江湖行骗老中医

11-01

609

首先要搭建好vue脚手架：https://blog.youkuaiyun.com/qq_20757489/article/details/83718242 组件中文文档地址：https://youzan.github.io/vant/#/zh-CN/intro 1.使用NPM安装vant： npm i vant -S 2.引入组件：使用babel-plugin-import(推荐) babel...

如何在 Vite 中进行按需引入 Vant 组件

图解前端的博客

02-26

6181

Vue cli 在 Vue Cli 中，我们可以通过 babel-plugin-import 插件实现按需引入，但在 Vite 中无法使用该插件。 Vite 其实在 Vite 中无须考虑按需引入的问题。Vite 在构建代码时，会自动通过 Tree Shaking 移除未使用的 ESM 模块。而 Vant 3.0 内部所有模块都是基于 ESM 编写的，天然具备按需引入的能力。现阶段遗留的问题是，未使用的组件样式无法被 Tree Shaking 识别并移除，后续vant团队会考虑通过 Vite 插件的方式进行支

eslint报错`react-redux` import should occur before import of `./style/index.module.less`

zhudingfengshen的博客

12-09

3473

我们知道，在模块化开发中，关于引入类库或者组件的顺序问题是有共识的，一般是第三方类库在上方，本地文件在下方。但有时候没有注意到，eslint好强大库????，这都能给我发现。 import React, { useEffect, useRef, useState } from 'react'; // import axios from 'axios'; import styles from './style/index.module.less'; import history from '../../his

Naive UI的安装及使用

m0_52364694的博客

09-12

6153

一、安装首先安装Naive UI的包 npm i -D naive-ui 再安装字体库 npm i -D vfonts 二、全局引入 main.js中添加代码 import naive from 'naive-ui' app.use(naive) 三、使用（按钮示例） App.vue中 <script setup> import { NButton } from "naive-ui"; </script> <template> <n-space>

使用Vite搭建vue3.0 + Naive UI 项目

James_liPeng的博客

06-13

6241

使用Vite搭建vue3.0项目1. 使用NPM安装2. 安装2.1 输入项目名称选择要创建的框架（我们选择Vue）2.2 选择vue-ts 如下图所示2.3 按照指示进入创建的目录结构查看2.4 安装依赖2.5 启动2.6 启动成功3. 安装Naive UI3.1 使用webstrom3.2 安装Naive UI3.3 新建测试文件Test3.4 按需引入3.5 将Test组件使用到首页3.6 查看效果 1. 使用NPM安装 npm init @vitejs/app 效果如下图： 2. 安装 2.1 输

Vant的安装和配合引入Vue.js项目里

最新发布

12-04

vue2通过vant-ui如何实现中国省市区数据

10-24

<think>我们根据用户问题，结合引用内容，总结在Vue2项目中使用Vant-UI实现中国省市区数据展示或选择的方法。引用[1]提到：通过安装`@vant/area-data`包来获取省市区数据，然后在组件中引入并使用。引用[2]和[3]则展示了如何结合Vant-UI的Popup弹出层和Area省市区选择器组件来实现选择功能。因此，实现步骤可以分为以下几步： 1. 安装必要的依赖：Vant-UI和Vant提供的省市区数据包。 2. 在需要使用省市区选择器的组件中，引入省市区数据。 3. 在模板中使用Vant的Area组件，并通过弹出层（Popup）来控制显示。 4. 定义相关数据和方法，处理选择结果。下面我们详细说明： </think>### Vue2项目中使用Vant-UI实现中国省市区数据的方法在Vue2项目中实现省市区三级联动选择，需结合Vant-UI的`van-area`组件和官方提供的省市区数据。以下是具体实现步骤： #### 1. **安装依赖** ```bash npm install vant@legacy-v2 # Vue2专用版本 npm install @vant/area-data # 官方省市区数据 ``` #### 2. **引入组件和数据** 在Vue组件中： ```javascript import Vue from 'vue'; import { Area, Popup } from 'vant'; import { areaList } from '@vant/area-data'; Vue.use(Area); Vue.use(Popup); export default { data() { return { areaList, // 引入的省市区数据 showArea: false, // 控制弹出层显示 selectedArea: '', // 存储选中的地区 }; } } ``` #### 3. **模板实现** ```html <template> <div>  <van-field v-model="selectedArea" readonly label="地区选择" placeholder="点击选择省市区" @click="showArea = true" />  <van-popup v-model="showArea" position="bottom" round> <van-area :area-list="areaList" :columns-placeholder="['请选择省份', '请选择城市', '请选择区县']" @confirm="onConfirm" @cancel="showArea = false" /> </van-popup> </div> </template> ``` #### 4. **处理选择结果** ```javascript methods: { onConfirm(values) { // 将选择结果转换为文本 this.selectedArea = values .filter(item => !!item) .map(item => item.name) .join('/'); this.showArea = false; // 关闭弹出层 } } ``` #### 5. **关键配置说明** - **数据绑定**：`areaList`需直接使用`@vant/area-data`导入的数据[^1] - **弹出层控制**：通过`van-popup`包裹选择器实现底部弹窗[^2] - **结果处理**：`@confirm`事件返回选中值的数组，需手动拼接为字符串[^3] - **占位提示**：通过`columns-placeholder`自定义每列提示文本[^3] #### 效果说明用户点击输入框后，底部弹出省市区三级联动选择器，选择后自动格式化结果为`省/市/区`格式（如`北京市/市辖区/朝阳区`），并关闭弹出层[^2][^3]。 ---