使用vue3+element-ui plus 快速构建后台管理模板

已于 2023-11-24 09:57:33 修改
阅读量9.6k 收藏 100
点赞数 36
分类专栏： vue 文章标签： ui vue elementui vue3
于 2023-10-12 09:42:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63622279/article/details/133783565
版权

一、安装 vue3 脚手架

npm create vue@latest

在这里插入图片描述

cd vue-ui-template #切换到刚刚创建好的vue项目根目录中
npm install #下载项目所需要的依赖包
npm run dev #启动运行项目服务

项目启动后，默认页面显示如下：

在这里插入图片描述

二、安装element-ui plus

官网链接：http://element-plus.org/zh-CN/guide/installation.html#%E4%BD%BF%E7%94%A8%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8
element-ui plus
快速上手链接：http://element-plus.org/zh-CN/guide/quickstart.html

npm install element-plus --save

在这里插入图片描述

在main.js中进行全局配置（也可按需配置）
因为我的项目比较小，所以我就在页面中整体引入了。正常的话是按需加载

在这里插入图片描述

// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

三、使用element-ui plus 构建布局

下面是我们要达成的一个布局效果（我之前写过的课设），分为侧边栏和顶部栏以及中间主体内容。

在这里插入图片描述

（一）安装使用element-ui plus 的icon组件

http://element-plus.org/zh-CN/component/icon.html#%E4%BD%BF%E7%94%A8%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8

在这里插入图片描述

  1. 安装命令
npm install @element-plus/icons-vue

在这里插入图片描述

  1. 在main.js中进行全局挂载
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

在这里插入图片描述

（二）布局组件 container

对于element-ui plus的布局组件我就不一一介绍了，这里将使用到的组件链接放出来
container 布局容器 http://element-plus.org/zh-CN/component/container.html

在这里插入图片描述

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

我们将这个布局抽离为两个组件，分别为一个header组件和一个aside组件，接下来开始抽离。

（三）模板组件抽离 Aside Header Container

  1. Header 组件(src\components\Header.vue)
<script setup>
import { ref } from 'vue'

import { ElMessage } from 'element-plus';
import a11Img from '@/assets/a11.jpeg'  // 导入assets下的图片，自己喜欢啥图加啥图就行
const isCollapse = ref(true)
// 获取父组件传递过来的数据 
const showIcon = defineProps({
    isCollapse: Boolean
})

// 获取父组件自定义的事件
const emit = defineEmits(['changeAside'])

// 自定义按钮点击事件，侧边栏的收缩按钮
const collapseAside = () => {
    emit('changeAside')
}

// 登出按钮
const LogOut = ()=>{}

</script>


<template>
    <div>
        <el-header style="display: flex;font-size: 16px;">
            <div style="display: inline-flex;flex: 1; align-items: center;justify-content: left;">
                <el-icon v-show="!showIcon.isCollapse" @click="collapseAside" style="color: #303133;">
                    <Fold />
                </el-icon>
                <el-icon v-show="showIcon.isCollapse" @click="collapseAside" style="color: #303133;">
                    <Expand />
                </el-icon>
            </div>
            <div class="toolbar"  >
                <div class="block" style="margin-right: 10px;">
                    <el-avatar :size="40" :src="a11Img" />
                </div>
                <span>管理员</span>
                <el-dropdown trigger="click">
                    <el-icon style="margin-left: 18px; margin-top: 1px;color: #303133;">
                        <setting />
                    </el-icon>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>View</el-dropdown-item>
                            <el-dropdown-item>Add</el-dropdown-item>
                            <el-dropdown-item @click="LogOut">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </el-header>
    </div>
</template>



<style scoped>
.el-header {
    width: 100%;
    background-color: #fff;
    color: var(--el-text-color-primary);
    box-shadow: var(--el-box-shadow);
}

.toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
    text-align: right;
}

.el-dropdown-menu__item {
    width: 120px;
}

.icon-color {
    color: white;
}
</style>
  1. Aside组件(src\components\Aside.vue)
<script setup>
import { ref } from 'vue'

const settings = defineProps({
  collapse: Boolean,
  width: String
})

const iconColor = ref('color:#F8FAFB')
</script>


