当前位置： 首页 > article >正文

Vue2创建原神官网界面（Vue2+html+css+jquery），速通vue项目（抽象但是实用）

article 2024/11/23 1:04:23

目录

前言

1.Vue2项目结构速通

2.原神官网界面布局以及Vue路由配置

这里我们需要先引入一下路由的概念

那么好，接下来主要讲解router-link以及router-view。

那么什么是子路由？？？还是看上面的router文件

3.项目样式布局介绍（具体代码我都直接写在界面中了，大家可以直接去看，放心不多而且我这个中式英文还是比较好辨认是哪个界面的）

首页

角色

世界

漫画

4.细节和坑点

5.补充（Vue中的一些函数意思）

6.结尾

前言

项目需要用的的技术有：

1.Vue2项目创建、路由切换......

2.html、css、js熟练使用

3.在Vue项目中引入jQuery并使用

很多人说在Vue项目中使用jQuery很傻，但是初学者嘛都是可以理解的，先把效果做出来，日后再不断磨砺和优化自己的技术和代码就行了，如果大家想要先看一下具体的效果可以点击下面网址：

原神动态网页(基于Vue2+html+css+js+jquery开发)_哔哩哔哩_bilibili，博主已经尽力实现能实现的效果了。接下来就由我来带你们用jQuery速通Vue2。代码源码会放在最后

1.Vue2项目结构速通

上图：

 这边如何创建Vue项目以及利用脚手架创建就不多赘述了，大家可以直接去找教程还是比较简单的。

先看public文件夹，这里面没啥好说的大家可以直接忽略，我们主要的开发都在src文件夹。

接下啦就是非常重要的src文件夹,我们一个一个看:

assets：这个文件夹中放的都是你的一些静态资源，例如css样式，js文件，图片，视频，音乐等等

components：这个是什么呢？翻译过来就是组件的意思，这个我们可以跟view类比，view就是视图，那么这两个有什么区别呢？实际上真要说区别还真没有什么区别，放的都是vue文件，用于路由切换的时候进行不同组件的渲染，这个主要取决于我们在分析界面的时候怎么管理组件，这个我们在后面举具体的例子进行讲解。

router：这个也是一个非常重要的文件，意思是路由,那么路由是什么，用来干什么，举个例子就知道了。

注意看这两张图片上面的地址栏，是不是发生了变化，这就是路由，我们在点击按钮的时候可以根据路由的不同渲染不同的组件，这样子既不会导致样式冲突，也不会导致由于网页资源过多导致加载很慢占用过多资源，这也是Vue项目强大的地方之一。

store：这个文件是用来管理全局数据的，我们在上面提到每个组件之间的数据或者样式是独立的，但是有些时候我们想要共享某个数据，这个时候就可以把数据交给store进行管理方便我们的调用，但这个项目里面我们暂时还没有用到因此不过多介绍。

view：上面说过了就不重复了。

OK说完了src我们讲一下外面的文件都是什么

App.vue：这个是我们的根目录，额简单点来讲就是我们一运行项目最先渲染的就是这个界面，可以理解成是一个用来装所有view和components的容器。

main.js:这个是我们引用一些依赖或者外部组件的时候需要在这个里面配置，例如我想要使用element ui就需要在这里引用，当然你也可以在具体的一个vue中引用，这里相当于是告诉程序我想要用这个东西。实际上我们不需要去过多管他，因为基本上都会自动加进去的

 

 package.json:里面包含了你所需要的所有组件的版本号，一般用于项目打包，我们不需要管。

 vue.config.js：这个也是比较重要的文件，主要用于修改一些配置，例如你想要运行的端口号以及跨域请求等等，这里就只介绍一下修改运行端口号怎么改。

大家只需要修改port即可 ，这里我是7070，下面的大家不用管，那个是用来管理跨域请求的，这里没用上。

额外说明：allowedHosts: "all"，就是允许所有主机访问该项目，就是如果说你写好了这个vue项目并运行了，你通过内网穿透在公网上拿到了一个临时地址，想让别人也看到你的界面，那么如果你不设置这个，服务器是不会允许别人访问的，懂？？？？？？？

2.原神官网界面布局以及Vue路由配置

我们先来看一下原神官网的图片

这是按钮切换的效果，我们可以发现，顶部的那个导航栏不管在什么时候都保持不变

好的那么我们就可以做出大致的布局了 

我们将这个顶部导航栏写在最外部，就是相对内容框的上一级别。

这里我们需要先引入一下路由的概念

