0


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

网站演示

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

搭建过程

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

环境配置与搭建

  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. ELementnode 下载后,会发现 node_modules/element-ui 文件夹,直接复制到本地,之后按照文件路径引用并配置
<head><metacharset="UTF-8"><linkrel="stylesheet"href="{{URL::asset('elementui/lib/theme-chalk/index.css')}}"><linkrel="stylesheet"href="{{URL::asset('css/common.css')}}"><linkrel="stylesheet"href="{{URL::asset('css/layout/head.css')}}"><linkrel="stylesheet"href="{{URL::asset('css/home/home.css')}}"><scriptsrc="https://unpkg.com/vue@2/dist/vue.js"></script><scripttype="text/javascript"src="{{URL::asset('elementui/lib/index.js')}}"></script></head>

参考文档

[1]ElementUI - 2.15.14官网
[2] 获取图片网址
[3] 登录页面获取网址

标签: 前端 html css

本文转载自: https://blog.csdn.net/JUN_7777/article/details/134536288
版权归原作者 且.为.乐 所有, 如有侵权,请联系我们删除。

“HTML+CSS+ElementUI搭建个人博客静态页面展示(纯前端)”的评论:

还没有评论