说明
该文章是属于OverallAuth2.0系列文章，每周更新一篇该系列文章（从0到1完成系统开发）。
该系统文章，我会尽量说的非常详细，做到不管新手、老手都能看懂。
说明：OverallAuth2.0 是一个简单、易懂、功能强大的权限+可视化流程管理系统。
友情提醒：本篇文章是属于系列文章，看该文章前，建议先看之前文章，可以更好理解项目结构。
qq群：801913255
有兴趣的朋友，请关注我吧(*^▽^*)。
关注我，学不会你来打我
废话文学
震惊！什么？你还不会使用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文件，用如下代码替换里面的代码
Navigator Oneitem oneitem twoitem threeitem fouritem one Navigator TwoNavigator ThreeNavigator Four import { defineComponent } from "vue";export default defineComponent({ setup() { }, components: {},});该代码，基本和官网的示例一致。是构建一个Menu导航菜单
然后再找到App.vue文件，用如下代码替换里面代码
import { defineComponent } from "vue";import HelloWorld from "./components/HelloWorld.vue"export default defineComponent({ setup() { }, components: {HelloWorld},});#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;}做好以上步骤后，我们使用npm run serve命令，启动项目
出下如下界面，证明项目创建成功
搭建框架
安装好Element Plus后，我们就要使用它来搭建框架
使用Element Plus的布局组件container+菜单组件Menu，来搭建框架。
这里是写样式布局，没有啥好说的，直接上代码
HelloWorld.vue 代码如下
OverallAuth2.0Navigator One item one item two item three item four item oneNavigator TwoNavigator ThreeNavigator FourOverallAuth2.0 权限管理系统 王小虎欢迎import { defineComponent } from "vue";export default defineComponent({ setup() {}, components: {},});.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;}App.vue 代码如下
import { defineComponent } from "vue";import HelloWorld from "./components/HelloWorld.vue"export default defineComponent({ setup() { }, components: {HelloWorld},});#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; }ps：页面中的图标，可以用任何小图标替换（也可以删除）。
运行项目
下一篇：Vue3菜单和路由的结合使用
后端WebApi 预览地址：http://139.155.137.144:8880/swagger/index.html
前端vue 预览地址：http://139.155.137.144:8881
关注公众号：发送【权限】，获取前后端代码
有兴趣的朋友，请关注我微信公众号吧(*^▽^*)。
关注我：一个全栈多端的宝藏博主，定时分享技术文章，不定时分享开源项目。关注我，带你认识不一样的程序世界