const routes = [
  {
    path: '/',
    name: 'main',
    component: () => import('../views/main.vue'),
    children: [ // 嵌套路由
      {
        path: '/', // 嵌套路由的路径
        name: 'indexCompentent',
        component: () => import('../components/index.vue'),
      },
      {
        path: '/world', // 嵌套路由的路径
        name: 'worldCompentent',
        component: () => import('../components/world.vue'),
      },
      {
        path: '/man', // 嵌套路由的路径
        name: 'jueseCompentent',
        component: () => import('../components/juese.vue'),
        children: [
          {
            path: '',
            redirect: 'city1'
          },
          {
            path: 'city1',
            name: 'juese1Compentent',
            component: () => import('../components/juese-mengde.vue'),
          },
          {
            path: 'city2',
            name: 'juese2Compentent',
            component: () => import('../components/juese-liyue.vue'),
          },
          {
            path: 'city3',
            name: 'juese3Compentent',
            component: () => import('../components/juese-daoqi.vue'),
          },
          {
            path: 'city4',
            name: 'juese4Compentent',
            component: () => import('../components/juese-xumi.vue'),
          },
          {
            path: 'city5',
            name: 'juese5Compentent',
            component: () => import('../components/juese-fengdan.vue'),
          },
          {
            path: 'city6',
            name: 'juese6Compentent',
            component: () => import('../components/juese-nata.vue'),
          },
        ]
      },
      {
        path: '/picture', // 嵌套路由的路径
        name: 'manhuaCompentent',
        component: () => import('../components/manhua.vue'),
      },
    ]
  },
]

上面是本项目配置的路由，我们来讲一下。

path也就是路径，我们最开始的界面路径就是‘/’，因此我们需要渲染的应该是什么界面，很显然就是我们的main界面，main界面在我们项目指的就是原神官网刚进去的那个界面，也就是上面带红框的界面，注意，这里的界面并不包含顶部导航栏！！！！！！

name也就是一个名字，我们不需要管他，你想取什么名字都行。

component就是我们需要渲染的组件的路径。

是不是很简单，讲完这些基础只是之后我们利用具体的例子来讲解路由。

这个是我们在main.vue中写的容器，具体样式我没有写进去，大家只需要知道我写了什么就好，我们是不是发现这个就是一个导航栏。

<template>
  <div>
    <div class="header">
      <div class="olog"></div>
      <div
        class="music"
        @click="music"
      ></div>
      <div class="tiao"></div>
      <router-link to="/">
        <div
          class="box"
          id="b1"
          @mouseenter="onb1"
          @mouseleave="inb"
          @click="cindex"
        >首&nbsp;页</div>
      </router-link>
      <router-link to="/man">
        <div
          class="box"
          id="b2"
          @mouseenter="onb2"
          @mouseleave="inb"
          @click="cjuese"
        >角&nbsp;色</div>
      </router-link>
      <router-link to="/world">
        <div
          class="box"
          id="b3"
          @mouseenter="onb3"
          @mouseleave="inb"
          @click="cworld"
        >世&nbsp;界</div>
      </router-link>
      <router-link to="/picture">
        <div
          class="box"
          id="b4"
          @mouseenter="onb4"
          @mouseleave="inb"
          @click="cmanhua"
        >漫&nbsp;画</div>
      </router-link>
      <a
        target="_blank"
        href="http://localhost:80/"
        class="loginText"
        @mouseenter="ont"
        @mouseleave="int"
      >登&nbsp;录</a>
      <div
        class="loginLog"
        @mouseenter="ont"
        @mouseleave="int"
      ></div>
    </div>
    <router-view></router-view>
  </div>
</template>

那么好，接下来主要讲解router-link以及router-view。

router-link：大家可以理解成就是a标签，实际上vue项目在编译完之后就是一个a标签，只不过这个用于组件之间的跳转而不是html中页面的跳转。后面的to表示你要跳转的地址，大家应该都能理解，例如首页，我们是不是一开始渲染的就是首页？？？地址是‘/’，所以我们只需要跳转‘/’即可，

在例如世界，我们跳转的是不是‘/world’，这边需要大家借助router中的配置一起看。

这边需要注意：不管你是子路由还是别的什么，to后面写的应该是路由的完整地址。

