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

目录

前言

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',