在这里就不赘述创建vue3
项目的过程了。
npm install element-plus --save
//或者使用 yarn
yarn add element-plus
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
改动后的部分代码
<el-skeleton style="width: 100%" :loading="loading" animated :count="10">
<template #template>
<el-row>
<el-col :span="6">
<el-skeleton-item
variant="image"
style="width: 200px; height: 150px; border-radius: 5px"
/>
</el-col>
<el-col :span="18">
<el-row>
<el-col>
<el-skeleton-item variant="h3" />
</el-col>
</el-row>
<el-row>
<el-col>
<el-skeleton-item variant="p" />
</el-col>
<el-col>
<el-skeleton-item variant="p" />
</el-col>
<el-col>
<el-skeleton-item variant="p" style="width: 65%" />
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="2">
<el-skeleton-item
variant="circle"
style="width: 35px; height: 35px"
/>
</el-col>
<el-col :span="2" style="margin-top: 10px">
<el-skeleton-item variant="text" />
</el-col>
<el-col :span="3" style="margin-top: 10px">
<el-skeleton-item variant="text" />
</el-col>
<el-col :span="2" style="margin-top: 10px">
<el-skeleton-item variant="text" />
</el-col>
<el-col :span="2" style="margin-top: 10px">
<el-skeleton-item variant="text" />
</el-col>
</el-row>
</el-col>
</el-row>
</template>
<template #default>
<article class="post-list contt blockimg" >
<div class="entry-container">
<span class="laid_title_l"></span>
<div class="block-image feaimg">
<a
class="block-fea scrollLoading"
href="https://qiucode.cn/article/168"
title="听说了吗,秋码记录首页加入了骨架屏"
>
<i class="mask"></i
><span class="vodlist_top"
><em class="voddate voddate_year">前端</em></span
></a
>
<div class="entyr-icon ico-p">
<i class="icon iconfont icon-tupian"></i>
</div>
</div>
<header class="entry-header">
<span class="entry-title">
<span v-if="item.isFree==1" class="badge no-free">付费</span>
<span class="badge yuanchuang" >原创</span>
<a :href="'/article/'+item.id">听说了吗,秋码记录首页加入了骨架屏</a>
</span>
</header>
<div class="entry-summary ss">
<p>
秋码记录首页加入了Element-plus的骨架屏,以增加用户体验度,在访问站点也不再那么缓慢了,虽说之前也还是很快的,之少不至于太慢。
</p>
</div>
<div class="entry-meta">
<a href="javacript:;">
<img
class="lazyload"
src="/static/front/images/headimg/shangguanjiangbei.png"
srcset="/static/front/images/headimg/shangguanjiangbei.png"
height="25"
width="25"
/>上官江北
</a>
<span class="separator">/</span>
<a href="javascript:;">qiucode.cn,秋码记录</a>
<span class="separator">/</span>
<time :datetime="item.createAt" v-text="timeFormatFilter(item.createAt,'0')"></time>
<span class="separator">/</span>168 阅读
</div>
</div>
</article>
</template>
</el-skeleton>