后端管理系统从零到部署发布流程之二（登录）

后端管理系统从零到部署发布流程之二（登录初步实现）

上一篇文章讲述了开发后端管理系统需要安装和配置的环境，以及利用@vue/cli脚手架初始化搭建一个Vue3.0版本框架的后端管理系统，安装 TypeScript 编译解析工具，开始准备使用 TypeScript 这个 JavaScript 的超集语言，来编写这个后端管理系统。

拥有了上一篇文章的铺垫、相关工具的安装和环境的配置，接下来就可以开始登录功能的逐步实现了。

第一步：首先我们在 src 目录下新建一个 views 文件夹，这个文件夹中规定放置一些用于页面视图展示的组件。
第二步：我们在views文件夹中新建一个名字叫做 login.vue 的 vue 组件，这个文件就是登录页需要展示的效果，稍后需要编写布局、样式、和业务逻辑等。
第三步：找到 router 文件夹，在 router 文件中找到 index.ts 文件，这个文件是配置路由的主要文件，所有的路由都需要在 index.ts 文件中体现。

好了，准备工作已经准备好了，下面就开始一步一步的开始配置路由和登录页的实现。

1. 路由配置

在 router 文件夹中的 index.ts 文件中添加如下内容，让登录页可以在我们的项目中可以正常的访问到。

import {
    createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Login from '@/views/login.vue'

const routes: Array<RouteRecordRaw> = [
	{
   
		path: '/login',
		name: 'Login',
		component: Login,
		meta: {
    title: '登录' }
	}
]

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

export default = router

没错，此处的 vue-router 4.x 版本 的用法是有区别与 vue-router 3.x 版本的。vue-router 4.x 版本的路由采用的是模块导出的方式，这样可以更方便我们使用。

• createRouter：实例化一个路由对象
• createWebHistory：内部封装的函数，等同于 H5 的 history 历史记录
• RouteRecordRaw：这是用来声明一种 vue-router 路由需要的数据类型，所有的路由配置都需要满足这个数据类型。

配置完登录的路由后，我们可以在 VSVode 编辑器中使用 Ctrl + ~ 打开命令行窗口，输入以下命令来启动这个项目。

$ npm run serve

然后访问在浏览器中访问地址：http://localhost:8080/login
如果不出意外的话，我们即将看到一片空白的页面。

下面让我们来为 登录页面添加一些东西，让登录页有内容可以展示。

2. 登录布局

在 views 文件夹中 找到 login.vue 文件，并在 VSCode 编辑器中打开，开始编写以下内容。

<template>
	<div>HELLO LOGIN PAGE !</div>
</template>

然后在 浏览器中输入刚才的地址：http://localhost:8080/login
不出意外的话，你这个时候就可以看到页面上会有 HELLO LOGIN PAFE ! 字样的内容显示，此时就说明了，我们的登录页已经可以正常显示内容，下面我们就可以为我们的登录页面开始编写登录的布局、登录的样式、和登录的业务逻辑。

2.1 引入第三方组件库

在写登录之前，我们需要借助一个vue的UI库，来帮助我们快速的完成我们的登录页的布局和样式的渲染。而这个组件就是 element-plus，没错这个组件库就是使用 TypeScript 和 Vue 3.x 框架编写的，有区别与 element-ui。element-ui组件库是使用 vue 2.x 和 JavaScript 编写的，所以，在这里并不适用。

下面我们开始安装 element-plus 这个组件库。

第一步：在VSCode编辑器中使用组合键 Ctrl + ~ 打开命令行窗口，输入如下命令进行安装。

$ npm install -S element-plus

如果安装过程中没有报错信息，那就说明已经安装成功了，此时在 package.json 文件中的 dependencies 属性中，可以看到 element-plus 已经安装成功。

{
   
	"dependencies": {
   
		"element-plus"<