说明
该文章是属于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,谢谢。
有兴趣的朋友,请关注我微信公众号吧(*^▽^*)。
关注我:一个全栈多端的宝藏博主,定时分享技术文章,不定时分享开源项目。关注我,带你认识不一样的程序世界