怎样用vue3,pinia,vue-router,axios,mockjs写一个登录页面

以下是一个基于Vue3、Pinia、Vue Router、Axios和MockJS的简单登录页面的示例代码：

1. 安装依赖：

shell复制代码
npm install vue@next pinia vue-router axios mockjs --save

2. 在 src 目录下创建一个 login 目录，并在其中创建 components 目录。
3. 创建 Login.vue 文件并在其中编写以下代码:

复制代码
<template>
  <div>
    <h1>Login Form</h1>
    <form @submit.prevent="handleSubmit">
      <label for="email">Email:</label>
      <input type="email" id="email" v-model="email" />
      <label for="password">Password:</label>
      <input type="password" id="password" v-model="password" />
      <button type="submit">Login</button>
      <p v-if="errorMessage">{{ errorMessage }}</p>
    </form>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { useStore } from "pinia";
import { useRouter } from "vue-router";
import axios from "axios";
import MockAdapter from "axios-mock-adapter";
import mockData from "../mock";

export default defineComponent({
  setup() {
    const store = useStore();
    const router = useRouter();
    let mock = new MockAdapter(axios);
    mock.onPost("/api/login").reply(200, mockData);

    const email = ref("");
    const password = ref("");
    const errorMessage = ref("");

    const handleSubmit = async () => {
      try {
        const response = await axios.post("/api/login", {
          email: email.value,
          password: password.value
        });

        store.dispatch("user/login", {
          email: email.value,
          token: response.data.token
        });

        router.push("/");
      } catch (error) {
        errorMessage.value = error.response?.data?.message || "Invalid credentials";
      }
    };

    return {
      email,
      password,
      errorMessage,
      handleSubmit
    };
  }
});
</script>

在此示例中，我们使用了 defineComponent，一个 Vue 3 中的新组件API，以及 useStore 和 useRouter，这是 Pinia 和 Vue Router 的响应式状态管理和路由管理工具。 我们还使用了 axios-mock-adapter 和 mockjs 来模拟登录接口请求。

4. 在 login 目录下创建 components 目录，并在其中创建 LoginForm.vue 文件。在该文件中编写以下代码:

复制代码
<template>
  <form @submit.prevent="$emit('submit', { email, password })">
    <label for="email">Email:</label>
    <input type="email" id="email" v-model="email" />
    <label for="password">Password:</label>
    <input type="password" id="password" v-model="password" />
    <button type="submit">Login</button>
  </form>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    email: String,
    password: String
  },
  setup(props) {
    return {
      email: props.email || "",
      password: props.password || ""
    };
  }
});
</script>

5. 在 login 目录下创建一个名为 index.js 的文件，并在其中编写以下代码:

复制代码
import { createRouter, createWebHistory } from "vue-router";
import { createPinia } from "pinia";
import Login from "./components/Login.vue";

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

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

const store = createPinia();

export { router, store };

在此文件中，我们创建了一个 Vue Router 实例，并暴露出它以及 Pinia 实例，以便在其他地方导入它们。

6. 最后，在 src/main.js 文件中编写以下代码来使用我们刚刚创建的路由和状态管理实例:

javascript复制代码
import { createApp } from "vue";
import App from "./App.vue";
import { router, store } from "./login";

createApp(App).use(router).use(store).mount("#app");

然后你就可以运行你的应用程序了。访问 http://localhost:8080/login，输入模拟接口数据即可登录本地页面。