vue cli通过import...from引入单个组件或者一个文件夹下的多个组件

时间:2020-05-28 14:46:29 类型:vue
字号:    

1, 引入单个组件

    import Top from './Top.vue';

2, 引入文件夹下的多个组件

    import {Bottom,Left} from '../views';

    注意, 这里在views文件下要有一个index.js文件, 内容如下:

   export { default as Left } from './Left.vue'

   export { default as Bottom } from './Bottom.vue'

   目录如下:

   4.jpg

3, 注册组件

import Top from './Top.vue';
import {Bottom,Left} from '../views';
export default {
  name: 'ZhuangZi',
  components: {
    Top,
    Bottom,
    Left
  },
  data () {
    return {
      msg: '欢迎庄子同学',
      
    }
  },
  
}


<