项目小技巧------注册组件抽离统一管理

最新推荐文章于 2024-09-06 22:20:29 发布
最新推荐文章于 2024-09-06 22:20:29 发布
阅读量164 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/laoli360/article/details/120912201
版权

Vue Vant组件 抽离管理 main.js 组件注册
关键词由CSDN通过智能技术生成

 正常工作的时候  我们的Vue脚手架 导入了很多组件,例如我们这里的vant组件,如果全放到main

.js内 就不太好管理和操作.

这里我就教给大家如何将一堆注册组件抽离统一管理

首先我们准备一个js文件 用来装vant组件注册

 需要剪切的有如下

 

 剪切完毕后 只需要在main.js 引入个js文件即可实现 vant组件抽离 统一管理

 就是这么简单,感觉很容易吧?

老李头的代码生活
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2023年前端面试汇总-React
越陌度阡
06-29 813
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event
【- Flutter 桌面篇 -】 FlutterUnit mac版闪亮登场
2401_84121627的博客
04-18 616
简历首选内推方式，速度快，效率高啊！然后可以在拉钩，boss，脉脉，大街上看看。简历上写道熟悉什么技术就一定要去熟悉它，不然被问到不会很尴尬！做过什么项目，即使项目体量不大，但也一定要熟悉实现原理！不是你负责的部分，也可以看看同事是怎么实现的，换你来做你会怎么做？做过什么，会什么是广度问题，取决于项目内容。但做过什么，达到怎样一个境界，这是深度问题，和个人学习能力和解决问题的态度有关了。大公司看深度，小公司看广度。大公司面试你会的，小公司面试他们用到的你会不会，也就是岗位匹配度。
大厂vue代码很优雅
qiqi学习园地
10-08 570
全局注册conponent 全局注册component的优雅之处在于，对于一些高频率使用的组件，不需要在使用的组件里面单个引入，造成引入过多感官不优美。 基于个人编码习惯，会将component组件作为全局的组件使用。 // 在component组件中新建global.js // global.js import Vue from 'vue' // 首字母变大写 function ChangeS...
安装Vant组件（Vue 一次性导入）
qq_22841387的博客
09-23 453
安装Vant组件（Vue 一次性导入） ①安装 安装 Vant2 npm i vant -S 安装 Vant3 npm i vant@next -S ②在main.js中注册 import Vant from 'vant'; import 'vant/lib/index.css';
Vue项目优化（二）——把引入的vant组件库抽离出去
qq_56989560的博客
05-19 738
Vue项目优化（二）——把引入的vant组件库抽离出去
[Vue+Vant] 使用 Vant 组件的详细操作流程
weixin_42902669的博客
05-11 1845
目录1. 序言2. 在 main.js 中注册组件3. 在 components 目录中创建组件4. 在 App.vue 中引用组件 1. 序言 首先创建一个基于 Vue 和 Vant 的项目, 项目的创建和配置可以参考 [Vue+Vant] 使用脚手架创建和配置项目, Vant 组件的详细参数和用法参考 Vant 官方文档 , 下面以组件 Tabbar 为例说明组件的使用流程 2. 在 main.js 中注册组件 在 main.js 中注册组件属于全局注册 import { createApp } fro
前端基础知识总结---CSS篇
Web前端开发工程师
09-09 2341
本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！ 目录 1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？ 2.CSS 选择符有哪些？ 3.::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。 4.伪类与伪元素的区别 5.CSS 中哪些属性可以继承？ 6.CSS 优先级算法如何计算？ 7.关于伪类 LVHA 的解释? 8.CSS3 新增伪类有那些？ 9.如何居中 div？ 10.disp
设计模式 - Javascript 描述
weixin_43758603的博客
11-12 1445
理解设计模式 项目=模块+模块间的联系 设计模式的作用 - 优化 模块内结构 模块间关系 代码质量 学习设计模式要脱离出具体的语法,去领会思想 设计原则 开闭 - 程序 对扩展开放,对修改关闭 单一职责 - 模块 依赖倒置 上层模块不依赖于下层具体的模块,而依赖于抽象的功能 避免下层变动对上层产生剧烈影响.中间增加抽象层 class food1 {} class food2 {} class food3 {} //点餐 - 具体层 function order(food) {
面试总结（1）---7.28
刘群智的博客
07-28 1600
Ajax关于readyState（状态值）和status（状态码）的研究 var getXmlHttpRequest = function () {     try{         //主流浏览器提供了XMLHttpRequest对象         return new XMLHttpRequest();     }catch(e){         //低版本的IE浏览器没有...
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
如何统一的对组件进行管理
greed
08-28 615
如何统一的对组件进行管理 结构如下 导入一次把layout要用到Navbar, Sidebar, AppMain 的组件都导入 子组件内不需要别的操作 把组件都先导入index.js进行统一的管理 // 导入组件的默认名称是default 但是通过as起了一个别名 export { default as Navbar } from './Navbar' export { default as Sidebar } from './Sidebar' export { default as AppMain }
Vant组件按需注册
UserWu1001的博客
10-29 1881
项目场景： 提示：这里简述项目相关背景： 例如：项目场景：示例:通过蓝牙芯片(HC-05)与手机 APP 通信，每隔 5s 传输一批传感器数据(不是很大) 问题描述： 提示：这里描述项目中遇到的问题： 例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据 APP 中接收数据代码： @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obta
Android组件化编译环境版本统一管理
luo4566的博客
05-16 490
http://www.bubuko.com/infodetail-2595232.html
微信小程序安装Vant Weapp
anne0000的博客
07-07 655
1-通过npm 安装 npm i @vant/weapp -S --production 2-修改app.json 将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。 3-修改 project.config.json 开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。 需要手动在 project.config.json
【vue】vue统一管理全局组件
Meditation_Crazy
11-04 491
前言 转载：https://www.cnblogs.com/zjw2004112/p/11518767.html 代码示例 装载全局组件 import Vue from 'vue' // 装载全局组件 export default function(vue) { if (this.installed) { return } Vue.component( 'public-remote-select-unit', import('@/components/publ.
组件库Vant在Vue项目中的引入
qq_32811469的博客
09-24 529
Vant是一个轻量、可靠的移动端组件库,接下来介绍在vue项目中的三种安装方式
Vue前端路由详解——以Ruoyi框架为案例学习
警警的博客
09-03 1076
Ruoyi框架前端路由通过Vue Router实现，支持静态路由和动态路由的配置，通过路由守卫实现权限控制等需求，采用路由懒加载提高应用性能，并通过路由元信息存储自定义信息。这些特性共同构成了Ruoyi框架前端路由的完整体系，为开发者提供了灵活、强大的路由管理能力。
Vue2 中对数组进行操作时需要注意什么
最新发布
m0_73882020的博客
09-06 519
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
数据模型与E-R图：从现实到信息的两级抽象
数据模型是数据管理的基础，E-R方法提供了设计数据库的强大工具，它使我们能够从现实世界的复杂性中抽离，构建出适应计算机处理的数据结构。通过对实体、属性、联系的理解和应用，我们可以构建出高效、准确的数据库...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值