Vue3集成Element-Plus快速搭建管理系统的页面框架（小白版）

最新推荐文章于 2025-04-20 23:38:00 发布
最新推荐文章于 2025-04-20 23:38:00 发布
阅读量1.2k 收藏 7
点赞数 6
文章标签： java 前端 vue vue.js idea 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Serendipity__io/article/details/145799164
版权

一、搭建后端基本框架

前情提要：本人在idea上搭建的vue3框架

出现语法提示安装插件：

在views文件夹下新建Manager.vue文件，即全局的父级文件，随后：

在index.js内增添配置：

children: [
  {path: '/home',   component: import('../views/About.vue'),},
]
},

在Manager.vue文件内增添：

<template>
  <div>


    这是父组件

  <RouterView />
    </div>



</template>


<script setup>


</script>

 

 验证一下：

成功！！！

继续修改一下配置：

children: [
  {path: 'home',   component: import('../views/Home.vue'),},
]
},

验证一下：

成功！！！ 

这说明父组件嵌套子组件成功，需要路由来连接

二、配置固定区域

大家根据自己的需求更改代码即可，下边是示例：

<template>
  <div>
  <!-- 头部区域开始 -->
    <div style="height: 60px; border-bottom: 1px solid #67C23A; display: flex;align-items: center">
      <div style="display: flex;align-items: center;padding-left: 20px" >
        <img src="../assets/imgs/logo.jpg" alt="" style="width: 60px; height: 60px;border-radius: 50%;">
        <span style="font-size: 20px;font-weight: bold;color: darksalmon;margin-left: 5px">山东黑陶文化</span>

      </div>


    </div>
  <!-- 头部区域结束 -->

得到： 

1.菜单展示

以下仅为示例，可根据自己需求来：

<el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
>
  <el-sub-menu index="1">
    <template #title>
      <el-icon><location /></el-icon>
      <span>Navigator One</span>
    </template>
</el-sub-menu>>
</el-menu>

<div style="display: flex">
  <!-- 菜单区域开始 -->
  <div style="width: 240px;">
    <el-menu :default-openeds="['1']" default-active="/manager/home"  style="min-height: calc(100vh - 60px)">
      <el-menu-item index="/manager/home">
        <el-icon><House /></el-icon>>
        <span>首页</span>>
      </el-menu-item>
      <el-sub-menu index="1">
        <template #title>
          <el-icon><location /></el-icon>
          <span>数据管理</span>
        </template>
        <el-menu-item index="1-1">二级菜单</el-menu-item>
    </el-sub-menu>>
    </el-menu>
  </div>

 

嗯会有点小错误，用AI修正一下，在Mananger.vue内 再加上一些效果就得到：

<template>
  <div>
    <!-- 头部区域开始 -->
    <div style="height: 60px; display: flex;">
      <div style="width:240px;display: flex;align-items: center;padding-left: 20px;background-color: forestgreen">
        <img src="../assets/imgs/logo.jpg" alt="" style="width: 60px; height: 60px;border-radius: 50%;">
        <span style="font-size: 20px;font-weight: bold;color: darksalmon;margin-left: 5px">日照地方文化</span>
      </div>
<!--      <div style="flex: 1"></div>-->
<!--      <div style="width: fit-content;display: flex;align-items: center;">-->

    </div>
    <!-- 头部区域结束 -->

    <!-- 下方区域开始 -->
    <div style="display: flex">
      <!-- 菜单区域开始 -->
      <div style="width: 240px;box-shadow: 0 0 8px rgba(0,0,0, .12);">
        <el-menu :default-openeds="['1']" default-active="/manager/home" style="min-height: calc(100vh - 60px)">
          <el-menu-item index="/manager/home">
            <el-icon><House /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Location /></el-icon>
              <span>数据管理</span>
            </template>
            <el-menu-item index="1-1">二级菜单</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <!-- 菜单区域结束 -->

      <!-- 数据渲染区域开始 -->
      <div style="flex: 1;">
        <!-- 在这里添加你的内容 -->
      </div>
      <!-- 数据渲染区域结束 -->
    </div>
    <!-- 下方区域结束 -->
  </div>
</template>

<script setup>
import { House, Location } from '@element-plus/icons-vue'
</script>

<style scoped>
.el-menu {
  background-color: #7a9fe7;
  border: none;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
}
.el-sub-menu__title {
  color: #ddd;
}
.el-menu-item {
  color: #ddd;
  height: 50px;
}
.el-menu .is-active {
  background-color: #0066CC;
  color: #ddd;
}
</style>

