Vue 3 + TypeScript + Element Plus + Vite 4.3：实现一个优雅的登录注册功能

先附上源码地址：
觉得不错的话顺手一个star

效果展示

最新vite搭建项目

npm create vite@latest mingsl-login -- --template vue-ts

配置tsconfig

tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}
​

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext", // 将代码编译为最新版本的 JS
    "useDefineForClassFields": true, // 是 TypeScript 3.7.0 中新增的一个编译选项
    "module": "ESNext", // 使用 ES Module 格式打包编译后的文件
    "moduleResolution": "Node", // 使用 Node 的模块解析策略
    "strict": true, // 启用所用严格的类型检查
    "jsx": "preserve", // 保留原始的 JSX 代码，不进行编译
    "resolveJsonModule": true, // 允许引入 JSON 文件
    "isolatedModules": true, // 该属性要求所有文件都是 ES Module 模块。
    "esModuleInterop": true, // 允许使用 import 引入使用 export = 导出的内容
    "lib": ["ESNext", "DOM"], // 引入 ES 最新特性和 DOM 接口的类型定义
    "skipLibCheck": true, // 跳过对 .d.ts 文件的类型检查
    "noEmit": true // 不输出文件,即编译后不会生成任何js文件
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }] 
}
​

配置文件系统路径别名

安装 @types/node

npm install @types/node

修改vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
​
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{
    alias:{
      '@':resolve(__dirname,'src')
    }
  }
})
​

修改tsconfig.json

{
  "compilerOptions": {
     //...
    "baseUrl": ".", //查询的基础路径
    "paths": { "@/*": ["src/*"]} //路径映射,配合别名使用
  }
     //...
}

安装 element plus

npm install element-plus --save

配置Volar 插件支持

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

自动导入

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件`

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite配置文件中`

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
​
export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

全局引入css样式

//main.ts
import 'element-plus/dist/index.css'

安装 icon 图库

安装

npm install @element-plus/icons-vue

全局注册

// main.ts
​
// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
​
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
​
app.mount('#app')

定义 LoginReq 接口

// @/interface/user.ts
/**
 * 登录表单提交请求数据类型
 */
export interface LoginReq{
    username:string;
    password:string;
}
​

自定义loginForm 组件

​

​

​

定义 RegisterReq 接口

// @/interface/user.ts
/**
 * 注册表单提交请求数据类型
 */
export interface RegisterReq{
    username:string;
    password:string;
    email:string
}
​

自定义registerForm 组件

​

​

​

去掉页面内边距占满屏幕

配置 app.vue 组件实现效果

​


​