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

网站演示

在这里插入图片描述

搭建过程

  1. 技术选取:HTML/CSS + VUE2 + ElementUI(Version - 2.15.14)
  2. 编程软件:VSCode

环境配置与搭建

  1. 安装指令
1. 先确保你的电脑已经安装好了`npm和node`
npm -vnode -v2. ElementUI下载,推荐使用 npm 的方式安装
npm i element-ui -S3. 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. ELement在node下载后,会发现node_modules/element-ui文件夹,直接复制到本地,之后按照文件路径引用并配置
<head><meta charset="UTF-8"><link rel="stylesheet" href="{{URL::asset('elementui/lib/theme-chalk/index.css')}}"><link rel="stylesheet" href="{{URL::asset('css/common.css')}}"><link rel="stylesheet" href="{{URL::asset('css/layout/head.css')}}"><link rel="stylesheet" href="{{URL::asset('css/home/home.css')}}"><script src="https://unpkg.com/vue@2/dist/vue.js"></script><script type="text/javascript" src="{{URL::asset('elementui/lib/index.js')}}"></script>
</head>

参考文档

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

根据list集合进行分页

/*** param pageInfo* param caseInfoList*/ public static Map<String, Object> resultPageList(PageInfo pageInfo, List<?> caseInfoList) {Map<String, Object> resultMap new HashMap<>();int pageSize 0;int count 0;//刚开始的页面为第一页pa…

C语言入门——第十七课

一、二分查询 1.概念 二分查询又被称为二分查找&#xff0c;是一种在有序数组或序列中快速查找到对应元素的一种方法。每次查找范围缩小至原来的一半。 ①前提条件 数组和列表必须有序&#xff0c;否则无法进行二分查找。 ②初始化 确定查找数组和列表的左边界&#xff0…

C盘变红怎么办?一个快速解决C盘快满的方法

前情提要 通常解决C盘快满的方法是&#xff1a; 找到C盘—右击选择“属性”—选择“详细信息”—卸载不常用的软件或者清除临时文件 缺点&#xff1a;成效甚微 今日重点 1.背景知识&#xff1a;微信是我们日常工作和生活都离不开的工具&#xff0c;我们每天使用微信会产生大量…

java网络编程Socket output is already shutdown

在java的网络编程中使用TCP协议在Client端和Server端循环收发消息时&#xff0c;如果用的是BufferedReader和BufferedWriter&#xff0c;出现Client端只能发送一次消息&#xff0c;当发送第二次消息时&#xff0c;Server端已经关闭的情况&#xff0c;具体报错为&#xff1a;Soc…

C 语言共用体(Union)

C 语言共用体(Union) 在本教程中&#xff0c;您将学习C语言编程中的共用体。更具体地说&#xff0c;如何创建共用体&#xff08;联合体&#xff09;&#xff0c;访问其成员以及了解共用体与组织之间的差异。共用体又被称为联合体, 和结构体同属于C语言数据类型中的结构类型。 …

Mendix与Java组件的完美结合实践

前言 在技术驱动的今天&#xff0c;应用开发的速度和质量已经成为企业竞争力的决定性因素。Mendix&#xff0c;作为一款领先的低代码开发平台&#xff0c;已经为全球数千家企业提供了快速、高效的开发解决方案。但在某些情况下&#xff0c;企业的特定需求可能超出了Mendix的标…

sqli-labs(3)

11. 看到登录框直接or 11 在hackerabar中我们可以看到这里是post传递的数据&#xff0c;在get中用--来注释后面的内容 因为get中#是用来指导浏览器动作的&#xff0c;--代表注释是空格&#xff0c;所以这里用# 之后就和get的一样了 1 order by 2 # order by 3报错 联合注入 …

21款奔驰GLS450升级23P驾驶辅助 提升安全出行

辅助驾驶越来越多的被大家所青睐&#xff01;为了提升驾驶安全性和舒适便捷性奔驰改装原厂半自动驾驶23P辅助系统 23P智能辅助驾驶系统还是很有必要的&#xff0c;因为在跑高速的时候可以使用23P智能驾驶的自动保持车速&#xff0c;保持车距&#xff0c;车道自动居中行驶以及自…

CRM商机管理软件:构建客户为中心的管理理念

企业为什么选择CRM商机管理软件&#xff1f;1.CRM软件能够帮助企业建立以客户为中心的管理理念&#xff1b;2.CRM商机管理软件全面直观的展示客户数据&#xff1b;3.市场人员可以制订个性化的营销策略&#xff1b;4.移动应用为外出的销售带来的便利。 1.构建客户为中心的管理理…

C++实现KNN和K-Means

学校机器学习课程的实验课要求实现KNN和K-Means&#xff1a; &#xff08;平时没听课&#xff09;临时去查了一下KNN和K-Means是啥&#xff0c;然后自己用C写了小例子&#xff0c;想着写都写了那就把代码贴出来吧。 顺便再聊聊自己对于这俩算法的理解。 下面是文心一言的回答…

十年诉讼,迈瑞真的赢了吗?

迁延十年&#xff0c;迈瑞与科曼的知识产权纠纷案究竟要如何解读&#xff1f; 发端于2013年&#xff0c;两家国内医疗器械行业知名公司间的专利互诉官司&#xff0c;成为全行业最具代表性的案例。但这一案例本质并不复杂&#xff1a;不过商业利益之争。 要在烈度不断抬升的市…

项目管理PMP6.0-五大过程组、十大知识领域、四十九个过程(记忆码:7664363734)

项目管理PMP6.0-五大过程组、十大知识领域、四十九个过程&#xff08;记忆码&#xff1a;7664363734&#xff09; 项目经理的影响力范围三者关系图&#xff08;五大过程组、十大知识领域、四十九个过程&#xff09;五大过程组十大知识领域十大知识领域之间联系 四十九个过程&am…

如何通过提升客户体验带来更大的增长、更好的客户留存率?

客户期望的转变 在一个日益数字化的世界里&#xff0c;有必要采取以客户为中心的思维方式。因为客户与企业互动的方式有很多是在数字空间发生的&#xff0c;客户的需求和模式已经转变。 这种情况已经酝酿了几年&#xff0c;但在2020年才打开闸门。随着疫情的爆发&#xff0c;企…

FTX的前世今生:崛起、辉煌与崩塌

FTX&#xff0c;一度被誉为加密货币领域的明星交易所&#xff0c;其快速的崛起和令人瞩目的崩塌吸引了全球的关注。让我们回顾一下FTX的前世今生&#xff0c;了解其短暂的辉煌和骤然的崩塌。 1. 崛起&#xff1a; FTX的创始人山姆班克曼-弗里德在加密货币领域具有深厚的背景和…

Linux主机间的相互免秘钥

主机间的相互免秘钥 1.生成密钥 ssh-keygen -t rsa -P -f ~/.ssh/id_rsa运行以上命令后会在 ~/.ssh/ 目录下生成一对密钥对。 2.拷贝公钥 把自己的公钥传递给对方主机即可&#xff0c;这个公钥文件必须放在对方主机的~/.ssh/authorized_keys 文件中。 ssh-copy-id -i ~/.s…

智能座舱架构与芯片 - (2) 架构篇

一、定义 1.1 智能座舱定义 按照百度百科的定义&#xff0c;智能座舱&#xff08;intelligent cabin&#xff09;旨在集成多种IT和人工智能技术&#xff0c;打造全新的车内一体化数字平台&#xff0c;为驾驶员提供智能体验&#xff0c;促进行车安全。目前国内外已经有很多研究…

Django ORM 执行复杂查询的技术与实践

概要 Django ORM&#xff08;Object-Relational Mapping&#xff09;是 Django 框架的核心组件之一&#xff0c;提供了一种高效、直观的方式来处理数据库操作。尽管简单查询在 Django ORM 中相对容易实现&#xff0c;但在面对复杂的数据请求时&#xff0c;需要更深入的了解和技…

SSM应用程序启动流程

在一个基于SSM&#xff08;Spring Spring MVC MyBatis&#xff09;框架的Web应用程序中&#xff0c;启动过程涉及到Spring的IOC容器和MVC容器的初始化。 IOC容器初始化&#xff1a; Spring的IOC容器主要负责管理和装配应用程序中的各个Bean。在SSM框架中&#xff0c;IOC容器的…

【文末送书】深入浅出嵌入式虚拟机原理

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术。关…

「Verilog学习笔记」含有无关项的序列检测

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 timescale 1ns/1ns module sequence_detect(input clk,input rst_n,input a,output reg match);reg [8:0] a_tem ; always (posedge clk or negedge rst_n) begin if (~rs…