【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里：
  首页，
  文章

Header.vue

Aside.vue

Footer.vue

App.vue

router/index.ts

import {
  createRouter,
  createWebHistory,
  RouteRecordRaw,
} from 'vue-router';

import Home from '../views/Home.vue';

const routes: Array = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/articles',
    name: 'articles',
    component: () => import(/* webpackChunkName: "about" */ '../views/Articles.vue')
  }
export default router