【java爬虫】使用vue+element-plus编写一个简单的管理页面

最新推荐文章于 2024-04-26 17:37:33 发布
最新推荐文章于 2024-04-26 17:37:33 发布
阅读量1.3k 收藏 3
点赞数
分类专栏： java网络爬虫 前端学习笔记 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haohulala/article/details/133612441
版权

前言

前面我们已经将某宝联盟的数据获取下来了，并且编写了一个接口将数据返回，现在我们需要使用vue+element-plus编写一个简单的管理页面进行数据展示，由于第一次使用vue编写前端项目，所以只是编写了一个非常简单的页面。

项目结构

先来简单介绍一下项目结构，本次项目非常简单，我只是使用了vue3+element-plus，只是一个demo样例，后续可以添加其他的新功能。

整体布局就是传统的管理系统的布局，一共由三个部分组成，分别是头部，侧边栏和主页面

头部可以填写一些信息，包括用户的登录登出操作，侧边栏就是一些按钮，用来切换主页面，主页面就是展示我们的具体信息。

本次的案例我们只有两个页面，一个是首页，一个就是详细的数据页面，在vue项目中分别对应了两个组件，其中首页我只是简单用文字描述了一下。

下面来看一下详细的项目结构

首先是main.js，这是vue项目的主函数，在这里将我们需要用到的三方库都引进来

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');

接着是App.vue，这个页面就是我们的主页面，我们将大体的程序框架都写在这个文件中

<template>
  <div>
      <el-container>
      <el-header style="background-color:beige;">欢迎使用管理系统</el-header>
      <el-container>
          <el-aside width="200px" style="background-color:cornsilk;">
            <el-menu
              @select="selectfunc"
              default-active="1"
              class="el-menu-vertical-demo">
              <el-menu-item index="1">
                <el-icon><icon-menu /></el-icon>
                <span>首页</span>
              </el-menu-item>
              <el-menu-item index="2">
                <el-icon><icon-menu /></el-icon>
                <span>数据详情</span>
              </el-menu-item>
          </el-menu>
          </el-aside>
          <el-main style="background-color: blanchedalmond;">
            <div v-show="display1">
              <MainView></MainView>
            </div>
            <div v-show="display2">
              <InfoDetail></InfoDetail>
            </div>
          </el-main>
      </el-container>
      </el-container>
  </div>
</template>

<script>
import InfoDetail from './components/InfoDetail.vue';
import MainView from './components/MainView.vue';

