前言：前端小菜，有不足的地方望指正，共勉。
element-ui的安装与使用
一、新建一个vue项目后，首先安装element-ui。
1.通过npm安装：
（1）全局引用：
》在VS code中新建一个终端，执行以下语句。
npm i element-ui -S
》在main.js 中引入 element ui。
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' //引用 element-ui 样式
Vue.use(ElementUI ) //最后要use ElementUI ，不然会报错
（2）按需引用:
》安装 babel-plugin-component后增加一个babel.config.js文件
npm i element-ui -S
npm install babel-plugin-component -D
》将babel.config.js文件修改
module.exports = {
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
》在main.js 中 按需引用你要使用的组件
import 'element-ui/lib/theme-chalk/index.css'
import { Button,Radio } from 'element-ui'; //需要使用寿命组件就引入什么
Vue.use(Button)
Vue.use(Radio)
2.通过CDN引用：
<!-- 引入样式 -->
<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>
vue路由的使用
一、实现的效果
二、安装插件
npm install vue-router
//安装less插件，写CSS
npm i less
npm i less-loader@5.0.0
三、HTML页面的实现
创建以下文件夹与文件
（1）左侧导航栏：CommonAside -> index.vue（需先安装element-ui才能使用下面这些HTML标签）
<template>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo"
background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
@open="handleOpen" @close="handleClose" :collapse="isCollapse">
<h3>后台管理系统</h3>
<el-menu-item @click="clickMenu(item)" v-for="item in noChildren" :index="item.path" :key="item.path">
<i :class="'el-icon-'+item.icon"></i>
<span slot="title">{{item.label}}</span>
</el-menu-item>
<el-submenu v-for="item in hasChildren" :index="item.path+''" :key="item.path">
<template slot="title">
<i :class="'el-icon-'+item.icon"></i>
<span slot="title">{{item.label}}</span>
</template>
<el-menu-item-group v-for="(subItem) in item.children" :key="subItem.path">
<el-menu-item :index="subItem.path+''">{{subItem.label}}</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</template>
<script>
export default {
name: "Home",
data() {
return {
isCollapse:false,
menu:[
{
path: '/',
name: 'home',
label: '首页',
icon: 's-home',
url: 'Home/Home'
},
{
path: '/user',
name: 'user',
label: '用户管理',
icon: 'user',
url: 'UserManage'
},
{
label: '其他',
icon: 'location',
children: [
{
path: '/page1',
name: 'page1',
label: '页面1',
icon: 'setting',
url: 'Other/PageOne'
},
{
path: '/page2',
name: 'page2',
label: '页面2',
icon: 'setting',
url: 'Other/PageTwo'
}
]
}
],
};
},
computed:{
noChildren(){
return this.menu.filter(item => !item.children)
},
hasChildren(){
return this.menu.filter(item => item.children)
}
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
clickMenu(item){
this.$router.push({name:item.name}) //编程式导航
}
},
};
</script>
<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
.el-menu{
height: 100%;
border: none;
h3{
color: #fff;
text-align: center;
line-height: 48px;
}
}
</style>
（2）Home：Home-> index.vue
<template>
<div> Home页面</div>
</template>
（3）用户管理：User -> index.vue
<template>
<div> User页面 </div>
</template>
（4）主页面：Main -> index.vue
<template>
<el-container style="height:100%">
<el-aside width="auto">
<CommonAside></CommonAside>
</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>
<router-view></router-view> //路由跳转的显示区域
</el-main>
</el-container>
</el-container>
</template>
<script>
import CommonAside from '@/components/public/CommonAside'
export default {
name:'Main',
components:{
CommonAside,
},
}
</script>
<style lang="less" scoped>
.el-header{
background-color: #333;
}
.el-main{
padding-top: 0;
}
</style>
四、js的实现
1.router -> index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name:'Main',
redirect: '/home', //重定向路径
component:() => import('@/views/Main'),
children:[
{
path: '/home',
name:'home',
component:()=> import('@/views/Home'),
},
{
path: '/user',
name:'user',
component:()=> import('@/views/User'),
},
]
},
]
const router = new VueRouter({
mode: 'hash',
routes
})
export default router
2.main.js引入router
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import router from './router'
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
router,
render: h => h(App),
}).$mount('#app')
