vue制作一个后台登陆界面

原创

于 2024-05-12 19:33:54 发布 · 1.3k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

下面是一个简单的示例，演示了如何使用Vue.js来创建一个基本的后台登录界面博客。

首先，确保你已经安装了Vue CLI，然后创建一个新的Vue项目：

vue create my-blog-app

然后，进入项目目录并安装一些需要的依赖：

bash

cd my-blog-app
npm install axios vue-router

创建一个登录页面组件 Login.vue：

<template>
  <div>
    <h2>后台登录</h2>
    <form @submit.prevent="login">
      <div>
        <label for="username">用户名:</label>
        <input type="text" id="username" v-model="username" required>
      </div>
      <div>
        <label for="password">密码:</label>
        <input type="password" id="password" v-model="password" required>
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>