export default {
  name: 'App',
  data() {
    return {display1:true, display2:false};
  },
  components: {
    InfoDetail, MainView
  },
  methods: {
      selectfunc : function(index) {
        if(index == 1) {
          console.log("点击了首页");
          this.display1 = true;
          this.display2 = false;
        } else if (index == 2) {
          console.log("点击了数据详情");
          this.display1 = false;
          this.display2 = true;
        }
        
      }
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

最后就是我们引入的两个组件，一个是首页，这个组件我们只是用一个简单的占位符进行表示，后续还可以更新其他的内容

<template>
    <el-text>这是主页</el-text>
</template>

<script>
export default {
    name: 'MainView',
}
</script>

最后就是我们的详细的数据页面，我们使用element-plus的表格进行表示

<template>
    <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="imgUrl" label="图片">
      <template v-slot:default="scope">
        <el-image :src="scope.row.imgUrl"/>
      </template>
    </el-table-column>
    <el-table-column prop="title" label="标题">
      <template v-slot:default="scope">
        <el-text truncated>{{ scope.row.title }}</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="commission" label="佣金"></el-table-column>
    <el-table-column prop="commissionRate" label="佣金率"></el-table-column>
    <el-table-column prop="prePrice" label="券前价格"></el-table-column>
    <el-table-column prop="postPrice" label="券后价格"></el-table-column>
    <el-table-column prop="preferentialPrice" label="优惠价格"></el-table-column>
    <el-table-column prop="preferentialRate" label="优惠率">
      <template v-slot:default="scope">
        <el-text>
          {{ Math.round(scope.row.preferentialRate*100) }}%
        </el-text>
      </template>
    </el-table-column>
    <el-table-column prop="recommend" label="淘口令">
      <template v-slot:default="scope">
        <el-text truncated>{{ scope.row.recommend }}</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="serializeTime" label="创建时间"></el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'InfoDetail',
  data() {
    return {
      tableData: [{
				"commission": 2.64,
				"commissionRate": 5.3,
				"imgUrl": "//img.alicdn.com/bao/uploaded/i3/6000000002126/O1CN01Z5K9L61RZktaDO7mX_!!6000000002126-0-sm.jpg",
				"postPrice": 49.9,
				"prePrice": 99.0,
				"preferentialPrice": 49.1,
				"preferentialRate": 0.496,
				"recommend": "立白天然茶籽洗衣液6KG 家庭实惠洗衣除菌除螨 89.00元\n本月上新\n买它！超值！\nh:/89￥ CZ3457 tptfdGVZ6Wj￥\n",
				"serializeTime": "2023-07-16 13:16:28",
				"title": "立白天然茶籽洗衣液6KG 家庭实惠洗衣除菌除螨",
			}, {
				"commission": 7.11,
				"commissionRate": 9.0,
				"imgUrl": "//img.alicdn.com/bao/uploaded/O1CN010BdQ3w1eaIJCsydxO_!!6000000003887-0-yinhe.jpg",
				"postPrice": 49.5,
				"prePrice": 89.0,
				"preferentialPrice": 39.5,
				"preferentialRate": 0.4438,
				"recommend": "Joocyee酵色唇釉琥珀唇彩丝绒口红哑光贝壳镜面唇泥太妃糖复古女 79.00元\n历史热推\n速速抢购，手快有，手慢无！\nh:/68￥ CZ0001 30W9dGVaz77￥\n",
				"serializeTime": "2023-07-16 13:16:41",
				"title": "Joocyee酵色唇釉琥珀唇彩丝绒口红哑光贝壳镜面唇泥太妃糖复古女",
			}, {
				"commission": 0.67,
				"commissionRate": 1.35,
				"imgUrl": "//img.alicdn.com/bao/uploaded/O1CN01oDxvso1iw3dVd7jec_!!6000000004476-0-yinhe.jpg",
				"postPrice": 49.9,
				"prePrice": 84.9,
				"preferentialPrice": 35.0,
				"preferentialRate": 0.4122,
				"recommend": "蒙牛特仑苏纯牛奶250ml*16盒整箱学生早餐奶高端（新旧包装混发） 82.90元\n超十万人正在疯抢\n喜欢的宝宝们千万不要错过哦~赶紧买起来买起来！~\nh:/49￥ CZ3457 kbB6dGeADLs￥\n",
				"serializeTime": "2023-07-16 13:16:01",
				"title": "蒙牛特仑苏纯牛奶250ml*16盒整箱学生早餐奶高端（新旧包装混发）",
			}, {
				"commission": 0.9,
				"commissionRate": 1.5,
				"imgUrl": "//img.alicdn.com/bao/uploaded/O1CN01hCQXtN1Oc5yax1WHF_!!6000000001725-0-yinhe.jpg",
				"postPrice": 46.57,
				"prePrice": 79.9,
				"preferentialPrice": 33.33,
				"preferentialRate": 0.4171,
				"recommend": "【零感003】杰士邦避孕套正品官方旗舰店安全套超薄男用裸入持久1 59.90元\n赠运费险\n买它就对了～\nh:/77￥ CZ3457 Y5i7dGVZj30￥\n",
				"serializeTime": "2023-07-16 13:16:33",
				"title": "【零感003】杰士邦避孕套正品官方旗舰店安全套超薄男用裸入持久1",
			}, {
				"commission": 0.33,
				"commissionRate": 0.3,
				"imgUrl": "//img.alicdn.com/bao/uploaded/O1CN01BvRfuK22sf0fmsdtn_!!6000000007176-0-yinhe.jpg",
				"postPrice": 109.0,
				"prePrice": 139.0,
				"preferentialPrice": 30.0,
				"preferentialRate": 0.2158,
				"recommend": "罗马仕20000毫安充电宝双自带线双向快充大容量1万小巧移动电源闪充适用华为苹果iphone小米oppo手机专用户外 109.00元\n超十万人正在疯抢\n快~少量库存！！赶紧冲拼手速！！\nh:/19￥ CZ0001 0GK2dGVayGy￥\n",
				"serializeTime": "2023-07-16 13:16:24",
				"title": "罗马仕20000毫安充电宝双自带线双向快充大容量1万小巧移动电源闪充适用华为苹果iphone小米oppo手机专用户外",
			}, {
				"commission": 1.6,
				"commissionRate": 1.8,
				"imgUrl": "//img.alicdn.com/bao/uploaded/i1/2200828292428/O1CN01f5SKRV1To4V1gBrc1_!!2200828292428.jpg",
				"postPrice": 89.0,
				"prePrice": 118.0,
				"preferentialPrice": 29.0,
				"preferentialRate": 0.2458,
				"recommend": "逐本清欢晨蜜自在自然植萃卸妆油敏弱肌脸部舒缓深层清洁卸妆水膏 89.00元\n回头客1万+\n质量逆天，赶紧的，闭眼买都不亏！！\nh:/59￥ CZ0001 JrpUdGVafyH￥\n",
				"serializeTime": "2023-07-16 13:16:06",
				"title": "逐本清欢晨蜜自在自然植萃卸妆油敏弱肌脸部舒缓深层清洁卸妆水膏",
			}, {
				"commission": 0.69,
				"commissionRate": 1.35,
				"imgUrl": "//img.alicdn.com/bao/uploaded/O1CN01ry5fh31G8llXLIPuR_!!6000000000578-0-yinhe.jpg",
				"postPrice": 50.9,
				"prePrice": 74.4,
				"preferentialPrice": 23.5,
				"preferentialRate": 0.3159,
				"recommend": "蒙牛纯牛奶全脂灭菌乳250ml*24盒/1箱学生营养早餐搭配优质乳蛋白 71.40元\n回头客12万+\n买它就对了～\nh:/97￥ CZ3457 nlVhdGVZUPV￥\n",
				"serializeTime": "2023-07-16 13:16:10",
				"title": "蒙牛纯牛奶全脂灭菌乳250ml*24盒/1箱学生营养早餐搭配优质乳蛋白",
			}, {
				"commission": 2.21,
				"commissionRate": 4.5,
				"imgUrl": "//img.alicdn.com/bao/uploaded/O1CN01gO1IfQ1ljdhW0a0LT_!!6000000004855-0-yinhe.jpg",
				"postPrice": 49.0,
				"prePrice": 69.0,
				"preferentialPrice": 20.0,
				"preferentialRate": 0.2899,
				"recommend": "蕉下修容口罩EM320 防晒护眼角开车面罩防紫外线立体夏女透气户外 49.00元\n好评过万\n不要犹豫！库存不多抓紧抢！\nh:/59￥ CZ0001 LYJSdGVZeik￥\n",
				"serializeTime": "2023-07-16 13:16:37",
				"title": "蕉下修容口罩EM320 防晒护眼角开车面罩防紫外线立体夏女透气户外",
			}, {
				"commission": 3.05,
				"commissionRate": 10.5,
				"imgUrl": "//img.alicdn.com/bao/uploaded/O1CN01siAhJN1Hwyo2vfWAr_!!6000000000823-0-yinhe.jpg",
				"postPrice": 29.0,
				"prePrice": 49.0,
				"preferentialPrice": 20.0,
				"preferentialRate": 0.4082,
				"recommend": "猫人抗菌裆男士内裤男冰丝无痕四角裤运动纯棉裆平角大码裤青少年 29.00元\n回头客2万+\n质量逆天，赶紧的，闭眼买都不亏！！\nh:/17￥ CZ0001 ZxlhdGVaNAb￥\n",
				"serializeTime": "2023-07-16 13:16:51",
				"title": "猫人抗菌裆男士内裤男冰丝无痕四角裤运动纯棉裆平角大码裤青少年",
			}, {
				"commission": 1.79,
				"commissionRate": 6.0,
				"imgUrl": "//img.alicdn.com/bao/uploaded/O1CN01PyEz521NEuMNqT3Av_!!6000000001539-0-yinhe.jpg",
				"postPrice": 29.9,
				"prePrice": 49.9,
				"preferentialPrice": 20.0,
				"preferentialRate": 0.4008,
				"recommend": "【百亿补贴】进口茱蒂丝巧克力夹心饼干纯可可脂儿童健康休闲零食 29.90元\n近7天浏览过万\n这价位能做到这样真的无可挑剔！\nh:/98￥ CZ0001 eJUpdGVZvWR￥\n",
				"serializeTime": "2023-07-16 13:17:51",
				"title": "【百亿补贴】进口茱蒂丝巧克力夹心饼干纯可可脂儿童健康休闲零食",
			}]
    };
  },
}
</script>

在使用element-plus的表格的时候可能会报错，我们需要在vue.config.js中添加一个段内容

添加完这段内容后需要重启项目才能生效。

总结

本文只是简单介绍了一下使用vue+element-plus编写一个管理系统前端页面的基本项目结构，根据这个项目结构就可以不断完善功能，编写出自己想要的效果。

最后附上element-plus组件的使用文档

Button 按钮 | Element Plus (element-plus.org)

haohulala
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 、 JWT 、 Redis 、 Mybatis-Plus 、 Knife4j 等技术栈搭建的前后端分离开源权限管理系统。 在线预览地址：http://vue3.youlai.tech 开源仓库地址：https://gitee.com/youlaiorg/vue3-element-admin 后端仓库地址：https://gitee.com/youlaiorg/youlai-boot
管理系统的前端模板（vue2+Element UI）
快乐学习
04-19 1万+
前言这是引用ElementUI官网的布局容器里面的代码拿来修改优化后的。用的框架是vue2一、模板展示图二、获取的方式及操作运行步骤（一）获取方式去公众号“（二）操作步骤。
基于vue3+element-plus的一个物资后台管理系统源码.zip
06-15
基于vue3+element-plus的一个物资后台管理系统源码.zip
【Vue】Vue重写教室管理系统的前端网页V1（前后端分离）--20221222
Season CSDN博客
12-23 1394
练习并熟悉Vue2 的API，来为Vue项目做准备： - 插值语法 - 插槽 - props和data - 父子组件通信 - Ajax异步请求数据 - 生命周期函数 - methods方法 - computed属性 - vue-router、路由守卫、query/params传参、编程函数式路由 - 模拟后端服务器传送数据 - 打包项目
基于Vue3 + Element Plus 的后台管理系统详细教程
一步一个脚印，踏实努力，向着目标前进
06-13 1万+
以上是使用 Vue3 和 Element Plus 创建后台管理系统的基本步骤，但如果你想要实现一个实用的后台管理系统，还需要实现登录、权限管理、数据增删改查等功能。Vue 3 中最大的新特性是引入了 Composition API，它允许开发人员按照逻辑相关的方式组织代码，可以更好地复用组件和处理复杂的逻辑。在 data 中声明登录所需参数，初始化表单验证规则并在 method 中实现表单的提交、参数的验证与登录状态的切换。使用 Element Plus 提供的表格、表单等组件实现数据的增删改查。
带你实现一个网页项目从无到有，第二篇（引入element plus和路由）
weixin_46281068的博客
11-26 128
在底边栏选择terminal,输入：“npm install element-plus --save”，就会开始下载，直至出现found 0 vulnerabilities即可。在左边树形栏中src前面点击下拉，双击出现的main.js文件，改成下面的代码，直接复制粘贴即可，改成我下面红框内的。安装路由：在terminal中输入：npm install vue-router --save。在左侧树形栏中创建如图所示的文件，注意，后缀也要一样嗷。运行后，点击链接，显示如下图表示成功。
vue通用后台管理系统（四）
weixin_45835813的博客
07-17 1375
用户管理页面分为三个部分：右上侧的表单搜索区，可以对用户进行搜索过滤；中间是列表的展示区，包含用户的姓名、年龄、性别、出生日期、地址和操作（对每一行数据进行编辑和删除）以及分页；左上角的新增区，可以新增用户信息elementui----提供form表单、Pagination分页①当前系统必须通过登录页进行登录之后才可以进入 ②当前系统会有对应的权限-菜单权限，和用户相关。
168张图，万字长文，手把手教你开发vue后台管理系统
热门推荐
程序员小明1024
10-03 2万+
.markdown-body { color: rgba(56, 56, 56, 1); font-size: 15px; line-height: 30px; letter-spacing: 2px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open...
前端笔记猛猛学
CallMe_CrabXie的博客
04-24 605
前端学习的日常记录
Vue3+element-plus 后台管理系统（含登陆注册功能页面）
weixin_54629917的博客
03-24 1万+
Vue3+element-plus 搭建后台管理系统,获取远程数据对页面进行渲染。(包含登录注册页)
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端）.zip
05-02
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
Vue3+Vite4+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）
05-03
Vue3+Vite4+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）；精简版是基于 vue-pure-admin 提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小在全局引入 element-plus 的情况下仍然低于...
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 388
步骤很详细，直接上教程……
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 152
vue echarts 柱状图 堆叠柱状图
vue 实现级联选择器功能
清音的博客
04-22 514
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
vue3组件 描点定位以及监听滚动切换对应activeTab
最新发布
weixin_41824429的博客
04-26 279
【代码】vue3组件 描点定位以及监听滚动切换对应activeTab。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 407
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
Vue-router的动态路由：获取传递的值
woliuhuaqiangla的博客
04-22 388
Vue.js是一款流行的JavaScript框架，用于构建单页面应用程序。它提供了许多有用的功能，其中之一是Vue-router，它允许您轻松地管理应用程序的路由。Vue-router支持动态路由，这意味着您可以在路由中使用变量，并在组件中访问它们。本文将介绍如何定义Vue-router的动态路由，以及如何获取传递的值。动态路由的优缺点动态路由是指根据特定的参数来动态地生成路由，这在使用Vue-router时是非常常见的。
vue3+element-plus编写的博客页面代码
08-06
### 回答1： 我很抱歉，我不能给你具体的 Vue3 Element-plus 编写的博客页面代码，因为这需要具体的需求和实现细节。我可以提供一些帮助和指导来解决你的问题。 建议你首先了解 Vue3 的基础知识和 Element-plus 的使用方法。然后，你可以使用 Vue CLI 创建一个新的 Vue3 项目，并在项目中安装 Element-plus。 你可以定义一些组件来实现博客页面的不同部分，例如顶部导航栏、博客列表、博客内容等。你可以使用 Element-plus 的组件来帮助你实现这些部分。 最后, 你可以使用 Vue3 的路由功能来实现博客页面的导航和跳转。 希望这些提示能帮助你编写博客页面。如果你有其他问题，请随时问我。 ### 回答2： Vue3和Element Plus是两个独立的项目，Vue3是Vue.js框架的下一个主要版本，而Element Plus是一个基于Vue3的UI组件库。因此，编写博客页面的代码使用Vue3和Element Plus来实现。 首先，我们需要安装Vue3和Element Plus。可以通过npm或yarn来安装它们： ``` npm install vue@next npm install element-plus ``` 在Vue3中，我们需要创建一个Vue实例，并在html文件中引用： ```html <!DOCTYPE html> <html> <head> <title>博客页面</title> </head> <body> <div id="app"></div> <script src="https://unpkg.com/vue@next"></script> <script src="https://unpkg.com/element-plus"></script> <script src="app.js"></script> </body> </html> ``` 然后，在app.js文件中编写Vue3和Element Plus的代码： ```javascript import { createApp } from 'vue'; import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; const app = createApp(); app.use(ElementPlus); app.mount('#app'); ``` 上面的代码中，我们通过import语句引入了Vue3的createApp方法和Element Plus组件库，并使用app.use方法来告诉Vue使用Element Plus。然后，使用app.mount方法将Vue实例挂载到id为app的div上。 在编写博客页面的具体内容时，可以使用Element Plus提供的各种组件来实现页面的布局和样式。例如，可以使用Layout组件来创建页面的整体布局，使用Menu组件来创建导航菜单，使用Button组件来添加按钮等等。 以上是关于使用Vue3和Element Plus编写博客页面的基本步骤和示例代码。具体的实现还需要根据具体需求进行调整和编写。 ### 回答3： Vue3是一种用于构建用户界面的开源JavaScript框架，而Element Plus是一个基于Vue3的组件库。如果要编写一个博客页面，可以使用Vue3和Element Plus来创建页面的结构和组件。 首先，需要在Vue3的项目中安装和引入Element Plus。可以通过npm或yarn来安装依赖，并在主文件中引入所需的组件。 在页面的模板部分，可以使用Element Plus提供的布局组件来创建页面的整体结构。例如，可以使用Layout组件来定义头部、侧边栏和内容区域的布局。在内容区域中，可以使用Container组件来划分为不同的区块。 除了布局组件外，Element Plus还提供了丰富的表单组件、按钮组件、图片组件等等，可以根据博客页面的需求选择合适的组件进行使用。 在Vue3的脚本部分，可以使用Vue3的响应式数据和计算属性来处理页面的状态和逻辑。例如，可以使用ref来定义响应式数据，使用computed来定义计算属性。 另外，Vue3还引入了Composition API，可以使用setup函数来组合页面的逻辑。可以在setup函数中使用reactive将响应式数据转换为可响应式对象，使用watchEffect来监听响应式数据的变化。 在博客页面中，还可以使用Vue3的路由功能来实现页面之间的跳转。可以使用Vue Router来配置路由表，并结合Element Plus的导航栏组件来生成页面导航。 总之，使用Vue3和Element Plus可以轻松编写出具有丰富功能和良好用户体验的博客页面。通过合理使用Element Plus的组件和Vue3的特性，可以提高开发效率和代码可维护性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值