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

如上图 no_started中引入no_bac1，no_bac2，no_bac3，no_bac4，怎么样才能代码看的美观呢？也就是按需引入。

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

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

index.js

export { default as no1 } from './no_bac1.vue'
export { default as no2 } from './no_bac2.vue'
export { default as no3 } from './no_bac3.vue'
export { default as no4 } from './no_bac4.vue'

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

(3)no_started中引入组件

<template>
  <div class="no-start">
    <div class="bac bac1">
      <no1></no1>
    </div>
    <div class="bac bac2">
      <no2></no2>
    </div>
    <div class="bac bac3">
      <no3></no3>
    </div>
    <div class="bac bac4">
      <no4></no4>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
import { no1, no2, no3, no4 } from '../components'
export default {
  name: 'NoStart',
  data() {
    return {
      baigeiData: {}
    }
  },
  components: {
    no1,
    no2,
    no3,
    no4
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {}
}
</script>