那么什么是子路由？？？还是看上面的router文件

 {
        path: '/man', // 嵌套路由的路径
        name: 'jueseCompentent',
        component: () => import('../components/juese.vue'),
        children: [
          {
            path: '',
            redirect: 'city1'
          },
          {
            path: 'city1',
            name: 'juese1Compentent',
            component: () => import('../components/juese-mengde.vue'),
          },
          {
            path: 'city2',
            name: 'juese2Compentent',
            component: () => import('../components/juese-liyue.vue'),
          },
          {
            path: 'city3',
            name: 'juese3Compentent',
            component: () => import('../components/juese-daoqi.vue'),
          },
          {
            path: 'city4',
            name: 'juese4Compentent',
            component: () => import('../components/juese-xumi.vue'),
          },
          {
            path: 'city5',
            name: 'juese5Compentent',
            component: () => import('../components/juese-fengdan.vue'),
          },
          {
            path: 'city6',
            name: 'juese6Compentent',
            component: () => import('../components/juese-nata.vue'),
          },
        ]
      },

就是这个，大家可能不知道我写的什么意思，我大概讲一下。

man指的是人，也就是我们整体需要跳转的是人物界面，后面的city1、city2等等就是具体是哪个国家的角色。

就是这个奥，左侧菜单栏可以修改城市，那么对应的路由也需要改变，因为人物图片实在是太多了，我们不可能都写在一个界面中，然后通过js进行修改 。

实际上mhy界面中的解决方案是每个角色都写了一个对应的路由，大家不信可以去官网上看下，我这里为了简单就每个城市写一个路由。

这里大家只需要配置一个chlidren，然后往里面写路径就好了，不需要写‘/’会自动拼接的。

好的我们继续上面的话题，接下来讲下什么是router-view

请大家回到导航栏的那段代码，最下面是不是有个router-view的标签，这是什么呢？

这个实际上就是组件切换啦，这样说可能很抽象，那么我们举个例子：

这个是我们router-view所展示的所有界面，我们通过路由的切换从而切换 router-view所展示的内容，你可以理解成router-view就是一个变量，我们路由切换到哪里，router-view就中的内容就展示相应路由的组件，这个依旧是在router中配置，具体看下

仔细看菜单栏的地址并对照router文件中的子路由，是不是完全一致？ router-view大致就是这个意思。

3.项目样式布局介绍（具体代码我都直接写在界面中了，大家可以直接去看，放心不多而且我这个中式英文还是比较好辨认是哪个界面的）

首页

这个应该不用我多说了吧，大家直接流式布局，一个个往下写就好了 ，导航栏采用fix固定就好了。

主要是其中的一些小效果大家需要注意一下，这个大家自己去研究代码我就不多讲了。

角色

角色应该是最难做的一个界面了，这里我们的侧边栏由于在切换城市的时候也是不发生变化的，因此我们需要在设置一级路由用来专门写这个侧边栏然后在其中添加router-view用来展示内容。 

<template>
    <div class="boxxx">
        <div class="lineds"></div>
        <router-link to="/man/city1"><div class="city-button" id="bt1" ref="button1" @click="handleClick($refs.button1)">蒙德城</div></router-link>
        <router-link to="/man/city2"><div class="city-button" id="bt2" ref="button2" @click="handleClick($refs.button2)">璃月港</div></router-link>
        <router-link to="/man/city3"><div class="city-button" id="bt3" ref="button3" @click="handleClick($refs.button3)">稻妻城</div></router-link>
        <router-link to="/man/city4"><div class="city-button" id="bt4" ref="button4" @click="handleClick($refs.button4)">须弥城</div></router-link>
        <router-link to="/man/city5"><div class="city-button" id="bt5" ref="button5" @click="handleClick($refs.button5)">枫丹廷</div></router-link>
        <router-link to="/man/city6"><div class="city-button" id="bt6" ref="button6" @click="handleClick($refs.button6)">纳塔</div></router-link>
        <div class="city-button" id="bt7">敬请期待</div>
        <router-view></router-view>
    </div>
</template>

这边最主要的就是我们需要设置好图片容器的样式和位置，这样子我们只需要切换其中的图片即可，下面的人物头像实际上就是一个按钮类的轮播图，对于新手小白来说也是一个不小的挑战，建议直接采用flex布局，具体我就不说了，直接看代码就好了。

世界

这边其实没有什么特别需要注意的地方，最需要注意的就是整个界面一下划就是整块下滑，这个实际上就是一个巨大的轮播图，具体怎么实现可以去看我之前的文章 原神5.1前端网页HTML+CSS+JS_原神网页制作-CSDN博客

注意一下小细节就好了。

漫画

这应该是布局最简单的界面了，直接flex盒子秒了没啥好说的。当时写到这里直接感动哭了 。

4.细节和坑点

1.我们如果是从外部引入css样式，这个时候并不是局部引入，而是所有的组件都会共享这个样式，此时类名一定不能重复！！重要的事情说三遍，不要重复不要重复不要重复，博主在写的时候就被坑了导致后面样式冲突直接原地升天！！