2.配置标题和logo:

复制粘贴代码可以获得右上角管理员名字和头像：

      <div style="width: fit-content;display: flex;align-items: center;padding-right: 20px;">
        <img style="width: 40px;height: 40px;border-radius: 50%" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="">
        <span style="margin-left: 5px;">管理员</span>

添加管理员与logo:

①：
        <el-dropdown>
          <div style="display: flex;align-items: center;">
            <img style="width: 40px;height: 40px;border-radius: 50%" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="">
            <span style="margin-left: 5px;">管理员</span>
          </div>
        </el-dropdown>

得到：

②：
          <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
                <el-dropdown-item>查看收藏</el-dropdown-item>
                <el-dropdown-item>订单详情</el-dropdown-item>
            </el-dropdown-menu>
          </template>

得到：

 优化美观：

.el-dropdown{
  cursor: pointer;
}
.el-tooltip__trigger{
  outline:none;
}

划定边框：

 

修改一下颜色，得到：

3.设置主体区域

      <div style="flex: 1;width: 0;margin: 10px;background-color: #f5f7fe">

验证：

复制粘贴到Mananger.vue :

 验证：

.card{
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 8px rgba(0,0,0,0.12);
}

4. 设置查询和常用按钮：

<template>
  <div>
    <div class="card" style="margin-bottom: 5px;">

      <el-input
          style="width: 260px; margin-right: 5px;"
          v-model="data.name"
          placeholder="请输入名称查询"
          :prefix-icon="Search">
      </el-input>
      <el-button type="primary" :icon="Search" @click="search">查 询</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px;">
      <el-button type="danger">批量删除</el-button>
      <el-button type="danger">新 增</el-button>
      <el-button type="danger">批量导入</el-button>
      <el-button type="danger">批量导出</el-button>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import { Search } from '@element-plus/icons-vue';

// 定义数据模型
const data = reactive({
  name: null
});

// 添加 search 函数定义
const search = () => {
  console.log('搜索名称:', data.name);
  // 在这里添加具体的搜索逻辑
};
</script>

5. 设置表格，并填充内容:

代码如下：

<template>
  <div>
    <div class="card" style="margin-bottom: 5px;">
      <el-input
          style="width: 260px; margin-right: 5px;"
          v-model="data.name"
          placeholder="请输入名称查询"
          :prefix-icon="Search">
      </el-input>
      <el-button type="primary" :icon="Search" @click="search">查 询</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px;">
      <el-button type="danger">批量删除</el-button>
      <el-button type="danger">新 增</el-button>
      <el-button type="danger">批量导入</el-button>
      <el-button type="danger">批量导出</el-button>
    </div>

    <!-- 表格部分 -->
    <div class="card" style="margin-bottom: 5px;">
      <el-table :data="filteredTableData" style="width: 100%">
        <el-table-column prop="name" label="名称" width="180" />
        <el-table-column prop="address" label="地址" width="180" />
        <el-table-column prop="collection" label="藏品" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { reactive, computed } from 'vue';
import { Search } from '@element-plus/icons-vue';

// 定义数据模型
const data = reactive({
  name: null,
  tableData: [
    { name: '张三', address: '日照市博物馆', collection: '高柄镂孔蛋壳黑陶杯' },
    { name: '李四', address: '日照市博物馆', collection: '西周莱伯青铜鬲' },
    { name: '王五', address: '岚山区博物馆', collection: '玉石器' },
    { name: '赵六', address: '岚山区博物馆', collection: '红陶鬶' },
    { name: '钱七', address: '莒州博物馆', collection: '大口尊' },
    { name: '孙八', address: '莒州博物馆', collection: '玉琮' },
    { name: '钱九', address: '五莲县博物馆', collection: '玉璇玑' },
    { name: '孙十', address: '五莲县博物馆', collection: '大玉刀' },
    { name: '孙十一', address: '五莲县博物馆', collection: '鎏金铜佛' },
    { name: '孙十二', address: '东夷民俗文化博物馆', collection: '八大文化展厅' },
    { name: '孙十三', address: '东夷民俗文化博物馆', collection: '古玩以及民俗衍生品' },
    { name: '孙十四', address: '东夷黑陶博物馆', collection: '黑陶' },
    { name: '孙十五', address: '岚山区茶文化博物馆', collection: '制茶工具藏品' },
    { name: '孙十六', address: '岚山区茶文化博物馆', collection: '茶文化展' },
    { name: '孙十七', address: '世昌砚石博物馆', collection: '砚石艺术藏品' },
    { name: '孙十八', address: '赵氏石磨博物馆', collection: '石磨藏品' },
    { name: '孙十九', address: '日照贝壳博物馆', collection: '贝壳标本' },
  ]
});

