（系列九）使用Vue3+Element Plus创建前端框架（附源码）

说明

    该文章是属于OverallAuth2.0系列文章，每周更新一篇该系列文章（从0到1完成系统开发）。

    该系统文章，我会尽量说的非常详细，做到不管新手、老手都能看懂。

    说明：OverallAuth2.0 是一个简单、易懂、功能强大的权限+可视化流程管理系统。

友情提醒：本篇文章是属于系列文章，看该文章前，建议先看之前文章，可以更好理解项目结构。

有兴趣的朋友，请关注我吧(*^▽^*)。

关注我，学不会你来打我

废话文学

震惊！什么？你还不会使用Vue3+Element Plus搭建前端框架？

什么？你还在为找Vue3+Element Plus的前端框架模板而烦恼？

简单的不符合心意，成熟的又复杂看不懂？怎么办？

那还等什么，关注我，手把手教你搭建自己的前端模板。

创建项目，前置条件

安装VsCode

安装脚手架：npm install -g @vue/cli  我的版本v5.0.8

安装node.js（下载地址）：点击下载  我用的版本v21.7.3

创建Vue3项目

打开vsCode，在终端中切换创建项目路径（如果不切换，默认安装在C:\Users\admin）：如：cd  E:\Vue项目

使用vue create xxx命令创建项目，这里需要注意的是，项目名称中，不能包含大写字母

如下图所示

这里我们直接选择：使用Vue3安装，当然你也可以选择手动选择功能。

安装成功后，我们打开项目。

可以看到，新建项目的目录结构，非常简单明了。我们使用命令，运行看下效果

运行命令：npm run serve

默认项目样式

出现如下界面，证明我们创建项目成功。

安装Element Plus

--使用npm

npm install element-plus --save 

--使用

yarn add element-plus

--使用

pnpm install element-plus

安装成功后，我们在main中配置全局变量

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

 安装小图标：npm install @element-plus/icons-vue   

全局配置：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as Icons from '@element-plus/icons-vue'const app = createApp(App)
app.use(ElementPlus)
for (const [key, component] of Object.entries(Icons)) {app.component(key, component)}
app.mount('#app')

安装Typescript :npm install  --save-dev typescript ts-loader

把js文件转成ts： vue add typescript

说明下：因为element plus 官方用例也是使用ts，所以我们需要把js转换成ts

添加tsconfig.json配置文件，示例如下（不然使用ts会报错）

