使用vue3.0重构vue2.0 项目《后台管理系统》(二)

主要内容为《后台管理系统》的Login页面，也就是登录页面。

一，vue2.0 与vue3.0区别分析

vue3.0是在vue2.0上做的提升，所以说在vue2.0的一些用法在vue3.0中适用。具体详情请浏览官网。

1.路由方面：引用方式变化 ，routes属性加入强制判断

我们看下vue2.0：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const routes = [ ...xxx ]

const router = new Router({
   
	mode: 'history',
	routes
})

export default router

这是vue3.0引用方式：

 import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    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/AboutView.vue')
  }
]

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

export default router

对比可以看出，vue3中

1. router的实例 是通过函数 createRouter 来创建
2. 历史模式的选择 属性 history: xxxxx
3. 并且在vue3中会 强制判断routes，若不存在则编译都不会通过
   如下代码

const router = createRouter({
   
  history: createWebHashHistory(),
  // routes   // 注释掉routes之后 编译会报错
})

2.vue3.0支持碎片（一个组件中可以有多个根节点）

vue2.0

<template>
  <div>
    <h2> xxx </h2>
    &