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

网站演示

  1. 登录页面
    在这里插入图片描述
  2. 门户页面
    在这里插入图片描述

搭建过程

  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. ELementnode 下载后,会发现 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] 获取图片网址
[3] 登录页面获取网址

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

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

相关文章

给sprite上增加刷光动效

游戏引擎 —— cocos creator 3.52 此动效给动态修改尺寸的图片增加一层刷光的效果&#xff0c;直接贴代码 CCEffect %{techniques:- passes:- vert: sprite-vs:vertfrag: sprite-fs:fragdepthStencilState:depthTest: falsedepthWrite: falseblendState:targets:- blend: tr…

K8S(一)

一、kubernetes 概述 1、kubernetes 基本介绍 kubernetes&#xff0c;简称 K8s&#xff0c;是用 8 代替 8 个字符“ubernete”而成的缩写。是一个开源的&#xff0c;用于管理云平台中多个主机上的容器化的应用&#xff0c;Kubernetes 的目标是让部署容器化的 应用简单并且高效…

Pytorch中的tensor维度理解

Pytorch中的tensor维度理解 文章目录 Pytorch中的tensor维度理解摘要打消心理恐惧&#xff0c;从三维学起三维tensor参考文献 摘要 面对pytorch编程中的tensor时&#xff0c;我不时会感到恐惧。对里面数据是怎么排布的&#xff0c;一直没有一个直观的理解。今天我想把这个事情…

趣学python编程 (五、常用IDE环境推荐)

Python环境指的是在计算机上安装Python解释器和相关的库&#xff0c;它是运行Python代码所必需的。那么开始Python编程前&#xff0c;准备安装好开发环境是前提。 默认的电脑上只是让人办公使用的&#xff0c;不带python编程开发环境。只有安装python环境&#xff0c;才可以编写…

Mybatis-Plus《学习笔记 22版尚硅谷 》——感谢【尚硅谷】官方文档

Mybatis-Plus《学习笔记 22版尚硅谷 》 一、MyBatis-Plus1.简介2.特性3.支持数据库4.框架结构5.官方地址 二、入门案例1.开发环境2.建库建表3.创建工程4.配置编码5.测试查询 三、增删改查1.BaseMapper<T>2.调用Mapper层实现CRUD2.1 插入2.2 删除a、根据ID删除数据b、根据…

代码随想录算法训练营第四十二天【动态规划part04】 | 01背包、416. 分割等和子集

01背包问题 题目链接&#xff1a; 题目页面 求解思路&#xff1a; 确定dp数组及其下标含义&#xff1a;dp[i][j] 表示从下标为 [0] 到 [i] 的物品里任意选取&#xff0c;放进容量为j的背包&#xff0c;此时的价值总和最大值确定递推公式&#xff1a; 不放物品i&#xff0c;…

crmchat安装搭建教程文档 bug问题调试

一、安装PHP插件&#xff1a;fileinfo、redis、swoole4。 二、删除PHP对应版本中的 proc_open禁用函数。 一、设置网站运行目录public&#xff0c; 二、设置PHP版本选择纯静态。 三、可选项如有需求则开启SSL,配置SSL证书&#xff0c;开启强制https域名。 四、添加反向代理。 …

高效聚合 | AIRIOT智慧虚拟电厂管理解决方案

传统的电力供应模式主要依靠大型发电厂和电网进行能源传输和分配&#xff0c;但这种模式会导致能源浪费、环境污染等问题&#xff0c;往往存在如下的运维问题和管理痛点&#xff1a; 资源整合能力差&#xff1a;传统电力供应模式无法集成和整合分散的电力资源&#xff0c;包括…

用GPT 搭建一个占星术、解梦、塔罗牌占卜和命理学服务

今天来尝试我们的占星术、解梦、塔罗牌占卜和命理学服务&#xff0c;揭开宇宙的奥秘并获得自我认识 聊天 GPT API 集成的 HTML5 模板。我们的目标是提供易于使用且高度可定制的 API 代码&#xff0c;使您能够训练自己的人工智能解决方案并将其添加到提示中。 我们的产品是可定…

Excel中出现“#NAME?”怎么办?(文本原因)

