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

且.为.乐

已于 2023-12-08 13:45:58 修改

阅读量1.3k

点赞数 2

分类专栏： # CSS 文章标签：前端 html css

于 2023-11-21 17:10:42 首次发布

本文链接：https://blog.csdn.net/jun_7777/article/details/134536288

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

网站演示

登录页面
门户页面
博客页面

搭建过程

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

环境配置与搭建

安装指令

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>

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>