【Vue】动动小手就能让你拥有属于自己的“平板“

效果预览图

第一步 新建项目

先创建一个新项目 web-phone，然后安装 vue-router，路由是一定要安装的，因为我们要通过路由来实现应用切换。

第二步 配置路由

首先我们要新建一个路由组件 PhoneContainer 然后在这个组件的页面，有个 Box 组件，这个 Box 组件里面呢则装着一个 Phone 组件。根据上面的描述，我们需要创建3个 .vue 文件，然后路由组件放在 pages 目录，非路由组件放在 components 目录，

然后，我们在 router 目录下的 index.js 文件中进行路由的配置

import {
    createRouter, createWebHistory } from 'vue-router'
const routes = [
  {
    path: "/", redirect: "/phone-container" },
  {
   
    path: "/phone-container",
    name: "phoneContainer",
    component: () => import("../pages/PhoneContainer.vue"),
    redirect:'/phone-container/frontPage',
    children: [
      {
   
        path: 'frontPage', // 首页 即手机桌面
        name: 'FrontPage',
        component:()=> import('../components/PhonePages/FrontPage.vue')
      },
      {
   
        path: 'dds', // 打地鼠应用
        name: 'DDS',
        component:()=> import('../components/PhonePages/DDS.vue')
      }
    ]
  }
]

const router = createRouter({
   
  history: createWebHistory(),
  routes
})

export default router

第三步 页面结构

先把 App.vue 的 template 标签中的内容全部删掉，写上一句

<template>
    <router-view />
</template>

然后，去到 PhoneContainer 组件中写下

<template>
    <div class="phone-container">
        <!-- <Config /> -->
        <Box />
    </div>
</template>
<script>
import Box from '../components/Box.vue';
export default {
     
    name: 'PhoneContainer', // 手机容器
    components: {
     
            Box
    }
};
</script>
<style scoped>
.phone-container {
     
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - 20px