<template>
  <el-aside :width="settings.width">
    <el-scrollbar>
      <el-menu :default-openeds="['1', '3']" 
      :collapse="settings.collapse" active-text-color="#F8FAFB"
        background-color="#1A1C1E" text-color="#74767A" router="true">
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <House />
            </el-icon><span>首页</span>
          </template>
          <el-menu-item index="/admin/echatsIndex">首页</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <Menu />
            </el-icon><span>文章管理</span>
          </template>
          <el-menu-item index="/admin/articles">文章管理列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon>
              <Message />
            </el-icon><span>评论管理</span>
          </template>
          <el-menu-item index="/admin/comments">评论管理列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon>
              <Files />
            </el-icon><span>模块管理</span>
          </template>
          <el-menu-item index="/admin/blocks">模块管理列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>
            <el-icon>
              <User />
            </el-icon><span>用户管理</span>
          </template>
          <el-menu-item index="/admin/users">用户管理列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="6">
          <template #title>
            <el-icon>
              <Watermelon />
            </el-icon><span>资源管理</span>
          </template>
          <el-menu-item index="/admin/filesAdmin">资源管理列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="7">
          <template #title>
            <el-icon>
              <Edit />
            </el-icon><span>编辑器</span>
          </template>
          <el-menu-item index="/admin/md">markdown</el-menu-item>
          <el-menu-item index="/admin/richText">富文本</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="8">
          <template #title>
            <el-icon>
              <setting />
            </el-icon><span>系统设置</span>
          </template>
          <el-menu-item index="/admin/light">背景色</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-scrollbar>
  </el-aside>
</template>


<style scoped>
.el-aside {
  height: 100vh;
  overflow: hidden;
  box-shadow: var(--el-box-shadow-lighter);
}

.el-scrollbar {
  height: 100vh;
  overflow: hidden;
  background-color: #1A1C1E;
}

.el-menu {

  border-right: none;
}
</style>

tips:侧边栏菜单这里我开启了路由，然后对应的index="xxx"都是我要跳转的页面，可以自行修改哈

  1. HomeView.vue 视图(src\views\HomeView.vue)
<script setup>
import { ref } from 'vue'


// 组件注册
import Header from '@/components/Header.vue'

import Aside from '@/components/Aside.vue'



const asideSettings = ref({
    isCollapse:true,
    width:'200'
})

// 给子组件绑定事件，通过子组件emit从而改变父组件的值
const changeAside = ()=>{
   asideSettings.value.isCollapse = !asideSettings.value.isCollapse
   if(asideSettings.value.isCollapse){
    asideSettings.value.width = "64"
   }else{
    asideSettings.value.width = "200"
   }
}



</script>
<template>
  <el-container style="min-height: 100vh;min-width: 100vw;overflow: hidden;">
    <Aside :collapse="asideSettings.isCollapse" :width="asideSettings.width"></Aside>
    <el-container style="height: 100vh;width:100%;display: flex;flex-direction: column;">
      <Header :isCollapse="asideSettings.isCollapse"  @changeAside="changeAside"></Header>
      <el-main>
        <div>
         <el-card>
          <h1>文本内容</h1>
         </el-card>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>



<style scoped>

body{
  background-color: #eee;
  max-width: 100vw;
  overflow: hidden;
}

.el-main {
  width: 100%;
  padding: 0;
  height: 100vh;
  overflow-x: hidden;
}

</style>
  1. App.vue修改(src\App.vue)
<script setup>
import { RouterView } from 'vue-router'
</script>

<template>
  <div>
    <RouterView></RouterView>
  </div>
</template>

<style scoped>

</style>
  1. vue3的默认css调优 (src\assets\main.css)
@import './base.css';

#app {
  /* max-width: 1280px; */
  margin: 0 auto;
  /* padding: 2rem; */
  min-width: 100vw;
  min-height: 100vh;
  font-weight: normal;
}

a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
}

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}

@media (min-width: 1024px) {
  body {
    display: flex;
    place-items: center;
  }

  #app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* padding: 0 2rem; */
  }
}

tips:最终的项目结构为下图，黄色标注为修改过的文件，红色文件标注的为新增的文件

在这里插入图片描述

  1. 页面效果

在这里插入图片描述
在这里插入图片描述

蹲一个赞 b(￣▽￣)d ★,°:.☆(￣▽￣)/$:.°★ 。

以上代码的全部文件 :百度网盘链接: https://pan.baidu.com/s/1WtepwERvqIoq_tYm0BwwSg 提取码: 5kmx

git仓库地址 https://gitee.com/zhweb2022/vue-ui-template
克隆命令：git clone git@gitee.com:zhweb2022/vue-ui-template.git

请添加图片描述

杀死一只知更鸟debug
关注
  • 36
    点赞
  • 踩
  • 100
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 9
    评论
