vue环境下一个主页面引入多个子组件的方法

最新推荐文章于 2024-07-24 10:15:59 发布

原创最新推荐文章于 2024-07-24 10:15:59 发布 · 1.8w 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#import

vue 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种在Vue项目中实现组件按需加载的方法，通过合理配置和组织代码结构，可以有效减少项目体积并提高加载速度。

通常我们使用的是单个文件引入，但是这样就会有很多代码是重复的，怎样才能实现“按需“引入呢？

1、常见的引入单个vue文件的写法：import Header from '@/view/layout/Header';

2、实现”按需“引入的写法：

”按需“引入多个vue文件的写法：import {Header,Footer,Content} from '@/view/layout';

使用步骤：

（1）这些被引入的文件放置在同一个文件下

可以看到 Header、Footer、Content都是在layout文件夹下的；

（2）配置（1）文件夹下的index.js 文件内容

该index.js文件为自己创建的；

配置如下：

export { default as vue文件名 } from './vue文件名';

将layout文件夹下的需要引入的文件都以这种方式写在这里；

接下来只需要在需要使用这些vue组件的文件中以这种方式引入，并设置成组件即可。

<script>
import {Header,Footer,Content} from '@/view/layout';
//import Header from '@/view/layout/Header';
export default {
  name: 'Layout',
  data () {
    return {
      msg: 'layout'
    }
  },
  components: {
      Header,
      Content,
      Footer
    },
}
</script>

本人的理解：

在没有标明文件的后缀时，先去找的是名一样，如果没有其他干扰项，基本上就是这个文件。

或者：

先去找js文件，有export导出的文件，再其他文件。