使用Vue3 & Vite + Laravel 前后端分离基础案例（1前端）-CFANZ编程社区

本文将以最简单的方式展示 Vue3 & Vite + Laravel 前后分离的基础示例。用户注册并成功登陆后方可访问Home页面。Laravel使用Passport OAuth 用户登录认证。

第一步：创建Vue3项目

按照Vue官网提示，默认安装（注意：在相应位置输入你的项目名称）

npm init vue@latest

✔ Project name: … <your-project-name>    <---这里输入你的项目名称
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

> cd <your-project-name>   <---这里输入你的项目名称
> npm install
> npm run dev

你的vue默认页面应该可以运行了，快去试试吧

第二步：前端Vue的配置及创建相应的页面

安装 vue-axios，vue-router

npm i vue-axios
npm i vue-router

main.js 入口文件引入相关资源

// src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";    //这里用到了路由表， 下面创建
import axios from 'axios'

//这里配置后端的api接口
axios.defaults.baseURL = 'http://la10vue3.test/api/';

createApp(App).use(router).mount('#app')

3.修改App.vue

<template>
  <RouterView></RouterView>
</template>

<script setup>
import { RouterView } from 'vue-router'
</script>

创建路由文件

// src/router/index.js

import {createRouter, createWebHistory} from 'vue-router'
import HomeView from '../views/HomeView.vue'    //这里用到Home页面， 下面创建
import Login from '../views/auth/Login.vue'     //这里用到Login页面， 下面创建
import Register from '../views/auth/Register.vue'     //这里用到Register页面， 下面创建

const routes = [
    {
        path: '/',
        name: 'default',
        component: Login
    },
   {
       path: '/home',
       name: 'home',
       component: HomeView
   },
   {
       path: '/register',
       name: 'register',
       component: Register
   },
   {
    path: '/login',
    name: 'login',
    component: Login
},
];

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

export default router

创建vue视图文件

a. 创建Register视图文件

<!-- src/views/auth/Register.vue -->
<template>
  <div class="register">
    <div>
      <h1>LOGO</h1>
      <form @submit.prevent="submit">
        <div>
          <label for="name">用户名</label>
          <input v-model="name" name="name" type="text" />
        </div>
        <div>
          <label for="email">邮箱</label>
          <input v-model="email" name="email" type="email" />
        </div>
        <div>
          <label for="password">密码</label>
          <input v-model="password" name="password" type="password" />
        </div>
        <div>
          <label for="password">确认密码</label>
          <input v-model="password_confirmation" name="password_confirmation" type="password" />
        </div>
        <div>
          <button>注册</button>
        </div>
      </form>
      <p>
        已有账号？
        <RouterLink to="/login">Login</RouterLink>
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";

const name = ref("");
const email = ref("");
const password = ref("");
const password_confirmation = ref("");
const router = useRouter();
const validation = ref([]);

const submit = async () => {
  await axios
    .post("/register", {
      name: name.value,
      email: email.value,
      password: password.value,
      password_confirmation: password_confirmation.value,
    })
    .then(() => {
      router.push({ path: "/login" });
    })
    .catch((error) => {
      validation.value = error.response.data;
    });
};
</script>

<style scoped>
.register {
  padding: 50px;
  background-color: #eee;
}

input {
  margin-left: 10px;
  height: 30px;
  float: right;
  clear: both;
}

button {
  margin-top: 10px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>

b. 创建Login视图文件

<!-- src/views/auth/Login.vue -->
<template>
  <div class="login">
    <h1>LOGO</h1>
    <form @submit.prevent="submit">
      <div>
        <label for="email">邮箱:</label>
        <input type="email" name="email" v-model="email" />
      </div>
      <div>
        <label for="password">密码:</label>
        <input type="password" name="password" v-model="password" />
      </div>
      <div>
        <button type="submit">登录</button>
      </div>
    </form>
    <p>
      还没有账号？
      <RouterLink to="/register">Register</RouterLink>
    </p>
  </div>
</template>
   
<script setup>
import { ref } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";

const email = ref('');
const password = ref('');
const router = useRouter();

const submit = async () => {
  const response = await axios.post('/login', {
    email: email.value,
    password: password.value,
  });
  localStorage.setItem('token', response.data.access_token);
  await router.push('home');
};
</script>

<style scoped>
.login {
  padding: 50px;
  background-color: #eee;
}

input {
  margin-left: 10px;
}

button {
  margin-top: 10px;
}
</style>

c. 创建Home视图文件

<!-- src/views/Home.vue -->
<template>
  Home page.
</template>

<script setup>
import { onMounted } from "vue";
import axios from "axios";
import router from "../router";

onMounted(() => {
  authentication()
});

axios.defaults.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`;

const authentication = async () => {
  try {
    const req = await axios.get('/user')
  } catch (e) {
    await router.push('/')
  }
}
</script>