本文将介绍以下内容:概述创建一个项目安装 element-plus安装 vue-router编写登录页面以及逻辑概述

要使用Vue 3、Vite、Element Plus 、Vue Router 创建一个登录页.

创建一个项目

使用 NPM 命令创建一个vite项目

npm init vite@latest

输入项目名称 vite-login，选择 Vue，选择 TypeScript

√ Select a framework: » Vue√ Select a variant: » TypeScript

加载依赖项：npm install

PS ***\vite-login> npm installnpm WARN EBADENGINE Unsupported engine {npm WARN EBADENGINE   package: 'rollup@3.25.3',npm WARN EBADENGINE   required: { node: '>=14.18.0', npm: '>=8.0.0' },npm WARN EBADENGINE   current: { node: 'v16.5.0', npm: '7.19.1' }npm WARN EBADENGINE }added 42 packages, and audited 43 packages in 11s3 packages are looking for funding  run `npm fund` for detailsfound 0 vulnerabilities

进入项目目录，并在终端中运行以下命令，安装命令：npm install element-plus。

PS ***\vite-login> npm install element-plusnpm WARN EBADENGINE Unsupported engine {npm WARN EBADENGINE   package: 'rollup@3.25.3',npm WARN EBADENGINE   required: { node: '>=14.18.0', npm: '>=8.0.0' },npm WARN EBADENGINE   current: { node: 'v16.5.0', npm: '7.19.1' }npm WARN EBADENGINE }added 22 packages, and audited 65 packages in 12s8 packages are looking for funding  run `npm fund` for detailsfound 0 vulnerabilities

进入项目目录，并在终端中运行以下命令，安装命令：npm install vue-router。

PS ***\vite-login> npm install vue-routernpm WARN EBADENGINE Unsupported engine {npm WARN EBADENGINE   package: 'rollup@3.25.3',npm WARN EBADENGINE   required: { node: '>=14.18.0', npm: '>=8.0.0' },npm WARN EBADENGINE   current: { node: 'v16.5.0', npm: '7.19.1' }npm WARN EBADENGINE }added 2 packages, and audited 67 packages in 2s9 packages are looking for funding  run `npm fund` for detailsfound 0 vulnerabilities

在项目根目录中的src下创建一个文件夹创建views文件夹，新建 home.vue 、login.vue 空内容，待用。

<!-- login.vue --><template>    <h1>Login Page</h1></template><script lang="ts" setup></script>

<template>    <h1>Home Page</h1></template><script lang="ts" setup></script>

在项目根目录下创建一个新的文件夹，命名为router，并在该文件夹下创建一个新的文件，命名为index.js。

// /rotuer/index.tsimport { createRouter, createWebHistory } from "vue-router";import HomePage from '@/views/Home.vue';import LoginPage from '@/views/Login.vue';const routes = [    {        path:'/',        name:'Default',        component:HomePage    },    {        path:'/home',        name:'Home',        component:HomePage    },    {        path:'/login',        name:'Login',        component:LoginPage    }];const router = createRouter({  history: createWebHistory(),  routes: routes,});export default router;

在主应用程序文件中引入 router。打开src/main.js文件，并添加以下代码。

// main.tsimport { createApp } from 'vue'import App from './App.vue'import router from '../router';createApp(App).use(router).mount('#app')

运行项目npm run dev

解决 @ 的异常路径问题

打开浏览器异常：[plugin:vite:import-analysis] Failed to resolve import "@/views/Home.vue" from "router\index.ts". Does the file exist?

第一种方式：直接修改 /router/index.ts 的import 的路径

// 修改前import HomePage from '@/views/Home.vue';import LoginPage from '@/views/Login.vue'// 修改后import HomePage from '../src/views/Home.vue';import LoginPage from '../src/views/Login.vue';

直接刷新页面：

第二种：检查配置检查tsconfig.json配置：如果你正在使用TypeScript，打开项目根目录下的tsconfig.json文件，确认是否有以下配置项：

"compilerOptions": {  "baseUrl": ".",  "paths": {    "@/*": ["src/*"]  }}

如果没有这个配置项，添加它并重新启动项目。

检查vite.config.js配置：在项目根目录下，找到vite.config.js文件，检查是否有以下配置项：

import { defineConfig } from 'vite'//  default defineConfig({  resolve:{    alias:{      '@':'/src'    }  }})

如果没有这个配置项，添加它并重新启动项目。

配置 element-plus

在主应用程序文件中引入Element Plus：打开src/main.js文件，并添加以下代码。

import { createApp } from 'vue'import App from './App.vue'import router from '../router';import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'createApp(App).use(router).use(ElementPlus).mount('#app')

在该文件中编写登录页的HTML和逻辑代码。以下是一个简单的示例：

<!-- @/views/Login.vue --><template>    <div class="login-container">        <el-form ref="formRef" :model="formData" :rules="formRules" class="login-form">            <h2 class="login-title">登录</h2>            <el-form-item prop="username">                <el-input v-model="formData.username" placeholder="请输入用户名"></el-input>            </el-form-item>            <el-form-item prop="password">                <el-input v-model="formData.password" type="password" placeholder="请输入密码"></el-input>            </el-form-item>            <el-form-item>                <el-button type="primary" @click="submitForm">登录</el-button>                <el-button type="primary" @click="resetForm">重置</el-button>            </el-form-item>        </el-form>    </div></template><script lang="ts" setup>import { ref } from 'vue';const formData = ref({    username: '',    password: '',});const formRules = ref({    username: [        { required: true, message: '请输入用户名', trigger: 'blur' },    ],    password: [        { required: true, message: '请输入密码', trigger: 'blur' },    ],});const formRef = ref();const resetForm = () => {    if (!formRef) return    formRef.value.resetFields()}const submitForm = () => {    console.log("formRef.value:", formRef.value);    formRef.value.validate((valid: any) => {        if (valid) {            // 表单校验通过，可以进行提交操作            console.log('表单校验通过');            console.log(formData.value); // 获取表单数据        } else {            // 表单校验失败，可以进行错误处理            console.log('表单校验失败');            return false;        }    });};</script><style scoped>.login-container {    width: 100%;    height: 100vh;    display: flex;    justify-content: center;    align-items: center;}.login-form {    max-width: 400px;    width: 100%;}.login-title {    text-align: center;    font-size: 24px;    margin-bottom: 20px;}</style>

进入首页的时候判断是否登录，未登录则进入登录页。

<!--App.vue--><template>  <h1 v-if="isLogged">欢迎访问主页</h1>  <router-view></router-view></template><script setup lang="ts">import { ref, onMounted } from 'vue';import { useRouter } from 'vue-router';const isLogged = ref(false);const router = useRouter();const checkLoginStatus = () => {  let isLoggedIn = false;  isLogged.value = isLoggedIn;};onMounted(() => {  setTimeout(() => {    checkLoginStatus();    if (!isLogged.value) {      router.push('/login');      return;    }    router.push('/');  });});</script><style scoped></style>

默认进入首页判断是否登录，未登录直接跳转 /login，已登录进入首页

const checkLoginStatus = () => {  let isLoggedIn = false; // 默认 未登录，进入登录页  isLogged.value = isLoggedIn;};onMounted(() => {  setTimeout(() => {    checkLoginStatus();    if (!isLogged.value) {      router.push('/login');      return;    }    router.push('/');  });});

const checkLoginStatus = () => {  let isLoggedIn = tre; // 默认 已登录，进入首页  isLogged.value = isLoggedIn;};onMounted(() => {  setTimeout(() => {    checkLoginStatus();    if (!isLogged.value) {      router.push('/login');      return;    }    router.push('/');