excel 单元格出现 #NAME? 错误的原因有二&#xff1a; 函数公式输入不对导致 #NAME? 错误。 在单元格中字符串的前面加了号&#xff0c;如下图中的--GoJG7sEe6RqgTnlUcitA&#xff0c;本身我们想要的是--GoJG7sEe6RqgTnlUcitA&#xff0c;但因为某些不当的操作在前面加了号&…

XC2303 PFM 升压 DC-DC 变换器 SOT23-3封装 体积小 外围简单 适合小电流产品

XC2303系列产品是一种高效率、低纹波、工作频率高的 PFM 升压 DC-DC 变换器。XC2303系列产品仅需要四个元器,就可完成将低输入的电池电压变换升压到所需的工作电压&#xff0c;非常适合于便携式1~4 节普通电池应用的场合。 电路采用了高性能、低功耗的参考电压电路结构&#xf…

JAVA实现flappy bird游戏

图片素材 实现代码 import javax.imageio.ImageIO; import javax.swing.*; import java.awt.*; import java.awt.event.MouseAdapter; import java.awt.event.MouseEvent; import java.awt.image.BufferedImage; import java.util.Date; import java.text.SimpleDateFormat; i…

微电子专业词汇汇总,芯片人必备!

在芯片行业&#xff0c;很多相关的技术术语都是用英文表述。在这里为大家整理了一些常用的微电子专业词汇&#xff0c;希望对大家有所帮助。&#xff08;文末可领全部文档&#xff09; Abrupt junction 突变结 Accelerated testing 加速实验 Acceptor 受主 Acceptor atom 受主…

某基金公司赵哥“逆袭”了!!!

赵哥&#xff0c;在上海一家基金公司做运维主管。 平时工作的首要任务&#xff0c;就是保障公司各项信息系统的安全运行。 万一系统运行中出现了一些重要问题&#xff0c;他还要负责进行调查、记录与汇报... 总之&#xff0c;责任很重&#xff0c;该说不说&#xff0c;搞不好…

【攻防世界-misc】pure_color

1.方法一&#xff1a;用画图工具打开图片&#xff0c;将图片拷贝至虚拟机win7桌面&#xff0c; 点“属性”&#xff0c;颜色设置为“黑白”&#xff0c; 出现flag值。 2.方法二&#xff1a;使用Stegsilve打开&#xff0c;分析图片 将图片打开&#xff0c;按左右键查找&#xff…

Hive 定义变量 变量赋值 引用变量

Hive 定义变量 变量赋值 引用变量 变量 hive 中变量和属性命名空间 命名空间权限描述hivevar读写用户自定义变量hiveconf读写hive相关配置属性system读写java定义额配置属性env只读shell环境定义的环境变量 语法 Java对这个除env命名空间内容具有可读可写权利&#xff1b; …

高通Camera HAL3: CamX、Chi-CDK要点

目录 一、概述 二、目录 三、CamX组件之前的关系 一、概述 高通CamX架构是高通实现的相机HAL3架构&#xff0c;被各OEM厂商广泛采用。 二、目录 代码位于vendor/qcom/proprietary下&#xff1a; camx&#xff1a;通用功能性接口的代码实现集合chi-cdk&#xff1a;可定制化…

系列六、多线程集合不安全

一、多线程List集合不安全 1.1、List集合不安全案例代码 /*** Author : 一叶浮萍归大海* Date: 2023/11/20 12:38* Description: 多线层环境下List集合不安全案例代码*/ public class NotSafeListMainApp {public static void main(String[] args) {List<String> list …

微信小程序其他环境都能显示在正式环境显示不出来

踩坑日记 用了uni.getImageInfo 用了uni.getImageInfo 本地开发环境&#xff0c;测试环境全都可以&#xff0c;就是更新到正式环境不显示。后面看代码百度了这个api发现图片所涉及的地址需要在小程序配置download域名白名单 https://uniapp.dcloud.net.cn/api/media/image.ht…

用uniapp在微信小程序实现画板(电子签名)功能

目录 一、效果展示 二、插件推荐与引入 三、代码具体应用 四、h5端将base64转换为url 一、效果展示 二、插件推荐与引入 手写板、签字板&#xff1b;<zwp-draw-pad /> - DCloud 插件市场 这个在微信小程序引入时内容简单&#xff0c;且涉及的方法很多&#xff0c;…