// 计算属性：根据搜索条件过滤表格数据
const filteredTableData = computed(() => {
  if (!data.name) return data.tableData;
  return data.tableData.filter(item => item.name.includes(data.name));
});

// 添加 search 函数定义
const search = () => {
  console.log('搜索名称:', data.name);
  // 这里可以添加更多的搜索逻辑
};
</script>

验证： 

6.设置分页：

 

修改例子为：

 

 

得到：

 

现功能下 Home.vue内代码：

<template>
  <div>
    <div class="card" style="margin-bottom: 5px;">
      <el-input
          style="width: 260px; margin-right: 5px;"
          v-model="data.name"
          placeholder="请输入名称查询"
          :prefix-icon="Search">
      </el-input>
      <el-button type="primary" :icon="Search" @click="search">查 询</el-button>
    </div>

    <div class="card" style="margin-bottom: 5px;">
      <el-button type="danger">批量删除</el-button>
      <el-button type="danger">新 增</el-button>
      <el-button type="danger">批量导入</el-button>
      <el-button type="danger">批量导出</el-button>
    </div>

    <!-- 表格部分 -->
    <div class="card" style="margin-bottom: 5px;">
      <el-table :data="filteredTableData" style="width: 100%":header-cell-style="{ color: '#333', backgroundColor: '#f2f8fb' }">
        <el-table-column prop="name" label="名称" width="180" />
        <el-table-column prop="address" label="地址" width="180" />
        <el-table-column prop="collection" label="藏品" />
      </el-table>
    </div>
    <div class="card" >
      <el-pagination
          v-model:current-page="data.pageNum"
          :page-size="data.pageSize"
          layout="total, prev, pager, next"
          :total="data.total"
      />
    </div>
  </div>
</template>

<script setup>
import { reactive, computed } from 'vue';
import { Search } from '@element-plus/icons-vue';

// 定义数据模型
const data = reactive({
  name: null,
  pageNum: 2,
  size: 6,
  total:19,
  tableData: [
    { name: '张三', address: '日照市博物馆',  collection: '高柄镂孔蛋壳黑陶杯' },
    { name: '李四', address: '日照市博物馆', collection: '西周莱伯青铜鬲' },
    { name: '王五', address: '岚山区博物馆', collection: '玉石器' },
    { name: '赵六', address: '岚山区博物馆', collection: '红陶鬶' },
    { name: '钱七', address: '莒州博物馆', collection: '大口尊' },
    { name: '孙八', address: '莒州博物馆', collection: '玉琮' },
    { name: '钱九', address: '五莲县博物馆', collection: '玉璇玑' },
    { name: '孙十', address: '五莲县博物馆', collection: '大玉刀' },
    { name: '孙十一', address: '五莲县博物馆', collection: '鎏金铜佛' },
    { name: '孙十二', address: '东夷民俗文化博物馆', collection: '八大文化展厅' },
    { name: '孙十三', address: '东夷民俗文化博物馆', collection: '古玩以及民俗衍生品' },
    { name: '孙十四', address: '东夷黑陶博物馆', collection: '黑陶' },
    { name: '孙十五', address: '岚山区茶文化博物馆', collection: '制茶工具藏品' },
    { name: '孙十六', address: '岚山区茶文化博物馆', collection: '茶文化展' },
    { name: '孙十七', address: '世昌砚石博物馆', collection: '砚石艺术藏品' },
    { name: '孙十八', address: '赵氏石磨博物馆', collection: '石磨藏品' },
    { name: '孙十九', address: '日照贝壳博物馆', collection: '贝壳标本' },
  ]
});

// 计算属性：根据搜索条件过滤表格数据
const filteredTableData = computed(() => {
  if (!data.name) return data.tableData;
  return data.tableData.filter(item => item.name.includes(data.name));
});

// 添加 search 函数定义
const search = () => {
  console.log('搜索名称:', data.name);
  // 这里可以添加更多的搜索逻辑
};
</script>

现功能下 Mananger.vue内代码： 

