从零搭建Vue 2.x项目：打造健壮且灵活的单页应用

2023-09-03 09:49:42

构建一个强大且灵活的 Vue 2.x 单页应用程序：一步一步指南

创建一个新项目

踏入 Vue.js 的世界的第一步是创建一个新项目。使用 Vue CLI，这是 Vue.js 官方推荐的脚手架工具，可以快速启动并运行您的项目。只需输入以下命令：

vue create my-vue-project

安装 Axios

与后端 API 通信是单页应用程序的关键方面。Axios 是一个轻量级 HTTP 客户端库，用于发送请求和处理响应。通过运行以下命令安装它：

npm install axios

封装 Axios

为了简化 Axios 的使用，我们可以创建一个封装，提供一个一致且可重复使用的 API。在 src 目录中创建 axios.js 文件，并添加以下代码：

import axios from "axios";

const instance = axios.create({
  baseURL: "YOUR_API_URL",
  timeout: 10000,
});

export default instance;

配置 Vue Router

Vue Router 是官方路由器，用于管理单页应用程序中的导航。在 src 目录中创建 router.js 文件，并添加以下代码：

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "./components/Home.vue";
import About from "./components/About.vue";

Vue.use(VueRouter);

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About },
];

const router = new VueRouter({
  routes,
});

export default router;

跨域解决方案

当您的应用程序从本地开发环境与后端 API 通信时，可能会遇到跨域问题。要解决此问题，您需要在服务器端配置 CORS（跨域资源共享）标头。以下是在 Node.js 后端中添加 CORS 标头的方法：

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");

运行项目

现在一切都已到位，您可以通过运行以下命令启动您的应用程序：