HTML+CSS+ElementUI搭建个人博客静态页面展示(纯前端)

网站演示

在这里插入图片描述

搭建过程

技术选取

  1. HTML/CSS
  2. VUE2
  3. ElementUI(Version - 2.15.14)

环境配置与搭建

  1. 安装指令
1. 先确保你的电脑已经安装好了`npm和node`
npm -v

node -v

2. ElementUI下载,推荐使用 npm 的方式安装
npm i element-ui -S

3. CDN引入
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

参考文档

[1]ElementUI - 2.15.14官网
[2] 获取图片网址

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/175287.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Redis 与其他数据库的不同之处 | Navicat

Redis&#xff0c;即远程字典服务器&#xff08;Remote Dictionary Server&#xff09;&#xff0c;它是一个多功能且高性能的键值存储系统&#xff0c;在数据库领域中已获得广泛关注和认可。在处理简单数据结构方面&#xff0c;它因其快速和高效而著称。本文中&#xff0c;我们…

基于高质量训练数据,GPT-4 Turbo更出色更强大

11月7日消息&#xff0c;OpenAI在首届开发者大会上正式推出了GPT-4 Turbo。 与GPT-4相比&#xff0c;GPT-4 Turbo主要有6方面的提升&#xff1a; 1、扩展下文对话长度&#xff1a;GPT4最大只能支持8k的上下文长度&#xff08;约等于6000个单词&#xff09;&#xff0c;而GPT-4…

SOLIDWORKS实用技巧——工程图模板替换

概述 工程师常在出图时选择最佳模板&#xff0c;在编辑一段时间后&#xff0c;发现需要更改图纸大小&#xff0c;怎样更改图纸大小还不影响现有工作。你是否也有此类问题&#xff1f; 那么&#xff0c;新建工程图时的模板从哪里来&#xff1f;如何轻松替换已有工程图的图纸格…

你还记得你常用的数据库有哪些吗?

接上文&#xff0c;常用数据库有哪些 Oracle 开发厂商&#xff1a;甲骨文公司 最新版本&#xff1a;Oracle Database 19c&#xff08;长期支持版&#xff09;、Oracle Database 21c&#xff08;创新版&#xff0c;已生产可用&#xff09; 发行方式: 商业软件&#xff08;Comme…

swagger的ApiImplicitParam注解中的required属性不起作用

问题的发现 如上两图&#xff0c;在接口中使用了’ApiImplicitParam’注解&#xff0c;仅指定了一个参数是必填&#xff0c;但是通过swagger文档查看三个参数均不能为空。 原因探究 最终确定到因为在RequestParam中也有一个required属性&#xff0c;用于指定是否必填。swagge…

ERP对接淘宝/天猫/京东/拼多多商品详情数据API接口

引言 今天&#xff0c;我们时代变化非常快&#xff0c;传统行业做法&#xff0c;已经无法完全适应时代的发展。互联网的发展&#xff0c;造成了一股网购热。京东&#xff0c;天猫&#xff0c;淘宝&#xff0c;易购……网购&#xff0c;给我们生活带来了方便&#xff0c;消费者…

系统试运行方案

系统试运行的目的&#xff1a; 试运行目的通过既定时间段的试运行&#xff0c;全面考察项目建设成果。并通过试运行发现项目存在的问题&#xff0c;从而进一步完善项目建设内容&#xff0c;确保项目顺利通过竣工验收并平稳地移交给运行管理单位。通过实际运行中系统功能与性能的…

股票基础数据(二)

二. 股票基础数据 文章目录 二. 股票基础数据一. 查询股票融资信息数据二. 查询所有的股票信息三. 查询所有的股票类型信息四. 根据类型查询所有的股票数据信息五. 查询股票当前的基本信息六. 查询股票的K线图, 返回对应的 base64 信息七. 展示股票的K线图数据, 对应的是数据信…

Go 异常处理流程

在 Go 语言中&#xff0c;panic、recover 和 defer 是用于处理异常情况的关键字。它们通常一起使用来实现对程序错误的处理和恢复。 1. defer 语句 defer 用于在函数返回之前执行一段代码。被 defer 修饰的语句或函数会在包含 defer 的函数执行完毕后执行。defer 常用于资源清…

服务器 jupyter 文件名乱码问题