<template>
  <div>
    <!-- 头部区域开始 -->
    <div style="height: 60px; display: flex;">
      <div style="width:240px;display: flex;align-items: center;padding-left: 20px;background-color: #0066CC">
        <img src="../assets/imgs/logo.jpg" alt="" style="width: 60px; height: 60px;border-radius: 50%;">
        <span style="font-size: 20px;font-weight: bold;color: darksalmon;margin-left: 5px">日照地方文化</span>
      </div>
      <div style="flex: 1;border-bottom: 1px solid #6fa4f5"></div>
      <div style="width: fit-content;padding-right: 20px;display: flex;align-items: center;border-bottom: 1px solid #6fa4f5">
        <el-dropdown>
          <div style="display: flex;align-items: center;">
            <img style="width: 40px;height: 40px;border-radius: 50%" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="">
            <span style="margin-left: 5px;">管理员</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
              <el-dropdown-item>查看收藏</el-dropdown-item>
              <el-dropdown-item>订单详情</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <!-- 头部区域结束 -->

    <!-- 下方区域开始 -->
    <div style="display: flex">
      <!-- 菜单区域开始 -->
      <div style="width: 240px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.12); height: calc(100vh - 60px); background-color: #0066CC;">
        <el-menu router :default-openeds="['1']" default-active="/manager/home" style="min-height: calc(100vh - 60px)">
          <el-menu-item index="/manager/home">
            <el-icon><House /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Location /></el-icon>
              <span>数据管理</span>
            </template>
            <el-menu-item index="1-1">二级菜单</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <!-- 菜单区域结束 -->

      <!-- 数据渲染区域开始 -->
      <div style="flex: 1; width: 0; margin: 10px; background-color: #ecf0fc">
        <RouterView />
        <!-- 在这里添加你的内容 -->
      </div>

      <!-- 数据渲染区域结束 -->

    </div>

    <!-- 下方区域结束 -->
  </div>
</template>

<script setup>
import { House, Location } from '@element-plus/icons-vue'
</script>

<style scoped>
.el-menu {
  border: none;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
}
.el-sub-menu__title {
  color: #dfe9f9;
}
.el-menu-item {/*二级菜单颜色*/
  color: #49515b;
  height: 50px;
}
.el-menu .is-active {
  background-color: #7a9fe7;/*首页颜色*/
  color: #f8f3f2;
}
.el-sub-menu__title > .el-icon,
.el-menu-item > .el-icon {
  color: #4c5463;
}
.el-dropdown {
  cursor: pointer;
}
.el-tooltip__trigger {
  outline: none;
}
</style>

 7.动态路径分页显示：

      {path: '/manager/about',   component: import('../views/About.vue'),},

 elmanu路由变化通过router,这样一个属性：

总体Mananger.vue代码如下：

<template>
  <div>
    <!-- 头部区域开始 -->
    <div style="height: 60px; display: flex;">
      <div style="width:240px;display: flex;align-items: center;padding-left: 20px;background-color: #0066CC">
        <img src="../assets/imgs/logo.jpg" alt="" style="width: 60px; height: 60px;border-radius: 50%;">
        <span style="font-size: 20px;font-weight: bold;color: darksalmon;margin-left: 5px">日照地方文化</span>
      </div>
      <div style="flex: 1;border-bottom: 1px solid #6fa4f5"></div>
      <div style="width: fit-content;padding-right: 20px;display: flex;align-items: center;border-bottom: 1px solid #6fa4f5">
        <el-dropdown>
          <div style="display: flex;align-items: center;">
            <img style="width: 40px;height: 40px;border-radius: 50%" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="">
            <span style="margin-left: 5px;">管理员</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
              <el-dropdown-item>查看收藏</el-dropdown-item>
              <el-dropdown-item>订单详情</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <!-- 头部区域结束 -->

    <!-- 下方区域开始 -->
    <div style="display: flex">
      <!-- 菜单区域开始 -->
      <div style="width: 240px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.12); height: calc(100vh - 60px); background-color: #0066CC;">
        <el-menu router :default-openeds="['1']" :default-active="$route.path" style="min-height: calc(100vh - 60px)">
          <el-menu-item index="/manager/home">
            <el-icon><House /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Location /></el-icon>
              <span>数据管理</span>
            </template>
            <el-menu-item index="/manager/about">关于数据</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <!-- 菜单区域结束 -->

      <!-- 数据渲染区域开始 -->
      <div style="flex: 1; width: 0; margin: 10px; background-color: #ecf0fc">
        <RouterView />
        <!-- 在这里添加你的内容 -->
      </div>

      <!-- 数据渲染区域结束 -->

    </div>

    <!-- 下方区域结束 -->
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { House, Location } from '@element-plus/icons-vue';

