登录界面设计

1.下载并安装 nodejs 

2.查看node版本

查看：node -v

3.查看vue-cli有没有安装

查看：vue -V      （没有显示版本，或者版本低于4.5版本的，请执行安装进行安装）
安装：npm install -g @vue/cli

4.创建项目

vue create promote_font

说明：选择 Vue 3  

5.运行服务

5.下载工具 vsc

双击打开vsc工具 文件-》打开文件夹-》选择刚才新建的项目导入进来

6.改入口的html文件

<meta name="keywords" content="湖南码趣教育科技有限公司，promote系统">
<meta name="description" content="湖南码趣教育科技有限公司vip教学服务中心研发的学习系统，promote系统，专注于专业知识的提升">

替换logo

修改标题

运行查看修改结果

切换页面

7.导入 element-plus 框架

npm install --save element-plus

import {
    createApp
} from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)

app.mount('#app')

https://element-plus.gitee.io/zh-CN/component/carousel.html#%E5%8D%A1%E7%89%87%E5%8C%96

8. 新建views文件夹用于存放视图

9.安装路由并引入路由

npm install vue-router@4.0.0-beta.13

import {
    createApp
} from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

//引入路由
import {
    router
} from './route'

const app = createApp(App)

app.use(ElementPlus)
app.use(router)
app.mount('#app')

10.创建路由文件夹

import { createRouter, createWebHistory } from "vue-router";

const Login = () => import('../views/login')

const routes = [
    {
        path:"/",
        component: Login
    },
    {
        path:"/login",
        name: 'login',
        component: Login
    }
]


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

11.总入口

12.效果

13.写页面

14. 关闭语法检查（需要重启）

15.

<el-form-item >
      <img src="http://127.0.0.1:8001/users/image/verification/BEFD6738-4F01-447C-C73F-3D6DF3C91515/" alt="请稍后重试">
    </el-form-item>