解决办法就是我们直接把样式写在vue文件中就好，加上即可，在里面写具体样式

<style scoped>
。。。。。。
</style>

2.如果添加了鼠标滚轮之类的监听效果，在切换界面的时候一定要删掉删掉删掉！！！！！

$(window).on('wheel', this.handleWheel);


beforeDestroy() {
  $(window).off('wheel', this.handleWheel);
},



world1Click(){
      $('#box > div').each(function() {
          const currentTop = parseInt($(this).css('top')) || 0;
            $(this).css('transition', 'top 0.4s').css('top', (currentTop - 957) + 'px');
        });
    },

因为虽然组件切换的时候上一个组件会被销毁，但是window监听事件直接就是绑死的，我们需要手动去除。。。。。。。。。。。。。。。。。。。。。。。 

3.关于计时器，每次使用完建议清零或者所有自动运行的代码都使用同一个计时器，不然就会出现时间冲突！！！！

我们举个比较明显的例子：

第一张图片中会有一个自动运行的小三角，红框处；第二章图片的背景会自动渐变并且放大缩小，这些都需要代码自动运行，也就是利用 setInterval隔一段时间自动调用函数，在项目中所有的计时器都是共用的，因此建议在切换组件的时候清除计时器，也就是这个。

closeCount () {
       if (this.intervalId) {
     clearInterval(this.intervalId);
     console.log('计时器成功清除');
     }
    },

还有一种办法就是如果是简单的、循环的动画效果，我们可以不使用js而直接在css中定义动画效果并设置循环播放即可 ，这个办法最直接也最简单，一劳永逸。

5.补充（Vue中的一些函数意思）

我们这里给出一个比较简单的模板：

<script>
export default{
    name: '',

    date(){
        return{
           
        }
    },

    mounted(){
       
    },

    methods:{
     
    }
}
</script>

我们的js不再使用外部引入而是直接写在这个里面。

 export default也就是默认导出，这个导出可以让其它组件引用该组件。

name就是导出该组件的名称。

date()就是用于数据管理，一般配合插值表达式一起用。

mounted()俗称钩子函数，大家可以简单理解成项目的初始化，也就是组件被渲染之前都会先运行这里面的所有方法，因此一些自动运行的动画或者数据的初始化都可以在这个里面写好。

methods()就是方法集，大家可以把所有的方法都写在这个里面，就是你们js中定义的方法，然后直接在元素中绑定使用即可，大家可以配合代码看一下。

6.结尾

由于篇幅的关系，我不能每个小细节都讲到，在下只能通过这个拙劣的项目为大家提供Vue项目的快速入门，里面使用了大量的jQuery操作dom元素，可以让你在不被Vue语法绕晕的情况下快速了解Vue的核心功能，也就是路由切换以及项目结构，后面登录界面的后端也已经写好，大家可以去b站上自行查看。最后就是献上gitee仓库地址

https://gitee.com/ye-haowei12/genshin-impact-beta

有什么问题可以私聊博主，我会尽力解答。


http://www.kler.cn/a/405053.html

相关文章：

  • JAVA八股与代码实践----JDK代理和CGLIB代理的区别
  • Figma入门-文字、样式、链接、动作
  • 第6篇 寻找最大数___ARM C语言程序＜二＞
  • 中间件--laravel进阶篇
  • nacos镜像启动时候报Public Key Retrieval is not allowed
  • 排序算法(三)--插入排序
  • 2411rust,正与整128
  • 库卡机器人日常维护
  • BERT的中文问答系统32
  • C语言 蓝桥杯某例题解决方案（查找完数）
  • Python实现基础到高级：语音验证码技术详解
  • 07 - Clickhouse之ReplacingMergeTree和SummingMergeTree引擎
  • django基于python 语言的酒店推荐系统
  • 【青牛科技】芯麦 GC2003：白色家电与安防领域中 ULN2003 的理想替代者
  • 【常用组件整理】
  • QT中使用json格式存取矩阵数据
  • 第 23 章 -Golang 调试技巧
  • 爬虫实战：探索XPath爬虫技巧之热榜新闻
  • 基于Springboot + Vue小区物业管理系统(源码+lw+讲解部署+PPT)
  • 【Diffusion分割】CorrDiff：用于脑肿瘤分割的校正扩散模型
  • 【C++】从C到C++
  • C++结构型设计模式所体现面向接口设计的特征和优点
  • tcpdump交叉编译
  • 什么是JavaScript原型链？
  • CosyVoice 上手即用教程
  • 操作系统进程和线程——针对实习面试