{"compilerOptions": {"target": "esnext","module": "esnext","strict": true,"jsx": "preserve","moduleResolution": "node","experimentalDecorators": true,"allowJs": true,"skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"forceConsistentCasingInFileNames": true,"useDefineForClassFields": true,"sourceMap": true,"baseUrl": ".","types": ["webpack-env"],"paths": {"@/*": ["src/*"]},"lib": ["esnext","dom","dom.iterable","scripthost"]},"include": ["src/**/*.ts","src/**/*.tsx","src/**/*.vue","tests/**/*.ts","tests/**/*.tsx"],"exclude": ["node_modules"]
}

做完以上操作后，我们vue项目的基本结构如下图

测试Element Plus

做好以上步骤，我们vue3+Element Plus搭建项目的基本模板已经创建好，接下来测试Element Plus是否可以使用

这里我选择使用Element Plus 中的Menu组件，因为接下来我们会使用Menu做系统菜单

找到系统默认生成的HelloWorld.vue文件，用如下代码替换里面的代码

<template><el-menuactive-text-color="#ffd04b"background-color="#545c64"class="el-menu-vertical-demo"default-active="2"text-color="#fff"><el-sub-menu index="1"><template #title><el-icon><location /></el-icon><span>Navigator One</span></template><el-menu-item-group title="Group One"><el-menu-item index="1-1">item one</el-menu-item><el-menu-item index="1-2">item two</el-menu-item></el-menu-item-group><el-menu-item-group title="Group Two"><el-menu-item index="1-3">item three</el-menu-item></el-menu-item-group><el-sub-menu index="1-4"><template #title>item four</template><el-menu-item index="1-4-1">item one</el-menu-item></el-sub-menu></el-sub-menu><el-menu-item index="2"><el-icon><icon-menu /></el-icon><span>Navigator Two</span></el-menu-item><el-menu-item index="3" disabled><el-icon><document /></el-icon><span>Navigator Three</span></el-menu-item><el-menu-item index="4"><el-icon><setting /></el-icon><span>Navigator Four</span></el-menu-item></el-menu>
</template><script lang="ts">
import { defineComponent } from "vue";export default defineComponent({setup() {},components: {},
});
</script>

该代码，基本和官网的示例一致。是构建一个Menu导航菜单

然后再找到App.vue文件，用如下代码替换里面代码

<template><HelloWorld />
</template><script lang="ts">
import { defineComponent } from "vue";
import HelloWorld from "./components/HelloWorld.vue"export default defineComponent({setup() {},components: {HelloWorld},
});
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

 做好以上步骤后，我们使用npm run serve命令，启动项目

出下如下界面，证明项目创建成功

搭建框架

安装好Element Plus后，我们就要使用它来搭建框架

使用Element Plus的布局组件container+菜单组件Menu，来搭建框架。

这里是写样式布局，没有啥好说的，直接上代码

HelloWorld.vue 代码如下

<template><div style="height: calc(100vh); overflow: hidden"><el-container style="height: 100%; overflow: hidden"><el-aside width="auto"><el-menuclass="el-menu-vertical-demo"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"style="height: 100%"><div class="el-menu-box"><divclass="logo-image"style="width: 18px; height: 18px; background-size: 18px 18px"></div><div style="padding-left: 5px; padding-top: 7px">OverallAuth2.0</div></div><el-sub-menu index="1"><template #title><el-icon><location /></el-icon><span>Navigator One</span></template><el-menu-item-group title="Group One"><el-menu-item index="1-1">item one</el-menu-item><el-menu-item index="1-2">item two</el-menu-item></el-menu-item-group><el-menu-item-group title="Group Two"><el-menu-item index="1-3">item three</el-menu-item></el-menu-item-group><el-sub-menu index="1-4"><template #title>item four</template><el-menu-item index="1-4-1">item one</el-menu-item></el-sub-menu></el-sub-menu><el-menu-item index="2"><el-icon><icon-menu /></el-icon><span>Navigator Two</span></el-menu-item><el-menu-item index="3" disabled><el-icon><document /></el-icon><span>Navigator Three</span></el-menu-item><el-menu-item index="4"><el-icon><setting /></el-icon><span>Navigator Four</span></el-menu-item></el-menu></el-aside><el-container><el-header class="headerCss"><div style="display: flex; height: 100%; align-items: center"><divstyle="
                text-align: left;width: 50%;font-size: 18px;display: flex;"
            ><div class="logo-image" style="width: 32px; height: 32px"></div><div style="padding-left: 10px; padding-top: 7px">OverallAuth2.0 权限管理系统</div></div><divstyle="
                text-align: right;width: 50%;display: flex;justify-content: right;cursor: pointer;"
            ><divclass="user-image"style="width: 22px; height: 22px; background-size: 22px 22px"></div><div style="padding-left: 5px; padding-top: 3px">王小虎</div></div></div></el-header><el-main class="el-main">欢迎</el-main></el-container></el-container></div>
</template><script lang="ts">
import { defineComponent } from "vue";export default defineComponent({setup() {},components: {},
});
</script><style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;
}
.el-menu-box {display: flex;padding-left: 25px;align-items: center;height: 57px;box-shadow: 0 1px 4px #00152914;border: 1px solid #00152914;color: white;
}
.el-main {padding-top: 0px;padding-left: 1px;padding-right: 1px;margin: 0;
}
.headerCss {font-size: 12px;border: 1px solid #00152914;box-shadow: 0 1px 4px #00152914;justify-content: right;align-items: center;/* display: flex; */
}
.logo-image {background-image: url("../components/权限分配.png");
}
.user-image {background-image: url("../components/用户.png");
}
.demo-tabs /deep/ .el-tabs__header {color: #333; /* 标签页头部字体颜色 */margin: 0 0 5px !important;
}
.demo-tabs /deep/ .el-tabs__nav-wrap {padding-left: 10px;
}
</style>

App.vue 代码如下

<template><HelloWorld />
</template><script lang="ts">
import { defineComponent } from "vue";
import HelloWorld from "./components/HelloWorld.vue"export default defineComponent({setup() {},components: {HelloWorld},
});
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;/* margin-top: 60px; */
}
html,  body,  #app {  height: 100%;  margin: 0;  padding: 0;  }
</style>

ps：页面中的图标，可以用任何小图标替换（也可以删除）。

运行项目

 下一篇：Vue3菜单和路由的结合使用

 

后端WebApi 源代码地址：https://gitee.com/yangguangchenjie/overall-auth2.0-web-api  

后端WebApi 预览地址：http://139.155.137.144:8880/swagger/index.html

前端Vue 源代码地址：https://gitee.com/yangguangchenjie/overall-auth2.0-vue

前端vue 预览地址：http://139.155.137.144:8881

帮我Star，谢谢。帮我Star，谢谢。帮我Star，谢谢。

有兴趣的朋友，请关注我微信公众号吧(*^▽^*)。

关注我：一个全栈多端的宝藏博主，定时分享技术文章，不定时分享开源项目。关注我，带你认识不一样的程序世界