对于本台电脑&#xff0c;autodl服务器&#xff0c;上传中文文件时&#xff0c;从压缩包名到压缩包里的文件名先后会出现中文乱码的问题。 Xftp 首先是通过Xftp传输压缩包到Autodl服务器&#xff1a; 1、打开Xftp&#xff0c;进入软件主界面&#xff0c;点击右上角【文件】菜…

Nacos升级2.2.2 相关版本升级及升级中问题【下篇】

上篇对nacos进行了升级&#xff0c;如果有不清楚的小伙伴可以参考文章&#xff1a;https://blog.csdn.net/weixin_38801572/article/details/130237813 本篇主要是对升级后的鉴权问题进行处理&#xff0c;找了好多的文章都是添加username、password操作&#xff0c;但是实际操作…

8.3 Windows驱动开发:内核遍历文件或目录

在笔者前一篇文章《内核文件读写系列函数》简单的介绍了内核中如何对文件进行基本的读写操作&#xff0c;本章我们将实现内核下遍历文件或目录这一功能&#xff0c;该功能的实现需要依赖于ZwQueryDirectoryFile这个内核API函数来实现&#xff0c;该函数可返回给定文件句柄指定的…

足底筋膜炎症状及治疗方法

足底筋膜炎是一种常见的足部疾病&#xff0c;通常会引起足跟疼痛和不适。这种疼痛通常在早晨起床后或者长时间休息后更为明显&#xff0c;行走一段时间后可能会减轻。下面我们将详细介绍足底筋膜炎的症状及治疗方法。 一、足底筋膜炎的症状 足跟疼痛&#xff1a;这是足底筋膜…

Avalonia 实现简单的IM即时通讯、视频通话(源码,支持国产系统,统信、银河麒麟)

Avalonia 在跨平台上的表现非常出色&#xff0c;对信创国产操作系统&#xff08;像银河麒麟、统信UOS、Deepin等&#xff09;也很不错。现在&#xff0c;我们就来使用 Avalonia 实现一个跨平台的简单IM&#xff0c;除了文字聊天外&#xff0c;还可以语音视频通话。废话不多说&a…

B032-服务器 Tomcat JavaWeb项目 Servlet

目录 服务器服务器的认识 Tomcat服务器Tomcat服务器的介绍Tomcat的安装Tomcat报错的情况Tomcat要启动成功的条件 JavaWeb项目Web的项目结构发布项目的第一种方式发布项目的第二种方式 Eclipse中搭建动态Web项目eclipse安装Tomcat插件servletservlet示例servlet的执行流程servle…

MySql 计算同比、环比

一、理论 国家统计局同比、环比计算公式 增长速度是反映经济社会某一领域发展变化情况的重要数据&#xff0c;而同比和环比是反映增长速度最基础、最核心的数据指标&#xff0c;也是国际上通用的指标。在统计中&#xff0c; 同比和环比通常是同比变化率和环比变化率的简称&…

【bug 回顾】上传图片超时

测试 bug 问题分析 - 上传图片超时 最近在测试上遇到一个莫名奇妙的问题&#xff0c;最后也没有得到具体是哪块的原因&#xff0c;看各位大佬有没有思路&#xff1f;&#xff1f; 一 、背景 现在我们有三台服务器&#xff0c;用来布两套环境。其中另外一台服务器3配置的 tom…

打包项目报错:程序包javax.servlet不存在

背景&#xff1a; WebService项目在没有配置Tomcat的情况下重新打包&#xff0c;由于是直接导入别人写好的项目&#xff0c;没有配置其他环境&#xff0c;所以报错程序包javax.servlet不存在 解决方法&#xff1a; 找到servlet-api.jar包&#xff0c;导入到现有项目的SDK 重…

深圳锐科达SV-X7 sip话机与海康威视摄像头联动设置方法

深圳锐科达SV-X7 sip话机与海康威视摄像头联动设置方法 SIP对讲终端获取设备IP地址方式 通过长按速拨键3秒&#xff08;上电30秒后&#xff0c;即听到提示音后&#xff09;&#xff0c;待喇叭发出急促嘟嘟声&#xff0c;再快速按一下速拨键&#xff0c;设备自动语音播报本机的…

【开源】基于Vue.js的婚恋交友网站

项目编号&#xff1a; S 057 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S057&#xff0c;文末获取源码。} 项目编号&#xff1a;S057&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 会员管理模块2.3 新…