后端管理系统从零到部署发布流程之二(登录初步实现)
上一篇文章讲述了开发后端管理系统需要安装和配置的环境,以及利用@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"