const route = useRoute();
</script>

<style scoped>
.el-menu {
  border: none;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
}
.el-sub-menu__title {
  color: #dfe9f9;
}
.el-menu-item {/*二级菜单颜色*/
  color: #49515b;
  height: 50px;
}
.el-menu .is-active {
  background-color: #7a9fe7;/*首页颜色*/
  color: #f8f3f2;
}
.el-sub-menu__title > .el-icon,
.el-menu-item > .el-icon {
  color: #4c5463;
}
.el-dropdown {
  cursor: pointer;
}
.el-tooltip__trigger {
  outline: none;
}
.el-menu--inline.el-menu-item{
  padding-left:45px !important;
}
</style>

总体About.vue代码如下： 

<template>
  <div>
    <h1>日照地方文化数字博物馆藏品搜索系统</h1>
    <p>这是关于页面的内容</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 组件逻辑可以放在这里
const message = ref('来自关于页面的问候！');
</script>

<style scoped>
/* 可选的样式 */
</style>

总体index.js代码如下：

import { createRouter, createWebHistory } from 'vue-router'


const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {path: '/',   component: import('../views/Mananger.vue'),
    children: [
      {path: '/manager/home',   component: import('../views/Home.vue'),},
      {path: '/manager/about',   component: import('../views/About.vue'),},
    ]
    },

    {path: '/notFound',   component: import('../views/404.vue')},
    {path: '/:pathMatch(.*)*', redirect: '/notFound'},

  ],
})

export default router

得到：

大功告成！！！

三、附件

参考视频： 

【带小白做毕设】02. 使用Vue3集成Element-Plus快速搭建一个管理系统的页面框架_哔哩哔哩_bilibili 