专栏目录
Vue3 框架 + Element-Plus 库 + mockjs 假数据 + vue3-demo + 环境已经配好拿来就用
07-06
内容概要：该 Vue3-demo 是基于 Vue3 框架搭配 Element-Plus ui库，建立的简单工程，并搭建了 Mockjs 和 axios工具，可以快速开发的工程，已经成功引入并建立了一个基于 Element-Plus 库中 table 组件的页面; 适用人群：想要了解 Vue3 新语法以及项目的，想要查看如何引入 Element-Plus 库及 Mockjs 的假数据如何使用及引入语法的, 想要基于已经成功引入这些组件的基本工程，来事件新的 Vue3 demo 的； 其他说明：里面用的是 Vue3 新语法，使用 Element-Plus 库创建了一个表格页面，可以搭建新的页面;
vue3+pinia+element-plus搭建的模板工程
01-04
这里有一个基于最新技术栈构建的系统模板工程，结合了Pinia、Vue3、Element Plus和Webpack 5的强大力量。它为您提供了一个前所未有的开发体验，让您的项目脱颖而出。 这个模板工程不仅仅是一个简单的骨架，它还内置了四种令人惊叹的布局方式：默认布局、经典布局、双栏布局和单栏布局。无论您是追求时尚现代感还是传统经典风格，都能找到最适合您项目需求的布局风格。 更加令人兴奋的是，这个模板工程已经事先为您配置了暗黑模式。这意味着您的应用程序可以轻松地根据用户偏好切换到黑暗主题，为用户带来更加炫酷和舒适的界面体验。 而且，这个模板工程对全局配置进行了高度拆分和封装。通过清晰的架构和优雅的代码，您可以轻松地管理和定制全局配置，节省宝贵的开发时间，让您专注于构建出色的功能和用户体验。 无论您是一名经验丰富的开发者还是刚入门的新手，这个Pinia+Vue3+Element Plus+Webpack 5搭建的系统模板工程都将成为您的得力助手。 此zip解压后即可立即运行，为了保证项目依赖一致性，我将node_modules也一起上传了~
基于vue3+elementPlus的后台管理系统模板
02-18
基于vue3+elementPlus的后台管理系统模板
Vue开发中Element UI/Plus使用指南：常见问题（如Missing required prop: “value“）及中文全局组件配置解决方案
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
06-17 2396
通过给 type=index 的列传入 index 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 0 开始）作为参数，返回值将作为索引展示。methods: {
Vue3+Elementplus+Axios 入门教程详解
majingbobo的博客
10-29 3223
Vue3+Elementplus+Axios 入门教程
1小时搞定Vue3+vite+Element UI或者Element Plus开发后台管理系统，使用vite构建管理项目，前后端分离包含mysql数据库，网站后台
编程小石头
04-29 1739
我们通常给小程序或者app开发后台时，不可避免的要用到可视化的数据管理后台，而vue和Element是我们目前比较主流的开发管理后台的主流搭配。所以今天石头哥就带大家来一起学习下vue3和Element plus的开发。
ElementUI Plus
不学习何以强国的博客
04-12 1万+
ElementUI Plus 提示：只是记录自己在使用Element + 的过程中遇到的问题，并不一定适用于全部场景 官方文档 文章目录ElementUI Plus` 提示：只是记录自己在使用Element + 的过程中遇到的问题，并不一定适用于全部场景` [官方文档](https://element-plus.gitee.io/zh-CN.html)前言一、ElementUI Plus之Table1.基础用法2.多选框改为单选框的解决办法 前言 只是记录自己在使用Element + 的过程中遇到的问题
vue3.0中使用element
浩星
03-01 2万+
前言： 在vue3.0中使用element框架，因为element是支持vue2.0的，他推出的支持vue3.0的版本叫element-plus 目录： 官网入口：点我进入 一、个人遇到的问题与解决办法： 遇到的问题： 我直接用cnpm ielement-plus-S 装的版本，不知道为啥，一直报错 图1，版本型号 图2 ，我的代码中使用图3 ​图1 ​图2 ​图3 解决办法： 我把package.json中的element-plus的版本更换成 下面这句...
【vue】vue3使用element ui
热门推荐
努力变好
08-03 3万+
element-ui支持vue2版本，当用vue3安装element-ui的时候会报错，这就需要安装element-plus版本来用到vue3项目中。
vue3 接入 Element Plus
大家好，我是 ed.
01-03 2939
Element Plus是一套为开发者、设计师和产品经理准备的基于Vue 3.0的桌面端组件库。反馈：通过界面样式和交互动效让用户清晰地感知自己的操作。当用户进行操作后，页面元素的变化会清晰地展现当前状态。效率：设计简洁直观的操作流程，使语言表达清晰且表意明确，帮助用户快速理解进而作出决策。此外，界面简单直白，减少用户记忆负担。可控：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策。用户可以自由地进行操作，包括撤销、回退和终止当前操作等。
搭建vue3项目+按需引入element-ui框架组件
????鱼干～
04-10 8116
搭建vue3项目+按需引入element-ui框架组件
Vue3 + Element Plus 项目实现自定义主题切换
m0_65029152的博客
12-19 3783
vue3 + Element Plus 实现自定义主题切换
速成版-带您2天学完vue3框架+Element-plus框架
nuist_NJUPT的博客
08-01 6317
Vue是渐进式的JavaScript框架，易学易用，性能出色，适用场景丰富的web前端框架，vue算是目前最火的web前端框架之一，使用vue可以提升开发体验。Vue组件可以按照两种不同的风格写，即选项式api和组合式api两种。
基于Vue3 + Element Plus 的后台管理系统详细教程
一步一个脚印，踏实努力，向着目标前进
06-13 2万+
以上是使用 Vue3 和 Element Plus 创建后台管理系统的基本步骤，但如果你想要实现一个实用的后台管理系统，还需要实现登录、权限管理、数据增删改查等功能。Vue 3 中最大的新特性是引入了 Composition API，它允许开发人员按照逻辑相关的方式组织代码，可以更好地复用组件和处理复杂的逻辑。在 data 中声明登录所需参数，初始化表单验证规则并在 method 中实现表单的提交、参数的验证与登录状态的切换。使用 Element Plus 提供的表格、表单等组件实现数据的增删改查。
Vue3 + Vite + Element Plus 项目搭建（全）
Yana's Blog
05-06 6109
本文使用 Vue3 + Vite + Element Plus + Vue Router + Pinia + Typescript 搭建项目。
Vue3与Element-plus整合及项目实战
sinat_30844883的博客
05-14 3701
Element-plus简介是ElementUI的升级版，是一套基于vue2与vue3的桌面端组件库，它提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的前端页面。
vue3 + element 从0到1搭建前端基础框架
weixin_42854769的博客
12-04 2921
往往从0到1开发项目时发觉无从下手，或者很可能一步一个坑，因为大多基础框架公司已经搭建完毕的，新加入的成员也都是在此基础上进行功能模块的拓展。网上也鲜有详尽的全流程参考，多是某个局部功能的搭建，因此整理了一份包含以下方面的前端基础框架全流程搭建要义。
基于Vue和Element UI实现前后端分离和交互
weixin_74268571的博客
09-25 3358
Element UI简介，如何运用Vue+Element UI搭建前端登陆注册，并通过ssm框架处理后端数据请求，以及axios全局配置和CORS跨域
vue3+elementplus写一个简单首页
qq_40809644的博客
12-18 1196
在使用Vue 3结合Element Plus框架开发首页时，您需要先搭建Vue 3项目，然后引入Element Plus库。以下是一个基本的步骤指导和代码示例，帮助您完成首页的开发。这个示例包含一个简单的布局，包括顶部导航栏、侧边栏和主内容区域。您可以根据需要修改样式和内容。现在，当您访问项目时，首页将显示在浏览器中。您可以继续根据需求扩展和自定义首页。
vue3+element-plus的后台管理系统
08-24
Vue 3.0是一个JavaScript框架，而Element-Plus是一个基于Vue 3.0开发的UI组件库，可以用于构建后台管理系统。开发Vue 3.0 Element-Plus的后台管理系统需要使用Vite 2.0作为构建工具，Vue-Router 4.0作为路由管理，Echarts 5.0作为数据可视化工具，以及Axios作为HTTP请求库。 要创建一个使用Vue 3.0和Element-Plus的后台管理系统，可以使用以下步骤： 1. 首先，使用命令行工具创建一个新的Vue项目，可以使用以下命令： ``` yarn create vite my-vue-app --template vue ``` 这将使用Vite模板创建一个名为"my-vue-app"的项目。 2. 安装Element-Plus包，可以使用以下命令： ``` yarn add element-plus ``` 这将安装Element-Plus UI组件库。 3. 在项目的主入口文件中引入Element-Plus并注册它，可以使用以下代码： ```javascript import { createApp } from 'vue'; import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; const app = createApp(App); app.use(ElementPlus); ``` 4. 在需要使用Element-Plus组件的Vue文件中，可以通过引入包并配置el-config-provider来使用Element-Plus，例如： ```html <template> <el-config-provider :locale="zhCn"> <Vab-App /> </el-config-provider> </template> <script setup> import zhCn from 'element-plus/lib/locale/lang/zh-cn'; </script> ``` 这将使用中文语言配置Element-Plus，并在Vab-App组件中使用Element-Plus组件。 通过以上步骤，你就可以开始开发使用Vue 3.0和Element-Plus的后台管理系统了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统](https://download.csdn.net/download/weixin_47367099/85260580)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue3+ElementPlus后台管理搭建](https://blog.csdn.net/qq_25286361/article/details/122132722)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杀死一只知更鸟debug

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值