Vue3管理项目

# 管理项目
学习：https://www.bilibili.com/video/BV1MR4y1H7qs
```mermaid
graph TD
	A --> B[Test]
```

## 搭建项目
首先创建一个vue3项目，hotal_manager
```
vue create hotal_manager
# 选择手动、Babel Router Vuex CSS Linter
# Vue 3.x
# 默认回车
# save as a preset
cd hotal_manager
```
其次，安装依赖项目。分别是UI、网络请求、页面路由跳转
`npm i --save element-plus axios nprogress`

最后，运行项目`npm run serve`，删除一些没用的内容，如components中HelloWorld.vue, views中所有都删掉，路由里面删除路由，对应的App.vue也删除样式等相关内容。最后页面留空。

### 写首页
创建了Index.vue首页，并在路由中配置，发生报错如下：
> error  Component name "Index" should always be multi-word  vue/multi-word-component-names
翻译为：错误组件名称“索引”应始终为多词 vue/多词组件名称

> w 官方文档建议组件名写成驼峰式或者-衔接的形式，故在编译的时候把命名不规范的代码判定为不规格。在vue.config.js中关闭该功能即可：

```js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false, //关闭命名驼峰规则，并同时关闭定义了很多变量未使用提示的错误
})
```
### 设置加载条nprogress
在路由index.js中添加了Nprogress加载条功能。
```js

// 导入nprogress
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css' 
//定义路由导航前置守卫
router.beforeEach((to, from, next)=>{
	Nprogress.start();
	next()
})
//定义路由导航后置守卫
router.afterEach((to,from)=>{
	//路由跳转时添加一个顶部加载条
	Nprogress.done();
})
```
效果如下图：

![](/media/202209/2022-09-16_105059&nCvXG05BTKmkDlwebSIR.png)

### 修改浏览器打开后标签栏元素
- 位于public/favicon.ico位置，更改即可。
- public/index.html中，默认使用了`<%= htmlWebpackPlugin.options.title %>`读取的是package.json中的name。

### 创建其他目录
- utils放置工具类
- api 放所有请求api
- config 放配置

## 绘制登录页面
登录 http://localhost:8080/Login
参数：
loginId: 登陆名
loginPwd: 登录密码
返回：
success：是否成功
message：消息
token: 令牌

### 执行登录功能
- 提交之前对密码进行MD5加密，MD5虽说是很难破解，但是可以通过穷举法破解。
- 所以提交之前进行MD5加密
- 并且将加密后的字符串进行反转再md5加密