Vue项目优化（二）——把引入的vant组件库抽离出去

最新推荐文章于 2024-07-19 22:58:38 发布
最新推荐文章于 2024-07-19 22:58:38 发布
阅读量738 收藏 1
点赞数 4
分类专栏： vue性能优化 文章标签： vue.js javascript 前端 性能优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56989560/article/details/124842005
版权

在开发项目中一直把vant组件库的按需引入全部放在mian.js中，导致入口文件太大，造成了加载太慢，为了性能考虑，把vant按需引入抽离出去

步骤1：新建vant.js文件，把main.js中复制过来，

记着导入Vue

步骤二:

在mian.js中进行导入

 

Mr.指尖舞者
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Vue 实战项目（智慧商城项目）： 完整的订单购物管理功能 && 内涵资源代码 && 基于Vant组件库 && Vuex态管理 && 基于企业级项目开发规范
Forever_Hopeful的博客
10-24 951
Vue 实战项目（智慧商城项目）： 完整的订单购物管理功能 && 内涵资源代码 && 基于Vant组件库 && Vuex态管理 && 基于企业级项目开发规范
卸载 Vue.js 项目中的 Vant 插件
小秀的博客
08-17 1658
如果你是使用 yarn 进行项目管理，类似的步骤也适用，只需要在步骤中使用 yarn 相关的命令替换 npm 即可。以上步骤将会从你的项目中卸载 Vant 插件。这个条目删除，然后保存文件。
解决vue打包文件中出现vant链接字体
dss0225的博客
08-26 350
3、重新npm i 或者 yarn install 使用默认地址加载依赖。该问题是因为npm使用非官方镜像源问题，切换回官方镜像源就会消失。4、这样build后的dist字体依赖就不再是链接形式。2、删除 .lock 和 node 依赖。...
Vant组件库的按需导入和导出
最新发布
jkjkikik的博客
07-19 399
把引入组件的步骤抽离到单独的js文件中(utils/vant-ui.js)1.全部导入会引起项目打包后的体积变大，进而影响用户访问网站的性能。2.按需导入只会导入你使用的组件，进而节约了资源。main.js中导入该文件即可。
vue引用vant字体图标，在离线时，看不了
yaya07755的专栏
12-29 351
如果是全部vant依赖的情况下，页面上字体图标不显示或者显示为□ 在main.js中 import 'vant/lib/icon/local.css';//引用vant字体css tangyk 这样就可以正常加载了
vue卸载（升级）UI组件
weixin_40151813的博客
01-17 6106
首先把之前 的VANT 卸载掉 npm uninstall vant 然后重新安装 一次vant npm i vant -S
在Vue中引入vant报错（解决办法）
fzxyxf1314的博客
07-19 9720
第一种方案： 一、安装vant
vue3.0项目vant组件引入
weixin_57774738的博客
05-31 1248
创建项目 vue create yxsc_project 安装vant 组件库 第一步 安装命令 npm install vant@next --save (因为使用的是vue3.x 所以要安装vant的针对vue3的版本 vant@next) 第二部 vant的进阶使用 通过 npm install postcss postcss-pxtorem --save-dev (用来将px尺寸转化为rem尺寸) 配置rem的根元素字体大小 安装lib-flexiable 安装命令 npm i
vue如何二次封装一个高频可复用的组件
发果叁
10-30 2347
以一个弹框组件为例，我们二次封装组件到底需要注意哪些问题，以及我们必须注意些什么，核心思想就是继承原有组件的特性，与是核心* 当我们二次封装一个组件时，我们自定义的一些接口能少就少，组件名必须见名知意* 二次封装的组件不仅仅只是包一层，我们可以尝试用数据配置方式让组件更通用，预留一些接口插槽，或者自定义formater函数，不强制约束，让组件灵活性拓展性更强些* 组件的props名字尽量不要带来负担，最好与原有组件props保持一致* 本文。
做好这 16 个方向，逐步搭建出团队的 vue3 前端架构
uuuyy_的博客
12-31 630
前言 由于vue3.2版本的发布，<script setup>的实验性标志已经去掉，这说明这个语法提案已经正式开始使用，并且我个人对这个方案表示非常喜欢，到目前为止，我认为 vue3 已经完全可以用于生产环境。在此将我的开发体验，总结至此，分享给大家。 我认为前端架构核心工作是定制一套适合当前业务需求的解决方案，从而降低需求的增加而带来的技术实现的复杂度。下面我将从 16 个方向，逐渐带领大家搭建一套属于你自己的脚手架，制定一套合理的解决方案，为项目打下良好的基础，与同伴形成合适的开发...
这一次，彻底入门前端测试，覆盖单元测试、组件测试（2.4w 字）
小王的技术库
03-02 2292
什么是软件测试？要回答这个问题，我们首先需要先明确为什么要进行软件测试？答案很简单，就是为了保证软件质量。对于软件来说，不论采用什么技术和什么方法来进行开发，软件产品中都或多或少会存在一些错误和问题。采用先进的开发方式、完善的开发过程，可以减少错误的引入，但是不可能完全杜绝软件中的错误，而这些错误就需要通过测试来找出。因此，软件测试是软件质量保证的关键步骤。关于软件测试的定义，一直有正反两方面的争辩。
前端面试题汇总
m0_73596760的博客
01-11 541
前端,面试,vue,css,js
小程序-独立分包使用npm第三方(vant)组件库
weixin_47124112的博客
01-03 1022
注意：当构建完的时候，独立分包没有多出文件那就在独立分包下新增一个文件在独立分包页面的json下引入组件{在页面使用组件
vue+vite+ts项目按需要引入vant或elementPlus等ui插件时,抽离成单独的 js 文件
qq_21115567的博客
04-15 860
感觉本人写代码有强迫症,每当看到一个文件乱糟糟的就不舒服,为了文件代码美观所以将main.ts中有关引入vant的代码分离出来: main.ts import { createApp } from 'vue' import App from './App.vue' import router from './router' import vant from './vant' export const app = createApp(App) app.use(router) app.use(vant) a
postcss-pxtorem 使第三方UI库不进行转换
zhengbusi的博客
08-02 6295
在项目中用到了 淘宝移动端flexible解决方案，同时也使用到了第三方UI库。这时就出现了一个问题。第三方UI库使用的是px,而postcss将页面中的px 全部转化成了rem.导致样式缩小。 查阅postcss配置资料后发现postcss-pxtorem 中有个selectorBlackList 属性，忽略掉某些选择器 我的项目中使用的 vant-UI 因此我只需要将 .van 忽略掉就...
前端 vant安装记录
Jana Jing的分享
02-21 585
接着你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为按需引入的形式。2、安装 vant （可能安装最新的vant，vue 版本不支持）3. 引入组件 （在main.js 里面引入组件）
postcss-pxtorem 忽略某一些类名
阿之阿佐
09-19 4378
.postcssrc.js // https://github.com/michael-ciniawsky/postcss-load-config module.exports = { plugins: { "postcss-import": {}, "postcss-url": {}, autoprefixer: {}, "postcss-pxtorem...
项目小技巧------注册组件抽离统一管理
laoli360的博客
10-22 164
正常工作的时候 我们的Vue脚手架 导入了很多组件,例如我们这里的vant组件,如果全放到main .js内 就不太好管理和操作. 这里我就教给大家如何将一堆注册组件抽离统一管理 首先我们准备一个js文件 用来装vant组件注册 需要剪切的有如下 剪切完毕后 只需要在main.js 引入个js文件即可实现 vant组件抽离 统一管理 就是这么简单,感觉很容易吧? ...
vant自动按需引入组件 (推荐)
小糖穿越火线
09-16 5215
vant自动按需引入组件 (推荐) 安装 # 通过 npm 安装 npm i vant -S babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式 # 安装插件 npm i babel-plugin-import -D 配置： // 在.babelrc 中添加配置 // 注意：webpack 1 无...
uniapp中怎么引入vant组件库
06-10
要在uniapp中使用vant组件库，需要按照以下步骤进行操作： 1. 在项目的根目录下使用npm安装...需要注意的是，引入vant组件库后，还需要在`vue.config.js`中配置按需引入，以减小打包体积。具体请参考vant官方文档。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr.指尖舞者

如果帮助到了你，请给点赞助支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值