vue项目中使用require.context引入组件

目录

• 背景
• require.context 是什么？
• require.context 的基本用法
• require.content 的应用场景

背景

我们在vue项目中，我们可能或有很多的组件需要全局注册，大家有没有遇到这样的烦恼，组件太多，需要一个一个引入注册呢？

require.context 是什么？

require.context 是webpack的api,我们可以通过require.context()函数来创建自己的context。

require.context 的基本用法

语法如下

require.context(
  directory,
  (useSubdirectories = true),
  (regExp = /^\.\/.*$/),
  (mode = 'sync')
);

示例： require.context可以传三个参数：一个要搜索的目录，一个标记表示是否还搜索其子目录， 以及一个匹配文件的正则表达式

require.context("@/views/pageComponents",true,/.vue$/)
//  创建出一个context,其中文件来自非pageComponents目录, request以`.vue`文件结尾

注意点

一个 context module 会导出一个（require）函数，此函数可以接收一个参数：request。此导出函数有三个属性：resolve, keys, id。 返回的函数

webpackContext(req) {
	var id = webpackContextResolve(req);
	return __webpack_require__(id);
}

require.content 的应用场景

案例1

我们在vue项目工程中，封装了很多组件，让后在需要用到的页面需要一个一个引入,

使用方法

const pageComponents = require.context("@/views/pageComponents",true,/.vue$/)
export const components={}
pageComponents.keys().forEach(item=>{
    const name = path.basename(item,".vue")
    components[name] = pageComponents(item).default
})

案例2

加载所有的图片

	<div id="app">
		<img src="@/assets/logo.png">
		<li v-for="item in images">
			<h3>Image: {{ item }}</h3>
			<img :src="imgUrl(item)">
		</li>
	</div>
</template>

<script>
	var imagesContext = require.context('@/assets/kittens/', false, /\.jpg$/);
	console.log(imagesContext)
	console.log(imagesContext('./kitten1.jpg'))
	console.log(imagesContext.keys())
	export default {
		created: function() {
			this.images = imagesContext.keys();
		},
		name: 'haha',
		data() {
			return {
				images: [],
				msg: 'Welcome to Your Vue.js App'
			}
		},
		methods: {
			imgUrl: function(path) {
				//console.log('Path:' + path);
				return imagesContext(path)
			}
		}
	}
</script>

<style>
	#app {
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
	}

	h1,
	h2 {
		font-weight: normal;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 0 10px;
	}

	a {
		color: #42b983;
	}
</style>

到此这篇关于vue项目中使用require.context引入组件的文章就介绍到这了,更多相关vue require.context引入内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！