vue中align_vue中命名视图实现经典布局

html>

Document

.header {

font-size: 16px;

width: 100%;

color: #fff;

text-align: center;

background-color: red;

padding: 10px 0;

margin: 0;

}

.box {

display: flex;

}

.leftBox {

flex: 2;

height: 500px;

color: #fff;

background-color: rosybrown;

margin: 0;

}

.mainBox {

flex: 8;

height: 500px;

color: #fff;

background-color: slateblue;

margin: 0;

}

 //只需要添加name属性就会去匹配相应的名字的组件

// 组件

var header = {

template: "

header头部区域

"

}

var leftBox = {

template: "

left区域

"

}

var mainBox = {

template: "

main区域

"

}

//路由规则

var router = new VueRouter({

routes: [

{

path: '/', components: {  //components加s表示有多个组件，他为一个对象

'default': header,   //表示默认的情况下显示

'left': leftBox,　　　// 页面中占位符，中的name要与字符串(left名字随便起)一样 leftBox表示组件名

'main': mainBox,  // 页面中占位符，中的name要与字符串(left名字随便起)一样 leftBox表示组件名

}

}

]

})

var vm = new Vue({

el: "#app",

data: {},

methods: {},

router: router

})