Vue制作静态页面--day01

希望能仿制出游戏PHigros的界面，没有任何有用的功能，只是熟悉下vue中的一些语法。

---

1、脚手架创建项目

使用脚手架3.0创建项目

执行指令

vue create pgr

配置  babel，vuex，vue-router

然后删除掉多余的文件

2、vue文件快速生成

创建好vue文件后在文件内输入vue可以快速生成vue文件的框架

（之前都是手敲，后悔刚知道）

3、css文件的引入

在app.vue这个文件的css部分可以引入css文件作为全局样式

这里先引入两个——初始化文件和字体图标文件

 @import url('./assets/css/base.css');
  @import url('https://at.alicdn.com/t/font_3350241_w9zfupdfgdi.css');

 

4.边角UI组件 

 所有界面都是在这两个角的位置有两个或一个按钮，因此将其封装成一个组件

<template>
  <div class="bg">
    <div class="left">
      <slot name="left"></slot>
    </div>
    <div class="xia">
       <slot name="xia"></slot>
    </div>
    <slot>
      
    </slot>
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style scoped>
  .bg{
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 1;
  }

  .left{
    position: fixed;
    left: 0;
    top: 10px;
    width: 8vw;
    height: 7vh;
    font-size: 4vh;
    color: white;
    background-color: aqua;
    transform: translateX(-2vw) skewX(-10deg);
    border-right: 3px solid white;
    text-align: center;
    line-height: 7vh;
  }

  .xia{
    position: fixed;
    right: 0;
    bottom: 10px;
    width: 8vw;
    height: 7vh;
    font-size: 4vh;
    color: white;
    background-color: aqua;
    transform: translateX(2vw) skewX(-10deg);
    border-left: 3px solid white;
    text-align: center;
    line-height: 7vh;
  }
</style>

 这个组件只能用来放置按钮进行页面跳转，没有其他功能

使用fixed定位，斜切和移动来完成按钮的安放

 

5、完成主要页面的vue文件和页面间的路由跳转关系

 这个游戏主要包含这些界面

首页重定向

{
    path:'',
    redirect: '/home'
  },

 页面路由

//一般形式
import HomeView from '../views/HomeView.vue'

 {
    path: '/home',
    name: 'home',
    component: HomeView
  },

//懒加载形式
 {
    path: '/about',
    name: 'about',
    
    component: () => import('../views/AboutView.vue')
  },

页面跳转

没有使用router-link标签（主要是搞不明白）

采用代码跳转的方式

用到的方法

• this.$router.push();
• this.$router.replace();
• history.back();
• history.forward();

问题

这个怎么去掉，啊啊啊啊啊

具名插槽外面套了一个div生成的。。。

原地去世。。。。。就这样吧

今天就做这么多吧，累了......

复习下

脚手架的使用

字体图标的使用，css文件引用

vue路由的配置和代码跳转，懒加载，重定向

组件化具名插槽

vue快速生成，vue模板配置