【Vue3项目搭建至布局】

这篇文章内容是从vue3项目构建到实现一个简单的布局，用到组件化原理和路由，效果图：

vue3创建项目：

• vue create 项目名称
• Manually select features 选择手动选择功能
• 选择Vue version,babel,TypeScript,Router,Vuex,
• 选择3.x
• 下面一路回车等待项目创建完成
  创建项目成功后vscode打开

组件化布局（.vue编写->使用页面导入->注册->使用）

• 在components文件夹下创建Header.vue,Side.vue,Footer.vue文件，内容自定
• 在App.vue里import导入组件，在components里注册组件，在template里使用

导入路由（.vue编写->router/index.ts导入->使用）

• 在views文件夹下创建需要跳转的页面
• 如何在index.ts里添加刚刚创建的页面仿照About
• 在使用的页面Header.vue里：
  <router-link to="/" class="a">首页</router-link>，
  <router-link to="/articles" class="a">文章</router-link>

Header.vue

<template>
  <el-container>
    <div style="width: 200px;">
      <img src="../assets/logo.png" alt="找不到照片" style="width:50px" />
    </div>
    <div style="flex: 1; text-align: center">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode