Vue + Element做个小页面~

最新推荐文章于 2024-10-02 08:00:00 发布
最新推荐文章于 2024-10-02 08:00:00 发布
阅读量8.5k 收藏 89
点赞数 16
分类专栏： 突发奇想 文章标签： vue java 算法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/FUTEROX/article/details/123783568
版权
本文介绍了一个使用Vue和ElementUI构建的小页面项目，包括项目结构、Markdown编辑器、消息模块和设置模块的实现。Markdown编辑器采用了meavon组件，消息模块连接各个模块，前端代码进行了重构，旨在提升用户体验。项目预计还将推出移动端，并计划开源。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

前言

直接看效果，干啥慢慢猜~
博文在掘金社区同步更新~

image.png

项目结构

image.png

这个的话可以看到分了一些组件嘛。然后总体还是vue+elementui 后面活下来了再用uniapp做移动端嘛。

MarkDown编辑器

这个是咱们比较主要的功能嘛。

也是用了meavon这个开源的Markdown组件嘛。

image.png

然后是文章上传嘛，这里有个弹窗嘛。

image.png

代码如下

了解本专栏 订阅专栏 解锁全文 超级会员免费看
前端VUE框架+element-ui构建界面
u014084915的博客
01-07 1696
（1）element组件使用，element组件网址：https://element.eleme.cn/#/zh-CN/component/form element组件网址查看按钮代码，在vue默认界面中写入按钮代码， 默认按钮采用js代码式跳转，主要按钮采用路由声明式跳转。 （2）前端第一步：写静态界面，第二步：写js，jquery，按钮点击事件js代码式js写法如下： （3）终端运行界面的代码是什么，如何配置实现点击运行，显示效果如下图所示： ...
JS小游戏-24点（vue+element简单实现）
small-white的博客
09-27 1357
上次下午快下班时闲着没事，想起了小的时候玩用扑克牌玩的一个小游戏--24点。游戏规则很简单，把扑克牌里面的数字和A挑出来，打乱顺序，两人平分这些牌，然后每人出两张牌，两个人抢答，根据这四张牌使用加减乘除和括号，每张牌使用一次，先算出来的人获得4张牌。重复上述过程，直到有一个人输掉所有牌游戏结束。 刚好最近在使前端，就想着用一个页面来实现一下这个小游戏，简单的使用vue、element来完成的。效果图： 这里只是一个人玩的，后面可以做成可以两个人玩的。 代码： <!DOCTYPE html
VUE基于ElementUI搭建的简易单页后台
weixin_30670925的博客
01-08 237
一、项目链接 GitHub 地址：https://github.com/imxiaoer/ElementUIAdmin 项目演示地址：https://imxiaoer.github.io/ElementUIAdmin/dist/index 二、项目依赖　 　　1. 数据请求 　　　　"axios": "^0.18.0", 　　2. 图表控件 　　　　 "e...
vue 安装element_实战 | Vue + Element UI 页面创建
weixin_39633807的博客
02-02 119
这是小小本周的第六篇，本篇将会着重讲解关于Vue和Element UI 相关的内容思维导图网页版Vue Cli 基本使用这里使用Vue Cli 进行基本的使用安装npm install -g @vue/cli安装的界面如下PS C:UsersAdministratorDesktop> npm install -g @vue/clinpm WARN deprecated @hapi/...
vue+element+单页面化开发
mslmhl的博客
05-05 1048
vue+element+单页面化开发 怎么设置子路由 1.设置子路由(说明他们有一个共同的‘爸爸’) 例如：博客页面的导航栏是每一给页面都有这样我们就可以把导航栏设置成父组件 思路：单独创建一个页面之储存父组件 如何再路由引入，如何再创建子页面（就是普通页面），只是再路由中区别一下就可以 然后再父组件中需要有一个展示子组件的位置和代码 加上<router-view /> 最后一...
浅谈Vue（使用vue+element ui搭建页面）
weixin_33877885的博客
07-11 346
2019独角兽企业重金招聘Python工程师标准>>> ...
vue+element实现打印页面功能
10-16
Vue.js作为一个流行的前端框架，配合Element UI这样的基于Vue的组件库，可以方便地实现页面打印功能。本文将详细介绍如何使用Vue.js和Element UI来实现打印页面的功能。 首先，打印页面功能的实现，通常依赖于...
基于vue + element UI 的后台管理系统模板
09-12
这个模板使用了Vue和Element UI，为开发者提供了现成的界面元素和布局，减少了从零开始编写代码的工作量。 【主要功能组件】 1. **登录页**：提供用户认证的界面，通常包括用户名、密码输入框以及登录按钮，可能还...
vue+element简单实现商城网站首页，模仿电商商城
04-17
vue+element简单实现商城网站首页，模仿电商商城，简洁易懂的经典vue项目布局，无论是作为学习模板还是产品实现都是可以的，拓展性强大，本项目基于elementui实现，从这里可以轻松学到页面头底部共用、菜单、轮播图...
基于vue+element的在线拖拽生成表单页面，支持属性设置实时响应
04-09
【标题】中的“基于vue+element的在线拖拽生成表单页面，支持属性设置实时响应”指的是一个使用Vue.js框架和Element UI库开发的Web应用。Vue.js是目前非常流行的前端JavaScript框架，它以轻量级、高性能和易用性著称...
Vue.js+Element：页面开发
qq_44419617的博客
08-25 218
1、/src/router/index.js文件中添加路由 { path: '/form', component: Layout, children: [{ path: 'index', name: 'Form', component: () => import('@/views/form/index'), meta: { title:...
JavaWeb——Vue组件库Element（4/6）：案例：基本页面布局（基本框架、页面布局、CSS样式、完善布局、效果展示，含完整代码）
li13437542099的博客
10-02 914
Element 的基本使用方式以及常见的组件已经了解完了，接下来要完成一个案例，通过这个案例让大家知道如何基于 Element 中的各个组件制作一个完整的页面。页面列表中的数据不是写死的，而是要基于 Axios 发送请求动态加载展示的，提供了服务端数据获取的地址，即 YAPI Pro平台提供的 MOCK 地址，访问后返回 JSON 格式的数据，需要将其渲染展示在列表页面中，最终制作出来的页面分为三个部分，上面是页头部分，下面分为左侧菜单栏和右侧主展示区域。该地址来源于互联网，如有侵权请联系删除。
单HTML中 使用vue 、element 简单示例
清流弯弯
01-05 1087
有的时候，很 懒，不想自己添加额外资源，就想使用VUE 和element现成组件，可以用以下方法实现 <html> <head> <meta charset="UTF-8"> <title>古典小说</title> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/ind
小程序（二）使用npm安装weui
camellia的博客
09-26 1192
作为一个不专业的前端，在开发前端的时候我喜欢用一些UI库。HTML页面一般习惯用bootstarp，layui等。VUE项目一般习惯用iview，elementui等。 小程序自然也不例外，我这里使用的是官方推荐的weui组件库，但是如何将其引入项目，这是一个很值得深思的问题。 最终我还是选择了VUE一样的管理方式，使用npm。 Vue的脚手架默认就是支持npm的。但是小程序需要你手动安装。 当然，这部分官方文档是有介绍的，想看官方文档的同学，请移步《npm支持》 写这篇博客的原因就是，官方文档我看不懂，反
vue中如何使用Element-UI，web小程序开发工具
2401_84093203的博客
04-04 568
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里免费领取对你有帮助，可以扫码获取！！（备注：前端）**整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。
【Vue+element-ui搭建前端页面】适用于初学者学习
热门推荐
一学就会小小王的博客
11-03 1万+
到这儿我们就学习到怎么用Vue和Element搭建前端界面，并且了解了一些前端向后端发送接收请求需要的技术，希望大家看到这会有所收获！t=M85B组件 | Elementhttps://element.eleme.cn/#/zh-CN/component/quickstart。
vue2和elementUI 打造落日余晖登录页和滑块校验
码农桃子的博客
05-16 4275
标题很夸张，实则是AI的功能，今天咱也搞一个登录页，其实满简单的一个东东，大家也都会用到，本次仅限前端，没有任何后台交互，技术、、，因为背景图是落日，所以就叫它吧 使用指令直接构建的，选择vue2版本 构建后的项目，删掉了原始的helloworld组件，最终目标结构如下： 由于项目是基于vue2的，故vue-router不能使用4.x版本，后面会有问题，在文末说了。 项目构建成功后，删掉最初的helloworld组件新建文件，将我们要写的登录页路径放进去 ② App.vue 移除掉老的中的全部内容，然后我
Vue + ElementUi 管理系统页面制作步骤 2021-6-29
前端工程师的修炼笔记
08-05 2354
管理系统页面制作步骤 登录/退出功能 登录概述 1.登录业务流程 在登录页面输入用户名和密码 调用后台接口进行验证 通过验证之后，根据后台的响应状态跳转到项目主页 2.登录业务的相关技术点 http 是无状态的 通过cookie在客户端记录状态（不跨域推荐） 通过session在服务器端记录状态（不跨域推荐） 通过token方式维持状态 (存在跨域使用） 3.登录功能实现 路有导航守卫控制访问权限 如果用户没有登录，但是直接用过url访问特定页面，需要重新导航到登录页面 //为路由对象 添加 befor
vue使用ElementUI搭建主页
世间本无路，恒走坦途出
10-21 1695
找到Container 布局容器，找到 实例 代码，拷贝该代码至Home.vue的template里面的div中，div、el-container、el-aside、el-munu元素height设置100%(为了让元素贴边)，el-container删除border。2、然后到App.vue，删除id="app"中除了以外的元素，和style里面的样式内容，在style里面加入（也是为了元素贴边）在main.js中引入该css。
vue+element plus 做安全宣传页面
最新发布
04-03
### 使用 Vue 和 Element Plus 创建安全宣传页面的设计思路 创建一个安全宣传相关的网页可以通过 Vue 和 Element Plus 实现高效、美观的效果。以下是设计思路以及示例代码。 #### 页面结构规划 为了展示安全宣传的内容，可以将页面分为以下几个部分： 1. **顶部导航栏**：用于显示网站名称和主要功能入口。 2. **主要内容区域**：展示安全宣传的核心内容，例如图片轮播、文字说明等。 3. **底部版权信息**：提供版权声明或其他附加信息。 这种布局能够使用户快速获取所需的信息，同时保持界面简洁明了[^2]。 #### 安装依赖 确保已安装 Vue 3 和 Element Plus。如果尚未完成安装，可运行以下命令： ```bash npm install vue@next npm install element-plus ``` 接着，在 `main.js` 中全局引入 Element Plus： ```javascript 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'); ``` #### 示例代码 以下是一个简单的安全宣传页面的实现代码： ##### HTML 结构 (`App.vue`) ```html <template> <div id="app"> <!-- 头部 --> <el-header class="header">安全宣传活动</el-header> <!-- 主体 --> <el-main> <el-row :gutter="20"> <el-col :span="12"> <h2>活动主题</h2> <p>{{ theme }}</p> </el-col> <el-col :span="12"> <el-carousel height="300px"> <el-carousel-item v-for="(image, index) in images" :key="index"> <img :src="image.src" alt="宣传图" style="width: 100%; height: 100%;" /> </el-carousel-item> </el-carousel> </el-col> </el-row> </el-main> <!-- 底部 --> <el-footer class="footer">© 2023 安全宣传团队</el-footer> </div> </template> <script> export default { data() { return { theme: '网络安全意识提升', images: [ { src: 'https://via.placeholder.com/800x400?text=Image+1' }, { src: 'https://via.placeholder.com/800x400?text=Image+2' }, { src: 'https://via.placeholder.com/800x400?text=Image+3' } ] }; } }; </script> <style scoped> .header { background-color: #409eff; color: white; text-align: center; line-height: 60px; } .footer { background-color: #f0f0f0; color: black; text-align: center; line-height: 60px; } </style> ``` 上述代码实现了如下功能： - 利用 `el-header` 显示标题。 - 使用 `el-main` 展示核心内容，包括活动主题的文字描述和图片轮播。 - 添加了一个简单的 `el-footer` 来放置版权信息。 #### 后端支持 虽然前端框架能很好地呈现数据，但如果涉及动态更新或交互操作，则需要后端的支持。例如，可以从服务器拉取最新的活动主题和图片资源。这通常通过 API 接口实现，具体逻辑可以根据实际需求调整[^1]。 --- ###
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Huterox

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

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

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

打赏作者

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

抵扣说明：

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

余额充值