Element UI
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
基本使用示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style type="text/css">
.el-menu{
display: flex;
align-items: center; /* 水平居中 */
justify-content: center; /* 垂直居中 */
}
</style>
</head>
<body>
<div id="app">
<my_header></my_header>
<router-view></router-view>
</div>
<template id="header">
<div class="luffy_header">
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :router="true">
<el-menu-item index="/">首页</el-menu-item>
<el-menu-item index="/course">轻课</el-menu-item>
<el-menu-item index="3">免费课程</el-menu-item>
<el-menu-item index="4">学位课程</el-menu-item>
<el-menu-item index="5">智能题库</el-menu-item>
<el-menu-item index="6">处理中心</el-menu-item>
</el-menu>
</div>
</template>
<script>
let my_header = {
template:"#header",
data(){
return{
activeIndex:"/"
}
}
};
let url = [
{
path:"/",
component:{
template: '<div><h1>首页组件</h1></div>'
}
},
{
path:"/course",
component:{
template: '<div><h1>课程组件</h1></div>'
}
},
];
let router = new VueRouter({
routes:url,
})
const app = new Vue({
el:"#app",
router: router,
components:{
my_header:my_header
}
})
</script>
</body>
</html>