vue3使用element-plus
qq_45947664的博客
11-16 3458
1、下载包2、引入全局引入+挂载：引入记得有css文件（下载不下来可能是项目正在运行，先关掉）按需引入：先下载两个插件修改vue.config.js文件。
vue3 接入 Element Plus
大家好，我是+V
01-03 3544
Element Plus是一套为开发者、设计师和产品经理准备的基于Vue 3.0的桌面端组件库。反馈：通过界面样式和交互动效让用户清晰地感知自己的操作。当用户进行操作后，页面元素的变化会清晰地展现当前状态。效率：设计简洁直观的操作流程，使语言表达清晰且表意明确，帮助用户快速理解进而作出决策。此外，界面简单直白，减少用户记忆负担。可控：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策。用户可以自由地进行操作，包括撤销、回退和终止当前操作等。
基于vue3+element-plus的助农扶贫系统后台布局设计源码
02-07
该项目为基于Vue 3和Element Plus框架开发的助农扶贫系统后台布局设计源码，共计105个文件。其中包括46个Vue组件文件、35个TypeScript类型定义文件、6个JSON配置文件，以及少量图片、SCSS样式、SVG矢量图形等其他资源。与Vue 2项目相比，该系统在布局设计上存在显著差异。
vue3+element-plus
qq_52076808的博客
10-10 2669
这个对象可以包含响应式数据、计算属性、方法、以及任何需要在模板中访问的内容。ref是 Vue 3 提供的一个函数，用来创建响应式的引用。它接受一个初始值，并返回一个包含这个值的响应式对象。toRef的本质是应用，与原始数据有交互，修改响应式数据会影响到源数据，但是不会更新视图层。用于将一个响应式对象的所有属性转换为ref对象。每个ref对象保持与原始对象属性的双向绑定，从而在解构和传递时保持响应性。watch是 Vue.js 中的一个选项，用于监听和响应 Vue 实例的数据变更。通过watch。
Vue3集成Element Plus完整指南：从安装到主题定制上
最新发布
p6448777的博客
04-20 1455
Element Plus是一套基于Vue 3.0的桌面端组件库，由饿了么前端团队开源维护。它提供了丰富的UI组件，能够帮助开发者快速构建企业级中后台产品。本文详细介绍了如何在Vue 3项目中集成Element Plus组件库，包括：基础安装与配置图标系统的使用主题颜色的深度定制通过主题定制功能，开发者可以轻松实现品牌风格的统一，快速构建符合企业视觉规范的应用程序。Element Plus丰富的组件和良好的可定制性，使其成为Vue 3生态中最受欢迎的UI库之一。
vue3集成Element Plus
I_xuebi的博客
05-30 6028
vue3、element-plus（自动引入、自动导入、国际化、中文、图标）
Vue3使用Element-plus
IT菜鸟
02-23 4679
此处 Vue3 使用了 Vite 构建工具 ，没有使用 webpack。
VUE3+ElementPlus
weixin_43860369的博客
03-22 966
此时vue3+element-plus项目已经创建完成，可以在项目中使用elementui的布局和样式了。备注：VUE3项目不能使用element-ui，引入后会报错，只能使用element-plus框架。在src/componets/HelloWord.vue新增element-ui的按钮。一、进入项目目录，安装ElementPlus。二、安装成功以后，修改src/main.js。
vue-element-admin 集成框架设置中文语言
11-10
Vue-element-admin是基于Vue.js构建的一个后台管理界面框架，它结合了Element UI组件库，提供了丰富的UI组件和强大的功能，使得开发者能够快速搭建企业级的后台管理系统。 在"vue-element-admin 集成框架设置中文...
vue3 + vite5 + typescript + element-plus 构建的后台管理前端模板的 vue3 版本
04-02
Element-Plus 是一个基于 Vue3 的企业级 UI 组件库，它是 Element UI 的升级版，提供了丰富的界面组件，如表格、按钮、对话框等，使得开发者可以快速构建美观的后台管理系统。Element-Plus 支持 Vue3 的特性，如 ...
基于 Vue3、TypeScript、Vite、Pinia、Element-Plus、Unocss 的一套后台管理框架.zip
04-03
Element-Plus是一个基于Vue3的UI组件库，它是Element UI的升级版，提供了丰富的界面元素和组件，如表格、按钮、提示等，可以快速构建出美观的后台管理系统。Element-Plus不仅兼容Vue3的新特性，还对TypeScript做了很...
前端 vue3 vue3入门实战 从零搭建vue3+element-plus后台管理项目 阶段1项目源码
04-07
通过搭建项目的实践，初学者不仅可以学会如何使用Vue3的新特性，还能够熟悉Element Plus的使用方法，并掌握构建后台管理系统的基本框架。 整个项目按照模块化的方式进行组织，源码中包含多个子目录，如node_modules...
Vue3和Element-Plus
我3的博客
07-01 1803
npm install -g @vue/clivue -Vvue create vue-element-plus只选择基础的 npm install 拉取依赖npm-moudles:第三方的依赖、组件
Vue 3项目安装Element-Plus
洛*璃的博客
07-18 3345
是一个基于的现代前端UI框架，它旨在提升开发体验，并为开发者提供高效、优雅的组件。如果你正在使用进行项目开发，那么安装和集成是一个不错的选择。在本文中，博主将详细介绍如何在项目中安装。
ElemenPlus与ElementUI
秋书一叶的博客
08-26 9362
Element Plus 是一个基于 Vue.js 的开源 UI 组件库，旨在帮助开发者构建出现代化、美观且高效的 Web 应用程序界面。它是对 Element UI 的进一步发展，专注于提供更好的性能、更丰富的组件以及更好的开发体验。
Vue3与Element-plus整合及项目实战
热门推荐
sinat_30844883的博客
05-14 2万+
Element-plus简介是ElementUI的升级版，是一套基于vue2与vue3的桌面端组件库，它提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的前端页面。
vue3 + elementplus 教程
mc_ChenF_B的博客
07-06 3252
--|shims-vue.d.ts -- 类文件(也叫定义文件)，因为.vue结尾的文件在ts中不认可，所以要有定义文件。---|store -- 是vuex的文件，主要用于项目里边的一些状态保存。---|router -- vue-router路由文件。index.ts中引入views包下的*.vue。---|views -- 用于存放我们写好的各种页面，即路由组件，比如Login.vue，Home.vue。---|assets -- 放置静态文件的目录，比如logo.pn就放在这里。
Vue3-ElementPlus
weixin_46479909的博客
11-28 2532
(1)rule 当前校验规则相关的信息(2)value 所校验的表单元素目前的表单值(3)callback 无论成功还是失败，都需要 callback 回调--callback()校验成功--callback(new Error(错误信息)) 校验失败默认是实时触发，要修改成失焦触发if (value!callback(new Error('两次输入的密码不一致'))} else {callback() //校验成功，也需要callback},
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值