一、搭建项目
vue create 项目名称
二、配置element-plus组件库
2.1 安装(在项目中安装)
npm install element-plus //生产依赖[https://element-plus.gitee.io/zh-CN/guide/installation.html]
npm install -D unplugin-vue-components unplugin-auto-import //开发依赖[https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5]
2.2 在vue.config.js中配置
const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = defineConfig({
configureWebpack: {
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
},
})
2.3 重启项目
npm run serve
三、使用ElementPlus搭建主面板
3.1 创建主面板文件(src->layout->index.vue)
3.2 复制需要的组件
在elementplus->布局容器 里面复制需要的组件代码到src->layout->index.vue
3.3 配置路由(router->index.js)
{
path: '/',
name: 'main',
component: ()=>import('../layout/index.vue')//懒加载
}
3.4 在App.vue里面呈现
<template>
<div>
<router-view></router-view>
</div>
</template>
四、搭建侧边菜单
4.1 创建侧边菜单文件(layout->components->side-menu.vue)
4.2 复制需要的组件
在elementplus->菜单 里面复制需要的组件代码到(layout->components->side-menu.vue)
4.3 在主面板(layout->index.vue)中引入侧边菜单组件
hmlt:
<el-aside width="200px">
<sideMenu/>
</el-aside>
js:
<script>
import sideMenu from './components/side-menu.vue'
export default {
components:{
sideMenu
}
}
</script>
4.4 调整样式
html:
<el-aside class="menu-cont" width="200px">
<sideMenu/>
</el-aside>
css:
<style lang="scss" scoped>
.menu-cont {
height: 100vh;
background-color: #545c64;
}
</style>
五、使用 normalize.css 重置项目样式
将样式改为新的标准模式 文档
5.1 安装
npm i normalize.css
5.2 main.js 中引入
import 'normalize.css'
六、子组件配置(main部分)
6.1 创建子组件
6.2 配置子路由(router->index.js)
{
path: '/',
name: 'main',
component: ()=>import('../layout/index.vue'),//懒加载
children:[
{
path:'/classify/list',
component:()=>import('../views/classify/list.vue')
},
{
path:'/classify/pub',
component:()=>import('../views/classify/pub.vue')
},
{
path:'/dashboard',
component:()=>import('../views/dashboard.vue')
}
]
},
6.3 呈现子组件(layout->index.vue)
<el-main>
<router-view></router-view>
</el-main>
七、动态生成侧边菜单
1、设置元信息meta(router->index.js)
children:[
{
path:'/classify/list',
component:()=>import('../views/classify/list.vue'),
meta:{//元信息
label:'分类列表'//label是自定义的
}
},
{
path:'/classify/pub',
component:()=>import('../views/classify/pub.vue'),
meta:{//元信息
label:'分类发布'//label是自定义的
}
},
{
path:'/dashboard',
component:()=>import('../views/dashboard.vue'),
meta:{//元信息
label:'可视化图表'//label是自定义的
}
}
2、拿到数据动态生成菜单(layout->components->side-menu.vue)
html:
<template>
<div>
<el-menu
active-text-color="#ffd04b"
background-color="#545c64"
class="el-menu-vertical-demo"
default-active="2"
text-color="#fff"
@open="handleOpen"
@close="handleClose"
router
>
<el-sub-menu index="1">
<template #title>
<el-icon><location /></el-icon>
<span>分类管理</span>
</template>
<el-menu-item index="1-1">分类列表</el-menu-item>
<el-menu-item index="1-2">分类发布</el-menu-item>
</el-sub-menu>
<el-menu-item v-for="item in menuData" :key="item.path" :index="item.path">
<el-icon><setting /></el-icon>
<span>{{item.meta.label}}</span>
</el-menu-item>
</el-menu>
</div>
</template>
js:
<script>
import {
Document,
Menu as IconMenu,
Location,
Setting,
} from '@element-plus/icons-vue'
import {routes} from '../../router/index'
export default {
methods: {
handleOpen(){},
handleClose(){}
},
data(){
return{
menuData:routes[0].children
}
}
}
</script>
八、调整路由层级实现菜单级联
8.1、新建文件
<template>
<div>
<router-view></router-view>
</div>
</template>
8.2、配置路由
{
path: '/',
name: 'main',
component: () => import('../layout/index.vue'),//懒加载
children: [
{
path: '/classify',
component: () => import('../views/classify/index.vue'),
meta: {
label: '分类管理',
},
children: [
{
path: '/classify/list',
component: () => import('../views/classify/list.vue'),
meta: {//元信息
label: '分类列表'//label是自定义的
}
},
{
path: '/classify/pub',
component: () => import('../views/classify/pub.vue'),
meta: {//元信息
label: '分类发布'//label是自定义的
}
},
]
},
{
path: '/dashboard',
component: () => import('../views/dashboard.vue'),
meta: {//元信息
label: '可视化图表'//label是自定义的
}
}
]
},
8.3 动态渲染菜单
<template>
<div>
<el-menu
active-text-color="#ffd04b"
background-color="#545c64"
class="el-menu-vertical-demo"
default-active="2"
text-color="#fff"
@open="handleOpen"
@close="handleClose"
router
>
<template v-for="item in menuData"
:key="item.path">
<el-sub-menu :index="item.path" v-if="item.children">
<template #title>
<el-icon><location /></el-icon>
<span>{{ item.meta.label }}</span>
</template>
<el-menu-item v-for="ite in item.children" :index="ite.path">{{ite.meta.label}}</el-menu-item>
</el-sub-menu>
<el-menu-item
:index="item.path"
v-else
>
<el-icon><setting /></el-icon>
<span>{{ item.meta.label }}</span>
</el-menu-item>
</template>
</el-menu>
</div>
</template>
九、动态渲染ico图标
9.1 全局注册所有图标
在图标里面找到注册所有图标下面的代码,复制到main.js文件中去
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
9.2 选择合适的图标
在图标集合中找到合适的图标,复制并设置到路由中(router->index.js)
meta: {
label: '分类管理',
icon:'Grid'
},
9.3 绑定动态组件
在(layout->components->side-menu.vue)中动态绑定组件
<el-icon>
<!-- 动态组件 -->
<component :is="item.meta.icon"></component>
</el-icon>
十、路径别名配置
- @vue/cli 默认开启了@路径别名
- 没有路径别名:../../../router/index.js
- 有路径别名:@/router/index.js
十一、搭建登录面板
11.1 新建登录组件文件
在views中新建文件login.vue文件, 并在表单中找到合适的登录表单组件代码复制到该文件之中
11.2 配置路由
在router->index.js中配置登录的路由
{
path:'/login',
component:()=>import('@/views/login.vue')
},
11.3 使用栅格布局控制登录面板
十二、路由全局守卫(路由拦截)
// router全局前置守卫
let isLogin = true; //模拟登录状态
router.beforeEach((to, from, next) => {
// to 去哪里
// from 从哪儿来
// next 调用后方可通过【通关文牒】
// console.log(to, from, next);
if (to.path.indexOf("login") == -1) {
if (isLogin) {
next(); //已登录用户直接放行
} else {
next("/login"); //没登录的用户,强行跳转到登录
}
} else {
next(); //登录路由直接放行
}
});