【VUE】vue网站设计-----vue官网设计_vue网页设计案例代码

1、引言

 

设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决

2、作品介绍

鱼粉官网系统采用vue技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。

2.1、作品简介方面 

鱼粉官网系统采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选

2.2、作品二次开发工具

此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）。

2.3、作品技术介绍

html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。 使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计

vue作品技术方面：使用vue技术开发的网站，涉及常见的vue指令，如v-for，v-if，v-show，v-html等的使用，包含watch，计算属性等常见功能的开发，以及组件的使用，使用vue相关全家桶的使用，运用了v-router来作为路由，完全符合常见的网站开发技术。同时也会使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。

3、作品演示

3.1、首页

相关代码：

<template>
<div> 
<a-banner :listImg="listImg"></a-banner>
  <div class="join_type">
    <ul  class="lu">
      <li>
        <img src="../assets/hello1.png" alt="">
      </li>
      <li>
        <img src="../assets/hello3.png" alt="">
      </li>
       <li>
        <img src="../assets/hello2.png" alt="">
      </li>
       <li>
        <img src="../assets/hello4.png" alt="">
      </li>
    </ul>
  </div>
  <!-- 加盟流程 -->
  <div class="join_liucheng">
    <div class="join_title">
        <img id="imgLogo" src="../assets/home_logo.png" alt="">
        <h2>加盟流程 15步完美搞定</h2>
    <small>禾谷官网</small>
    <p>禾谷官网商贸有限公司建设的，面向全国打造的一个餐饮品牌。想知道禾谷官网怎么加盟？禾谷官网加盟、禾谷官网加盟费、禾谷官网怎么加盟，就来此栏目。</p>
    </div>
     <img src="../assets/home_flow.jpg" alt="">
  </div>
  <!-- 产品列表 -->
  <div class="product_table">
    <div class="container">
      <p-banner v-bind:produceImg="produceImg"></p-banner>
    </div>
  </div>
  <!-- 客户信息 -->
   <div class="Customer">
    <div class="container">
      <c-banner></c-banner>  
    </div>
  </div>
</div>
</template>
<script>
import Banner from "./template/Banner.vue";
import banner1 from "@/assets/banner1.png";
import banner2 from "@/assets/banner2.png";
import banner3 from "@/assets/banner3.png";
import banner4 from "@/assets/banner4.png";
import banner5 from "@/assets/banner5.png";
import product1 from "@/assets/product/product1.jpg";
import product2 from "@/assets/product/product2.jpg";
import product3 from "@/assets/product/product3.jpg";
import product4 from "@/assets/product/product4.jpg";
import product5 from "@/assets/product/product5.jpg";
import product6 from "@/assets/product/product6.jpg";
import product7 from "@/assets/product/product7.jpg";
import product8 from "@/assets/product/product8.jpg";
import product9 from "@/assets/product/product9.jpg";
import product10 from "@/assets/product/product10.jpg";
import Produce_Banner from "./template/Produce_Banner.vue";
import Customer_Banner from "./template/Customer_Banner.vue";
export default {
  "/hello": "Hello",
  data() {
    return {
      listImg: [
        {
          url:banner1
        },
        {
          url: banner2
        },
        {
          url:banner3
        },
        {
          url:banner4
        },
        {
          url:banner5
        }
      ],
      produceImg: [
        {
          url:product1,
          title: "红烧排骨粉"
        },
        {
          url: product2,
          title: "麻辣官网"
        },
        {
          url:product3,
          title: "双椒鱼头粉"
        },
        {
          url:product4,
          title: "酸菜官网"
        },
        {
          url: product5,
          title: "酸辣官网"
        },
        {
          url:product6,
          title: "剁椒官网"
        },
        {
          url:product7,
          title: "豆豉凌官网"
        },
        {
          url:product8,
          title: "番茄肉丸粉"
        },
        {
          url:product9,
          title: "红烧鸡块粉"
        },
        {
          url:product10,
          title: "红烧牛腩粉"
        }
      ]
    };
  },
  components: {
    "p-banner": Produce_Banner,
    "a-banner": Banner,
    "c-banner":Customer_Banner,
  }
};
</script>
<style scoped>
.join_type {
  width: 100%;
  /* height: 171px; */
  background: #E61773;
  overflow: hidden;
}
.join_type ul {
  width: 1240px;
  /* height: 135px; */
  margin: 20px auto;
  /* background: pink; */
  border-left: 1px dotted #dc9c9b;
}
.join_type ul li {
  float: left;
  width: 293px;
  /* height: 122px; */
  padding: 10px 0 30px;
  /* background: red; */
  border-right: 1px dotted #dc9c9b;
}
.lu li img{ 
   width: 293px;
   overflow: hidden;
}
/* .join_type ul .li_1 {
  width: 357px;
} */
/*加盟流程*/
.join_liucheng {
  width: 1240px;
  height: 685px;
  overflow: hidden;
  background: #FFF;
  margin: 0 auto;
}
.join_liucheng .join_title {
  width: 100%;
  height: 270px;
  margin-top:40px;
  text-align: center;
}
#imgLogo {
  transform-origin: center top;
  transform: rotate(0deg);
  animation: huang 2s infinite;
}
.join_title h2{
font-size: 30px;
line-height: 36px;
}
.join_title p{
      line-height: 24px;
    color: #777;
    margin-top: 8px;
    font-size: 14px;
}
 
@keyframes huang{
  0%{
    transform: rotate(30deg);
  }
  50%{
    transform: rotate(-30deg);
  }
  100%{
    transform: rotate(30deg);
  }
}
/*产品列表*/
.product_table {
  width: 100%;
  height: 390px;
  padding: 75px 0 50px 0;
  background: #e3e3e3;
}
.Customer{
  width:1280px;
  height: 400px;
  margin: 75px auto 70px;
  position: relative;
  background: #e3e3e3;
  overflow: hidden;
}
</style>

3.2、新闻页

相关代码：

<template>
    <div>
        <title-nav :titleList="titleList"></title-nav>
        <div class="container">
        <router-view></router-view>
        </div>
    </div>
</template>
<script>
import new1jpg from "@/assets/new/news_02.png";
import news from "@/assets/news.jpg";
import titleNav from "./template/TitleNav";
export default {
  "/news": "News",
  data() {
    return {
      titleList: [
        {
          url: news,
          name: "新闻中心"
        }
      ]
    }
  },
  components: {
    titleNav
  }
};
</script>
<style scoped>
div{
    overflow: hidden;
}
.container {
  width: 1280px;
}
</style>

4、代码结构图

总结

以上就是本次项目的全部内容，需要交流或者获取代码请关注微信公众号：coding加油站获取