本文将介绍以下内容:

1. 概述
2. 创建一个项目
3. 安装 element-plus
4. 安装 vue-router
5. 编写登录页面以及逻辑

概述

要使用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 install
npm 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 11s

3 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

安装 element-plus

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

PS ***\vite-login> npm install element-plus
npm 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 12s

8 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

安装 vue-router

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

PS ***\vite-login> npm install vue-router
npm 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 2s

9 packages are looking for funding
  run `npm fund` for details

found 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

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

// /rotuer/index.ts
import { 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.ts

import { 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'

// https://vitejs.dev/config/
export 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('/');