vue-cli4.0如何按需引入vant ui

最新推荐文章于 2024-08-10 22:22:29 发布
最新推荐文章于 2024-08-10 22:22:29 发布
阅读量2.6k 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46957313/article/details/106446144
版权

1.首先先说全局如何引入，我们需要在main.js里进行全局引入就可以了
在这里插入图片描述
虽然全局引入很方便，但是它也有一些弊端，就比如说我们的代码在上传到码云进行合并的时候，可能会报错，为了避免这个问题，最好还是进行按需引入

2.接下来咱们说一下按需引入
首先先安装babel 插件
在这里插入图片描述
安装完之后需要在你的babel.config.js里进行配置
在这里插入图片描述
3.之后你用什么组件，在main.js里进行引入就可以了
比如，我用的是一个弹框
在这里插入图片描述

在这里插入图片描述

菜的抠脚....
关注
vue/cli4移动端ui组件库——Vant插件的安装（下）
nick_name1的博客
09-06 912
上一篇：vue/cli移动端ui组件库——Vant插件的安装（上） 讲了使用vue ui来安装vant插件，这一片我们就康康cmd命令行怎么来安装吧 方法二：cmd命令行安装 我使用的编译器是vscode 打开vscode 在左上角，点击文件，点击打开文件夹，然后选择你创建的项目文件夹。 打开后应该是这样子滴（因为创建项目时的选项可能不同，所以里面包含的文件可能会跟我的不一样） 下方有一个蓝色的条，点击它 会出现控制台，点击控制台的终端 cmd命令行就出现啦（这个是你项目下的控制台哦） 输入安装语句
Vant 在vue-cli 4.x中按需加载操作
01-21
在vue-cli 4.x中使用vant出现的问题,在这里记录一下 一. 如果使用按需加载,需要下载babel-plugin-import转换一下,下载 babel-plugin-import cnpm install babel-plugin-import -D **二. 在根目录中找到 babel.config.js 文件 , 添加字段 ** plugins: [ [import,{ libraryName:vant, style:true } ] ] 最终我的配置是这样的 module.exports = { presets: [
vue-cli3中引入vant
weixin_43837268的博客
10-15 2342
第一步不用说照着官网进行安装，NPM或者是yarn，都是可以的 cnpm i vant --save npm i babel-plugin-import --save 安装之后 我们在babel.config.js中进行配置插件： module.exports = { presets: [ '@vue/app' ], plugins: [ ['impor...
vue项目的按需加载
最新发布
weixin_45016440的博客
08-10 146
而对于vue模块引用来说，我们没必要在一开始就将所有模块js都引入进来，所以我们要将‘src/router/index.js’中引入模块的代码进行修改。使用 vue-cli构建的项目,在默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体，而这个文件一般会比较大，可能几兆甚至几十兆，结果导致页面加载时间过长，对于用户来说这是一个极不友好的体验，所以有些时候我们就需要用到‘按需加载’。这样就可以将一个大的js文件拆分为一个个小的文件，根据用户触发事件进行按需加载了。
Vue-cli脚手架中引入vant详解
前端程序猿的博客
12-27 922
vue项目使用vant 脚手架引入vant
Vant再vue-cli 4.x中按需加载
TO_Web的博客
09-06 396
在vue-cli 4.x中使用vant出现的问题,在这里记录一下 一. 如果使用按需加载,需要下载babel-plugin-import转换一下,下载 babel-plugin-import cnpm install babel-plugin-import -D **二. 在根目录中找到 babel.config.js 文件 , 添加字段 ** "plugins": [ ["import",{ "libraryName":"vant", "style":true
vue-h5-template：vue搭建移动端开发，基于vue-cli4.0 + webpack 4 + vant ui + sass + rem适应方案+ axios封装，内置手机端模板脚手架
02-05
基于vue-cli4.0 + webpack 4 + vant ui + sass + rem适应方案+ axios封装，内置手机端模板脚手架 掘金： 建议手机端查看 节点版本要求 Vue CLI需要Node.js 8.9或更高版本（推荐8.11.0+）。您可以使用或在同一台...
vue3-h5-template::party_popper:基于Vue3+TypeScript+ Vue-Cli4.0 + vant ui + sass+ rem 适配方案+axios 封装 + jssdk配置 + vconsole移动端调试，构建手机端模板脚手架
05-09
基于 Vue3+TypeScript+ Vue-Cli4.0 + vant ui + sass+ rem 适配方案+axios 封装 + jssdk 配置 + vconsole 移动端调试，构建手机端模板脚手架 项目地址： 掘金地址： 简书地址： 建议手机端查看 Node 版本要求 Vue ...
NeteaseMusic：:rocket:Vue-Cli 3 + Vuex + Vant UI的移动端网易云音乐:glowing_star:如果觉得不错不妨碍点个Star
01-31
一个基于Vue-Cli 3 + Vuex + Vant UI的网易云音乐移动端 项目运行 #克隆到本地 git clone https://github.com/Francis1024/NeteaseMusic.git #进入项目文件夹 cd Netease-Music #安装依赖 npm install #运行项目 npm...
vue-vant-h5-plus:开箱即用vue-cli4 vant rem移动端框架方案
03-29
基于vue-cli4.0 + webpack 4 + vant ui + sass + rem适应方案+ axios封装，内置手机端模板脚手架 节点版本要求 Vue CLI需要Node.js 8.9或更高版本（推荐8.11.0+）。您可以使用或在同一台计算机中管理多个Node版本。 ...
vue-cli3 同时按需引入vant和element ui
;
02-10 4837
一、安装vant和element ui 1.安装vant # 通过 npm 安装 npm i vant -S # 通过 yarn 安装 yarn add vant 2.安装element ui npm i element-ui -S 二、配置按需引入插件 1.vant npm i babel-plugin-import -D 2.element ui npm insta...
vue-cli4-vant：基于vue-cli4和vant的移动端开发模板
02-06
vue-cli4-vant 简介 这是基于vue-cli4实现的移动端H5开发模板，其中包含项目常用的配置及组件封装，可以快速开发使用。 技术栈：vue-cli4 + webpack4 + vant + axios +更少+ postcss-px2rem // 安装依赖 npm install // 本地启动 npm run dev // 生产打包 npm run build 配置优势 vant是一套轻量，可靠的移动端Vue组件库，非常适合基于vue技术栈的移动端开发。在过去很长的投放内，本人用的移动端UI框架都是vux。后来由于vux不支持vue-cli3，就转用了vant，必须说，无论是
vue中使用vant（按需引入）
weixin_44109726的博客
05-01 3074
vue中使用vant（按需引入方式）环境 vue-cli 3.0按需引入 环境 vue-cli 3.0 搭建vue-cli 3.0 （npm 环境） npm install -g @vue/cli 查看vue版本 3.0以上就OK vue -V 命令提示框中输入 vue ui 等待启动 vue ui 直接上图 必须安装依赖 参考Vant 官网的文档 方式一. 自动按需引...
VueCli4 + vant + VantRem 适配方案
qq_40043424的博客
04-23 1020
废话不多说了，咱们看实际操作： 1、vant rem适配，需要安装两个插件 postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem； lib-flexible 用于设置 rem 基准值； npm install postcss-pxtorem --save-dev npm i -S amfe-flexible 2、在 main.js 引入amfe-flexibl...
vue-cli4.5.13按需引入vant，解决vant样式失效问题
weixin_46190955的博客
06-28 1946
1.使用vue-cli4.5.13新建vue项目 ①先全局安装最新版本的vue-cli,如果安装了旧版本的，最好先卸载 npm install -g @vue/cli # OR yarn global add @vue/cli @创建项目 vue create 自己项目的名称 2，下载vant npm i vant -S 3.下载babel-plugin-import并在babel.config.js中修改配置如下（babel-plugin-import文档上有详细说明如何配置） module.exp
VUE项目中安装和使用vant组件
热门推荐
安树的博客
06-13 4万+
Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。特性50+ 个经过有赞线上业务检验的组件单元测试覆盖率超过 90%完善的中英文文档和示例支持 babel-plugin-import支持 TypeScript支持 SSR组件中文文档地址：https://youzan.github.io/vant/#/zh-CN/intro1、创建VUE项目之...
vue-cli项目下引入vant组件
weixin_30839881的博客
08-11 800
前言 Vant是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。目前已有近50个组件，这些组件被广泛使用于有赞的各个移动端业务中。如果你需要开发一个移动商城，用 Vant 就再合适不过了。vant地址：https://youzan.github.io/vant/#/zh-CN/in...
vant 在项目中自动按需引入
peppa_pig的博客
04-27 3121
1.通过npm安装。npm i vant -S 2.安装插件 。npm i babel-plugin-import -D babel-plugin-import是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。 3.添加配置 // 在.babelrc 中添加配置 { "plugins": [ ["import", { "libr...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值