Vue3+vite个人博客网站从0-1(element-plus组件库引入+首页样式布局)
接着上一节,这一章主要是将element-plus组件库引入到项目中,然后将咱们之前漏掉的css预处理器给安装上来,然后讲首页基本显示出来,如果没有从第一章开始的小伙伴可以先从第一章开始看
接着上一节,这一章主要是将element-plus组件库引入到项目中,然后将咱们之前漏掉的css预处理器给安装上来,然后讲首页基本显示出来,如果没有从第一章开始的小伙伴可以先从第一章开始看 Vue3+vite个人博客网站从0-1(项目环境搭建)
安装element-plus
NPM
npm install element-plus --saveYarn
yarn add element-plus
安装完成之后我们这边使用的是一个全局引入 在main.js中引入
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
// 引入 router
import router from './router/index'
// 引入 store
import store from './store/index'
// 引入element-plus
import ElementPlus from 'element-plus'
import '../node_modules/element-plus/theme-chalk/index.css'
createApp(App).use(router).use(store).use(ElementPlus).mount('#app')
安装之后尝试在咱们的项目中运行看是否可以运行在home.js中运行
<template>
<div class="block">
<span class="demonstration"
>Child options expand when clicked (default)</span
>
<el-cascader
v-model="value"
:options="options"
@change="handleChange"
></el-cascader>
</div>
<div class="block">
<span class="demonstration">Child options expand when hovered</span>
<el-cascader
v-model="value"
:options="options"
:props="props"
@change="handleChange"
></el-cascader>
</div>
</template><script lang="ts" setup>
import { ref } from 'vue'const value = ref([])
const props = {
expandTrigger: 'hover',
}const handleChange = (value) => {
console.log(value)
}const options = [
{
value: 'guide',
label: 'Guide',
children: [
{
value: 'disciplines',
label: 'Disciplines',
children: [
{
value: 'consistency',
label: 'Consistency',
},
{
value: 'controllability',
label: 'Controllability',
},
],
},
{
value: 'navigation',
label: 'Navigation',
children: [
{
value: 'side nav',
label: 'Side Navigation',
},
{
value: 'top nav',
label: 'Top Navigation',
},
],
},
],
},
{
value: 'component',
label: 'Component',
children: [
{
value: 'basic',
label: 'Basic',
children: [
{
value: 'layout',
label: 'Layout',
},
{
value: 'button',
label: 'Button',
},
],
},
{
value: 'form',
label: 'Form',
children: [
{
value: 'radio',
label: 'Radio',
},
{
value: 'select',
label: 'Select',
},
{
value: 'cascader',
label: 'Cascader',
},
{
value: 'switch',
label: 'Switch',
},
{
value: 'slider',
label: 'Slider',
},
{
value: 'time-picker',
label: 'TimePicker',
},
{
value: 'date-picker',
label: 'DatePicker',
},
{
value: 'form',
label: 'Form',
},
],
},
{
value: 'data',
label: 'Data',
children: [
{
value: 'table',
label: 'Table',
},
{
value: 'badge',
label: 'Badge',
},
],
},
{
value: 'notice',
label: 'Notice',
children: [
{
value: 'alert',
label: 'Alert',
},
{
value: 'notification',
label: 'Notification',
},
],
},
{
value: 'navigation',
label: 'Navigation',
children: [
{
value: 'menu',
label: 'Menu',
}
},
],
},
{
value: 'others',
label: 'Others',
children: [
{
value: 'dialog',
label: 'Dialog',
}
],
},
],
},
{
value: 'resource',
label: 'Resource',
children: [
{
value: 'axure',
label: 'Axure Components',
},
{
value: 'sketch',
label: 'Sketch Templates',
},
{
value: 'docs',
label: 'Design Documentation',
},
],
},
]
</script><style lang="scss" scoped>
.block {
margin: 1rem;
}
.demonstration {
margin: 1rem;
}
</style>
会发现报错
没有安装css预处理器
咱们这边项目使用less
在安装less之前如果没有安装淘宝镜像的记得先安装淘宝镜像
我们可运行先下面这条命令来查看,yarn的下载依赖包的仓库地址是否已经安装淘宝镜像
yarn config get registry
如果已经安装了可以忽略下面几个步骤
如果没有安装就需要安装一下淘宝镜像
yarn config set registry https://registry.npm.taobao.org -g
或
npm config set registry https://registry.npm.taobao.org
然后安装好之后就可以直接安装less
安装一下less
在vite中不再需要安装less-loader,只需要安装less就好了(血的教训)
npm i less -D
到这里安装less之后不要忙着运行项目 先把sass改成我们的less在运行项目
<template>
<div class="block">
<span class="demonstration"
>Child options expand when clicked (default)</span
>
<el-cascader
v-model="value"
:options="options"
@change="handleChange"
></el-cascader>
</div>
<div class="block">
<span class="demonstration">Child options expand when hovered</span>
<el-cascader
v-model="value"
:options="options"
:props="props"
@change="handleChange"
></el-cascader>
</div>
</template><script lang="ts" setup>
import { ref } from 'vue'const value = ref([])
const props = {
expandTrigger: 'hover',
}const handleChange = (value) => {
console.log(value)
}const options = [
{
value: 'guide',
label: 'Guide',
children: [
{
value: 'disciplines',
label: 'Disciplines',
children: [
{
value: 'consistency',
label: 'Consistency',
},
{
value: 'controllability',
label: 'Controllability',
},
],
},
{
value: 'navigation',
label: 'Navigation',
children: [
{
value: 'side nav',
label: 'Side Navigation',
},
{
value: 'top nav',
label: 'Top Navigation',
},
],
},
],
},
{
value: 'component',
label: 'Component',
children: [
{
value: 'basic',
label: 'Basic',
children: [
{
value: 'layout',
label: 'Layout',
},
{
value: 'button',
label: 'Button',
},
],
},
{
value: 'form',
label: 'Form',
children: [
{
value: 'radio',
label: 'Radio',
},
{
value: 'select',
label: 'Select',
},
{
value: 'cascader',
label: 'Cascader',
},
{
value: 'switch',
label: 'Switch',
},
{
value: 'slider',
label: 'Slider',
},
{
value: 'time-picker',
label: 'TimePicker',
},
{
value: 'date-picker',
label: 'DatePicker',
},
{
value: 'form',
label: 'Form',
},
],
},
{
value: 'data',
label: 'Data',
children: [
{
value: 'table',
label: 'Table',
},
{
value: 'badge',
label: 'Badge',
},
],
},
{
value: 'notice',
label: 'Notice',
children: [
{
value: 'alert',
label: 'Alert',
},
{
value: 'notification',
label: 'Notification',
},
],
},
{
value: 'navigation',
label: 'Navigation',
children: [
{
value: 'menu',
label: 'Menu',
}
},
],
},
{
value: 'others',
label: 'Others',
children: [
{
value: 'dialog',
label: 'Dialog',
}
],
},
],
},
{
value: 'resource',
label: 'Resource',
children: [
{
value: 'axure',
label: 'Axure Components',
},
{
value: 'sketch',
label: 'Sketch Templates',
},
{
value: 'docs',
label: 'Design Documentation',
},
],
},
]
</script><style lang="less" scoped>
.block {
margin: 1rem;
}
.demonstration {
margin: 1rem;
}
</style>
如果到这里页面上显示出来就说明引入成功了
到这里咱们的element-puls和咱们的css预处理器就已经安装完成了
接下里就可以吧咱们的首页的静态页面完成。
创建公共头部
src/components/layout/nav-bar.vue
<template>
<!--导航-->
<div>
<div class="animate__animated animate__fadeIn title" :style="{'background-image': bgUrl}"></div>
<el-header class="animate__animated animate__fadeIn">
<h2 class="animate__animated animate__swing logo" >haihai</h2>
<div class="menu-expend">
<i class="el-icon-menu"></i>
</div>
<div class="search_input">
<el-input
class="search"
placeholder="请输入内容"
prefix-icon="el-icon-search">
</el-input>
</div>
</el-header>
</div>
</template>
<script>
export default {
data () {
return {
bgUrl:'url(http://img.haihaina.cn/Shinichi6.jpeg)'
}
}
}
</script>
<style>
.search input.el-input__inner {
background-color: rgba(0, 0, 0, 0.1);
/*border-radius: 20px;*/
color: #cccccc;
}
</style>
<style scoped lang="less">
.title {
position: fixed;
top: 0;
width: 100%;
height: 120vh;
background-repeat: no-repeat;
background-size: cover;
border-bottom: 3px solid #fff;
}
.el-header {
transition: .2s;
}
.el-header:hover {
opacity: 1 !important;
}
.el-menu {
background-color: rgba(0, 0, 0, 0) !important;
}
.el-menu /deep/ .el-menu-item{
background-color: rgba(0, 0, 0, 0) !important;
}
.el-menu /deep/ .el-menu-item i {
color: rgba(255, 255, 255);
}
.el-menu /deep/ .el-menu-item:hover i {
color: white;
}
.el-menu /deep/ .el-menu-item:hover {
background-color: rgba(0, 0, 0, 0.5) !important;
}
.search_input {
position: relative;
box-sizing: border-box;
}
.search_input ul {
position: absolute;
top: 30px;
width: 100%;
border: 1px solid #e5e9ef;
margin-top: 1px;
background: #fff;
z-index: 10000;
border-radius: 2px;
box-shadow: 0 2px 4px rgba(58, 118, 142, 0.16);
padding: 10px 0;
font-size: 14px;
box-sizing: border-box;
}
.search_input ul li {
padding: 0 16px;
height: 32px;
line-height: 32px;
cursor: pointer;
word-wrap: break-word;
word-break: break-all;
display: block;
color: #222;
position: relative;
/*transition: .2 ease;*/
}
.search_input ul li:hover {
background-color: #e8f3ff;
}
.search-blog {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
padding-left: 20px;
padding-right: 20px;
}
.el-header {
width: 100%;
position: sticky;
top: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.2);
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 20px;
> div {
display: flex;
align-items: center;
}
img {
height: 40px;
}
span {
margin-left: 15px;
}
button {
opacity: 0.8;
}
.el-menu {
flex-shrink: 0;
}
.logo {
color: #ffd04b;
}
.logo:hover {
cursor: pointer;
}
}
.loginInfo {
flex-shrink: 0;
/*background-color: #545c64;*/
color: white;
height: 60px;
border: none;
width: 160px;
position: relative;
.el-avatar {
width: 36px;
height: 36px;
margin: 0 auto;
z-index: 200;
}
.user-option {
position: absolute;
top: 60px;
width: 150px;
left: 50%;
transform: translate(-50%, 0);
font-size: 14px;
text-align: center;
line-height: 30px;
background-color: #fff;
visibility: hidden;
opacity: 0;
color: #333;
box-shadow: 0 2px 6px 0 rgb(0 0 0 / 10%);
border: 1px solid #eee;
border-radius: 5px;
}
.logout {
margin: 10px auto;
padding: 0;
width: 100%;
}
.logout:hover {
background-color: #eee;
}
}
.loginInfo:hover {
cursor: pointer;
.el-avatar {
transform: translate(0, 50%) scale(1.5);
transition: .3s;
}
.user-option {
visibility: visible;
opacity: 1;
transition: opacity .4s;
}
}
.zZindex {
margin-top: 300px;
padding-top: 100px;
}
.menu-expend {
display: none !important;
}
.el-menu-hidden {
/*display: none;*/
position: absolute;
top: 60px;
left: 0;
border-top: 1px solid #ccc;
border-right: none;
width: 100%;
.el-menu-item {
border-bottom: 1px solid #ccc;
}
}
@media screen and (max-width: 1000px) {
.search_input {
visibility: hidden;
}
}
@media screen and (max-width: 768px) {
.el-menu /deep/ .el-menu-item{
background-color: rgba(0, 0, 0, 0.3) !important;
}
.el-menu-demo {
display: none;
}
.title {
width: 100%;
background-position-x: center;
}
.menu-expend {
display: block !important;
position: fixed;
top: 18px;
left: 150px;
}
.menu-expend:hover {
color: #ffd04b;
cursor: pointer;
}
.title {
background-position-y: 0;
}
}
</style>
首页
/src/view/home.vue
<template>
<div>
<navbar></navbar>
<el-row style="height: 95vh">
<el-col :span="24" style="height: 100%">
<el-card shadow="none" class="welcome">
<h1 class="tit">
欢迎来到海海的小窝
<div class="border"></div>
</h1>
<h2 class="intro">{{intro}}</h2>
<!-- 进入主页 -->
<div class="bounce down" @click="startRead">
<i class="el-icon-arrow-down" style="color: white"></i>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import navbar from '../components/layout/nav-bar.vue'
export default {
components: {
navbar
},
setup(){
let intro = '欢迎来到海海的小窝、这里会分享关于编程,开发以及其他方面的一些内容,希望可以对您有所帮助...';
// 开始进入主页
const startRead = ()=>{
console.log('进入主页')
}
return {startRead,intro}
},
}
</script>
<style scoped lang="less">
body {
width: 100%;
}
.welcome {
background-color: rgba(0, 0, 0, 0.1);
border: none;
height: 90%;
position: relative;
.border {
width: 812px;
height: 112px;
position: absolute;
top: -6px;
left: -6px;
border: 3px solid white;
box-sizing: border-box;
animation: clipMe 5s linear infinite;
}
.tit {
box-sizing: border-box;
position: relative;
width: 800px;
height: 100px;
line-height: 100px;
box-shadow: inset 0 0 0 1px white;
margin: 40px auto;
margin-top: 80px;
color: white;
text-align: center;
font-size: 50px;
font-weight: normal;
letter-spacing: 10px;
}
.intro {
letter-spacing: 5px;
line-height: 50px;
width: 80%;
margin: 0 auto;
text-align: center;
font-weight: normal;
color: white;
}
.down {
animation: bounce 2s infinite;
animation-duration: 3s;
font-size: 25px;
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid #fff;
}
.down:hover {
animation: none;
cursor: pointer;
box-shadow: 0 0 20px 0 white;
transition: all .2s;
}
}
@keyframes clipMe {
0%,
100% {
clip: rect(0px, 806px, 6px, 0px);
}
25% {
clip: rect(0px, 6px, 112px, 0px);
}
50% {
clip: rect(112px, 812px, 112px, 0px);
}
75% {
clip: rect(0px, 812px, 112px, 806px);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translate(-50%, 0);
}
40% {
transform: translate(-50%, -30px);
}
60% {
transform: translate(-50%, -15px);
}
}
ul {
padding-left: 10px;
padding-right: 10px;
margin-bottom: 0;
border-radius: 5px;
}
.el-pagination {
padding-bottom: 20px;
}
.el-card /deep/ .el-card__body {
padding: 0;
}
.right-item {
margin-bottom: 20px;
li:first-child {
border-top: 1px solid rgba(179, 216, 255, 0.5);
}
li {
border-bottom: 1px solid rgba(179, 216, 255, 0.5);
}
.more {
text-align: center;
color: #3a8ee6;
padding: 8px;
}
.more:hover {
cursor: pointer;
color: #3a8ee6;
}
.blog-type:hover, .activeType {
background-color: rgba(58, 142, 230, 0.3);
cursor: pointer;
}
.tags {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 15px 13px 0;
border-bottom: 1px solid rgba(179, 216, 255, 0.5);
}
.tag-item {
display: flex;
justify-content: space-around;
align-items: center;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
box-sizing: border-box;
.tag {
background-color: #ecf5ff;
box-sizing: border-box;
display: inline-block;
height: 22px;
padding: 0 10px;
line-height: 22px;
font-size: 10px;
color: #409eff;
border-radius: 4px;
white-space: nowrap;
border: 1px solid #409eff;
transition: .2s;
}
.sjx-outer {
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid #409eff;
position: relative;
transition: .2s;
}
.sjx-inner {
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid #ecf5ff;
top: -6px;
left: 1px;
position: absolute;
transition: .2s;
}
}
.tag-item:hover, .activeTag {
box-sizing: border-box;
.tag {
color: white;
background-color: #409eff;
cursor: pointer;
}
.sjx-inner {
border-right: 6px solid #409eff;
}
}
}
.blog-type {
display: flex;
justify-content: space-between;
align-items: center;
line-height: 40px;
}
.recommend-blog {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
padding-left: 20px;
padding-right: 20px;
a {
border-bottom: 1px solid rgba(34, 36, 38, .15);
line-height: 40px;
display: block;
text-decoration: none;
color: black;
}
a:hover {
color: #3a8ee6;
}
}
.total {
display: flex;
justify-content: space-between;
align-items: center;
font-size: larger;
font-weight: bold;
.title {
display: flex;
align-items: center;
.el-icon-back {
font-weight: bolder;
color: #3a8ee6;
margin-right: 10px;
}
.el-icon-back:hover {
cursor: pointer;
}
}
}
.blog-content:hover {
/*border-left: 5px solid #3a8ee6;*/
/*border-right: 5px solid #3a8ee6;*/
background-color: rgba(58, 142, 230, 0.3);
cursor: pointer;
.el-tag {
color: white;
background-color: #3a8ee6;
}
}
.blog-content {
padding: 10px;
height: auto;
border-bottom: 1px solid rgb(199, 163, 92);
/*border-bottom: 1px solid rgba(34, 36, 38, .15);*/
transition: .3s;
.el-image {
border-radius: 5px;
box-sizing: border-box;
flex-shrink: 0;
}
.blog-info {
display: flex;
align-items: center;
color: rgba(0, 0, 0, .4);
font-size: 10px;
.user-info {
display: flex;
justify-content: space-around;
align-items: center;
margin-right: 15px;
.el-avatar {
margin-right: 5px;
width: 22px;
height: 22px;
}
.header {
text-decoration: none;
color: #3a8ee6;
font-weight: bold;
}
}
.blog-date {
margin-right: 15px;
}
.blog-type {
margin-left: auto;
}
}
}
.description {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
font: 300 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
}
@media screen and (max-width: 768px) {
.blog-date {
display: none;
}
.welcome {
width: 100%;
.border {
display: none;
}
.tit {
font-size: 2rem;
width: 100%;
line-height: 50px;
letter-spacing: 2px;
height: auto;
}
.intro {
font-size: 1rem;
line-height: 30px;
}
}
.el-pagination {
width: 100%;
}
}
</style>
运行打开之后大概是这样
本期的内容大概就是这样了,后续会接着更新。
最后送上克隆地址 blog: 个人博客代码参考
如果你还有什么问题你可以选择↓↓↓
微信公众号搜索 海海学前端 来了解更多
更多推荐
所有评论(0)