vue+node.js+moogodb仿王者荣耀移动端项目一

注：本项目根据全栈之巅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