components层代码实现

ooCSS -》BEM(进阶版OOCSS):

经典的组件:栅格、布局组件

自定义组件



ooCSS 就只需要拓展一个新的对象 拓展一个类名 例如 <div clas=header fixed></div>

//传统的写法

<template>

<div class="media">

<div class="img"></div>

<div class="content"></div></div>

</template>

<style>

.media {}

.media .img{}

.media .content {}

</style>

<c-media class="fixed"></c-media>



//BEM的写法

<template>

<div class="media">

<div class="media__img"></div>

<div class="media__ content"></div></div>

</template>

<style>

.media {}

.media .media_img {}

.media .media_content{}

 </style>

<c-media></c-media>



封装全局组件的方法 在index.js

import { Layout,Header,Aside,Main,Footer } from './layout';

import Col from 'vant/lib/col';

import 'vant/lib/col/index.css';

import Row from 'vant/lib/row';

import 'vant/lib/row/index.css';

const components={

    Layout,

    Header,

    Aside,

    Main,

    Footer,

    CRow:Row,

    CCol:Col,

}

//安装自定义或者其他全局组件

const install = (app)=>{

    Object.keys(components).forEach(key =>{

        if(key === 'CRow' || key === 'CCol')

         {app.component(key , components[key])

        }else{

    app.component(components[key]['name'],components[key])}

    });

    }

const Mui={

    install

}

export default Mui

如何commponet文件夹中index.js导出导入组件

import Layout from './layout.vue';

import Header from './header.vue';

import Aside from './aside.vue' ;

import Main from './main.vue';

import Footer from './footer.vue' ;

export {Layout,Header,Aside,Main,Footer};
然后在main.js使用
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'normalize.css/normalize.css'
import '@/style/index.scss'
import Mui from '@/components'

createApp(App).use(store).use(router).use(Mui).mount('#app')