22.element-ui插件

ele团队开发的基于vue2.0的组件。 官网

安装

npm i element-ui -S

在main.js中import

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

• 使用

  在APP.vue中使用布局容器

<template>
	<div id="app">
     <el-container>
       <el-header class="header">Header</el-header>
       <el-container>
         <el-aside width="200px" class="aside">Aside</el-aside>
         <el-main>Main</el-main>
       </el-container>
     </el-container>

	</div>
</template>

<script>

	export default {
		name: 'App',
		components: {
			
		},
		data() {
			return {
				
			}
		},
		methods:{

		}
	}
</script>

<style scoped>

.header{
	border-bottom: 1px solid aqua ;
}

.aside{
	border-right: 1px solid aqua;
}



</style>

22.1 封装组件使用路由的方式访问

• 在views 下面封装了index.vue

  <template>
  	<div>
  		<el-container class="wrap" >
  		  <el-header class="header">Header</el-header>
  		  <el-container>
  		    <el-aside width="200px" class="aside">Aside</el-aside>
  		    <el-main>Main</el-main>
  		  </el-container>
  		</el-container>
  	</div>
  </template>
  
  <script>
  </script>
  
  <style scoped>
  	
  	.wrap{
  		height: 100vh;
  	}
  	
  	.header{
  		border-bottom: 1px solid aqua ;
  	}
  	
  	.aside{
  		border-right: 1px solid aqua;
  	}
  </style>

• views/login/index.vue 登录

<template>
  <div>登录画面</div>
</template>

<script>
  export default {
    name: 'Login',
    components: {

    },
    data() {
      return {
      }
    },
    methods: {

    },
    created() { }
  }
</script>

<style>
</style>

• 修改App.vue

<div id="app">
     
		<router-view></router-view>
	 	 
	</div>

• 路由

import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter);

export default new VueRouter({
	mode:'hash',
	routes:[
		{
			path:'/',
			name:'Index',
			component:()=>import('@/views')
		},
		{
			path:'/login',
			name:'Login',
			component:() =>import('@/views/login')
		}
	]
});

22.2 使用菜单组件

在src/components目录下创建menu.vue组件

<template>

	<el-menu default-active="2" class="el-menu-vertical-demo" router background-color="#222D32" text-color="#B8C7CE"
	 active-text-color="#fff">


		<el-submenu index="1">
			<template slot="title">
				<span>权限管理</span>
			</template>
			<el-menu-item-group>
				<el-menu-item index="/user"> <i class="el-icon-location"></i>用户管理</el-menu-item>
				<el-menu-item index="/menu"> <i class="el-icon-location"></i>菜单管理</el-menu-item>
			</el-menu-item-group>
		</el-submenu>
		
		<el-submenu index="2">
			<template slot="title">
				<span>ElementUI组件</span>
			</template>
			<el-menu-item-group>
				<el-menu-item index="/table"> <i class="el-icon-location"></i>表格组件</el-menu-item>
			</el-menu-item-group>
		</el-submenu>

	</el-menu>

</template>

<script>
	export default {
		name: 'Menu'
	}
</script>

<style>
</style>

在home中import

<template>
	<div>
		<el-container class="wrap" >
		  <el-header class="header">Header</el-header>
		  <el-container>
		    <el-aside width="280px" class="aside">
				<Menu></Menu>
			</el-aside>
		    <el-main>
				<router-view></router-view>
			</el-main>
		  </el-container>
		</el-container>
	</div>
</template>

<script>
	import Menu from '@/components/menu'
	export default{
		name:'Index',
		components:{
			Menu
		}
	}
</script>

<style scoped>
	
	.wrap{
		height: 100vh;
	}
	
	.header{
		border-bottom: 1px solid aqua ;
		background-color: cornflowerblue;
	}
	
	.aside{
		background-color: #222D32;
		border-right: 1px solid aqua;
	}
</style>