注:本项目根据全栈之巅bilibili学习写的
学习链接https://www.bilibili.com/video/av51931842?from=search&seid=15580414938022308661
一web端首页页面
二,新闻资讯详情页面
三,admin后台管理界面
四,项目目录
admin目录
view目录
web目录
serve目录
一,web端创建
首先创建vue.app中的内容
<template>
<div id="app">
<router-view/>
</div>
</template>
<style>
</style>
其次使用main.vue写入顶部
<template>
<div>
<div class="topbar bg-block py-2 px-3 d-flex ai-center text-white ">
<img src="../assets/images/logo.png" height="30">
<div class="px-2 flex-1">
<div class="text-white">王者荣耀</div>
<div class="text-grey fs-xs">团队成就更多</div>
</div>
<button type="button" class="btn bg-primary">立即下载</button>
</div>
<div class="bg-primary py-2">
<div class=" nav-inverse jc-around pb-1">
<div class="nav-item active">
<!--active高亮-->
<router-link class="nav-link" tag="div" to="/">首页</router-link>
</div>
<div class="nav-item">
<router-link class="nav-link" tag="div" to="/">攻略中心</router-link>
</div>
<div class="nav-item">
<router-link class="nav-link" tag="div" to="/">赛事中心</router-link>
</div>
</div>
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
.topbar{
position:sticky;//吸顶的效果
top:0;
z-index:999;
}
</style>
使用Home,vue导入首页
<template>
<div>
<swiper>
<swiper-slide><img class="w-100 h-50" src="../assets/images/1.png" alt=""></swiper-slide>
<swiper-slide><img class="w-100 h-50" src="../assets/images/2.png" alt=""></swiper-slide>
<swiper-slide><img class="w-100 h-50" src="../assets/images/3.png" alt=""></swiper-slide>
<swiper-slide><img class="w-100 h-50" src="../assets/images/4.png" alt=""> </swiper-slide>
<div class="swiper-pagination pagination-home text-right px-3 " alot="pagination"></div>
</swiper>
<!--end of swiper-->
<!--
<div class="nav-icons bg-white mt-2 d-flex flex-wrap text-center pt-3">
<div class="nav-item mb-3" :key=n>
<div class="sprite">
<div class="sprite-news">
<img src="../assets/images/menu1.png" alt="">
</div>
<div>爆料站</div>
</div>
<div class="sprite-stores">
<img src="../assets/images/menu6.png" alt="">
</div>
<div>故事站</div>
</div>
</div>
</div>0-->
<div>
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-100">
<router-link to="">
<img src="../assets/images/menu1.png" alt="">
<div class="mui-media-body">新闻资讯</div></router-link></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-100">
<router-link to="">
<img src="../assets/images/menu1.png" alt="">
<div class="mui-media-body">图片分享</div></router-link></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-100">
<router-link to=""> <img src="../assets/images/menu6.png" alt="">
<div class="mui-media-body">商品购买</div></router-link></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-100">
<a> <img src="../assets/images/menu1.png" alt="">
<div class="mui-media-body">留言反馈</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-100">
<a> <img src="../assets/images/menu1.png" alt="">
<div class="mui-media-body">视频专区</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-100">
<a> <img src="../assets/images/menu6.png" alt="">
<div class="mui-media-body">联系我们</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-100">
<router-link to="">
<img src="../assets/images/menu1.png" alt="">
<div class="mui-media-body">新闻资讯</div></router-link></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-100">
<router-link to="">
<img src="../assets/images/menu1.png" alt="">
<div class="mui-media-body">图片分享</div></router-link></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-100">
<router-link to=""> <img src="../assets/images/menu6.png" alt="">
<div class="mui-media-body">商品购买</div></router-link></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-100">
<a> <img src="../assets/images/menu1.png" alt="">
<div class="mui-media-body">留言反馈</div></a></li>
</ul>
<!--<div class="nav-icons