Web-vue框架应用（p5r网站）

vue介绍

配置环境

Vue官网

终端

Linux和Mac上可以用自带的终端。

Windows上推荐用powershell或者cmd。Git Bash有些指令不兼容。

安装Nodejs

安装地址

安装@vue/cli

打开Git Bash，执行：

npm i -g @vue/cli

如果执行后面的操作有bug，可能是最新版有问题，可以尝试安装早期版本，比如：npm i -g @vue/cli@4

启动vue自带的图形化项目管理界面

vue ui

常见问题1：Windows上运行vue，提示无法加载文件，表示用户权限不足。

解决方案：用管理员身份打开终端，输入set-ExecutionPolicy RemoteSigned，然后输入y

基本概念

script部分

export default对象的属性：

• name：组件的名称
• components：存储<template>中用到的所有组件
• props：存储父组件传递给子组件的数据
• watch()：当某个数据发生变化时触发
• computed：动态计算某个数据
• setup(props, context)：初始化变量、函数
  • ref定义变量，可以用.value属性重新赋值
  • reactive定义对象，不可重新赋值
  • props存储父组件传递过来的数据
  • context.emit()：触发父组件绑定的函数

template部分

• <slot></slot>：存放父组件传过来的children。
• v-on:click或@click属性：绑定事件
• v-if、v-else、v-else-if属性：判断
• v-for属性：循环，:key循环的每个元素需要有唯一的key
• v-bind:或:：绑定属性

style部分

• <style>标签添加`属性后，不同组件间的css不会相互影响。

第三方组件

• view-router包：实现路由功能。
• vuex：存储全局状态，全局唯一。
  • state: 存储所有数据，可以用modules属性划分成若干模块
  • getters：根据state中的值计算新的值
  • mutations：所有对state的修改操作都需要定义在这里，不支持异步，可以通过$store.commit()触发
  • actions：定义对state的复杂修改操作，支持异步，可以通过$store.dispatch()触发。注意不能直接修改state，只能通过mutations修改state。
  • modules：定义state的子模块

网站完成介绍

项目地址：Github
p5素材都是用ps抠的，喜欢还请点个star

首页

1. 进入网站是p5剪影图做海报

2. 主页自动播放背景音乐(Take Over it)

3. 网页正中间有播放按钮，点击播放按钮后会弹出op

   
   当播放视频时，整个页面是被禁止滚动的，只能操作视频，此时背景音乐将被禁用掉

4. 当首页向下滑动一个窗口距离后将会出现右侧的卡片，可以点击箭头使其收回
   

5. poster下面的区域为新闻区，通过banner和对应的文字说明板块构成，banner的图片每隔5秒更换

6. 下方的暴击横条可是设置跳转链接，当鼠标放上之后的hover状况下会有特殊动画，和人物出现效果
   
   

对战页面

传统格斗游戏，目前没有实现匹配功能
这有移动，跳跃，攻击功能，全部有JavaScript类继承实现，好扩展
自动播放背景音乐Life Will Change
没有p5素材，自己肝太多了，只能先用拳皇的了

用户列表页面

返回服务器上注册的前十位用户，对接的acapp的api

点击用户图像，如果未登录会跳转到登录页面，登录后才能跳转到对应用户的页面，可以查看对应用户的发帖和信息，存在服务器中

个人中心页面

在这个页面可以发帖和删除帖子，上传到服务器，别人可以看见，别人和自己公用一个模板，只有自己进入自己页面时才能发帖和删帖

登录和注册页面

采用相应是布局，当页面宽度超过768px时，是

当页面宽度低于768px时是

登录成功会跳转到首页，登录失败会有错误提示信息，
注册页面同理，注册成功会跳转登录页面，失败会有提示信息