（系列九）使用Vue3+Element Plus创建前端框架（附源码）
cnblogs 2024-10-24 16:41:00 阅读 98
说明
该文章是属于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-menu
active-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-menu
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
style="height: 100%"
>
<div class="el-menu-box">
<div
class="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">
<div
style="
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>
<div
style="
text-align: right;
width: 50%;
display: flex;
justify-content: right;
cursor: pointer;
"
>
<div
class="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预览地址：http://139.155.137.144:8880/swagger/index.html
前端vue 预览地址：http://139.155.137.144:8881
关注公众号：发送【权限】，获取前后端代码
有兴趣的朋友，请关注我微信公众号吧(*^▽^*)。
关注我：一个全栈多端的宝藏博主，定时分享技术文章，不定时分享开源项目。关注我，带你认识不一样的程序世界
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。