（系列九）使用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 Appfrom './App.vue'import ElementPlusfrom '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 Appfrom './App.vue'import ElementPlusfrom '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";



exportdefaultdefineComponent({

  setup() {

  },

  components: {},

});</script>

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

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

<template>
  <HelloWorld />
</template>

<script lang="ts">import { defineComponent }from "vue";

import HelloWorldfrom "./components/HelloWorld.vue"exportdefaultdefineComponent({

  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">
            <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;"            >
              <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";



exportdefaultdefineComponent({

  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 HelloWorldfrom "./components/HelloWorld.vue"exportdefaultdefineComponent({

  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

关注公众号：发送【权限】，获取前后端代码

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

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

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

添加新评论

最新文章

最近回复

分类

归档

其它