vue批量引入components组件

平时项目开发中引入组件都是用下面的方式来移入

import A from './components/a.vue'

有时候某个页面功能很多，需要拆分成多个模块。
这个时候我们通常想到的都是下面的方式，几个还好，万一有几十个呢

废话不多说直接上干货！！！

vite

vite批量引入components组件

   // 批量引入组件const files = import.meta.globEager('./components/*.vue')const coms = {}// 遍历生成对象集合for (const key in files) {const com = files[key].defaultcoms[com.name] = com}

vite批量获取components组件路径

const files = import.meta.glob('./components/*.js')

webpack

  // 引入组件const model = require.context('./components', true, /\/index.vue$/)// const model = require.context('./components', true, /\.vue$/)let components = {}model.keys().forEach(item => {let comp = model(item)components[comp.default.name] = comp.default})

创作不易，点个赞吧~

vue批量引入components组件相关推荐

vue 打包后 components 组件样式丢失问题
没想到用了vue这就久了,能遇到这种神奇的问题,记录一下... 项目是多入口的打包方式,所以有多个router来写路由在其中一个入口分支的所有相关页面都没有引入的组件的样式.这个样式是写在 com ...
Vue项目中components组件的使用笔记
目录前言一.components和component的区别? 二.components使用的步骤 1.创建组件vue文件 2.引入组件 3.注册组件 4.应用组件总结前言本文章,只是初步了解 ...
vue项目引入vux组件
搭建好vue项目后,这边主要做的手机端,综合比较后决定引入vux组件 1.安装vux npm install vux --save 或者使用 yarn yarn add vux // 安装 yarn ...
vue调用顺序(初学版) index.html → main.js → app.vue → index.js → components/组件测试
关于它是怎么调用运作的:https://mp.csdn.net/postedit/86134414 一. 准备工作: 1.下载webstorm,安装vue. 2.创建项目,cd到要放项目的文件夹下 v ...
vue全局安装jquery，vue使用bootstrap框架，vue中封装websocket通讯，vue引入element-ui 组件库，引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...
Vue之单文件组件和脚手架
简介主要介绍单文件组件的定义和编写方法和脚手架相关知识介绍. 单文件组件的定义是一个文件只有一个组件,使用xxx.vue文件,这个文件是vue团队定义的一种文件类型. xxx.vue文件里面可以使用 ...
vue基础二（组件）
组件组件组件的复用组件的注册组件名放置限制通过 Prop 向子组件传递数据单向数据流 poro的验证属性继承自定义事件插槽slot 普通插槽具名插槽默认插槽作用域插槽解构插 ...
vue 公用页面引用_vue中实现部分页面引入公共组件
前言我们可以把公共组件放到App.vue中,但是有时候我们希望某个页面不需要这写公共部分,那么需要怎么设置呢? 本文为大家介绍三种部分页面引入公共组件的方法. 方法一:利用子路由创建一个layou ...
怎样在vue单页面中引入其他组件
场景在一个vue的单页面,假如是home.vue中要引入其他组件的内容. 页面结构如下: 实现首先在components下新建组件Today_recommend.vue组件 <templat ...

vue批量引入components组件

vite

webpack

vue批量引入components组件相关推荐

最新文章

热门文章