Vue CLI 与 Element UI：打造现代感十足的后台管理系统前端界面

2023-08-26 03:16:58

使用 Vue CLI、Element UI、Axios 和 JWT 构建后台管理系统

构建前端框架

Vue CLI 是一个功能强大的命令行工具，可帮助您快速设置和管理 Vue.js 项目。它允许您轻松安装依赖项、配置项目设置并运行构建脚本。

安装必要的依赖项

要开始使用，请在您的项目目录中运行以下命令安装 Element UI、Axios 和 JWT：

npm install element-ui axios jwt

配置跨域

跨域是一个常见的网络安全限制，阻止了不同源的应用程序之间进行通信。为了解决这个问题，我们需要在后端和前端进行配置以允许跨域请求。

在项目目录中找到 config/index.js 文件，并添加以下配置：

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true
    }
  }
}

这将配置开发服务器以将所有 /api 路由代理到本地运行在端口 8080 上的服务器。

初始化布局

接下来，让我们初始化布局。在 src/components 目录中创建名为 Layout.vue 的文件，并添加以下代码：

<template>
  <div id="layout">
    <nav-bar />
    <router-view />
  </div>
</template>

<script>
import NavBar from './NavBar.vue';

export default {
  components: { NavBar }
};
</script>

此布局将作为应用程序中所有页面的基础，包括导航栏和主内容区域。

引入新页面

要添加新页面，请在 src/components 目录中创建名为 NewPage.vue 的文件，并添加以下代码：

<template>
  <div>
    <h1>New Page</h1>
  </div>
</template>

<script>
export default {
  name: 'NewPage'
};
</script>

然后，在 src/router/index.js 文件中更新路由配置以包含新页面：

import NewPage from '../components/NewPage.vue';

const routes = [
  {
    path: '/new-page',
    name: 'NewPage',
    component: NewPage
  }
];

export default routes;

这将添加一个新的路由 /new-page，该路由将显示 NewPage 组件。

设置 Home 页面导航栏

最后，让我们更新导航栏以包括指向新页面的链接。在 src/components/NavBar.vue 文件中，添加以下代码：

<template>
  <nav id="nav-bar">
    <ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/new-page">New Page</router-link></li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'NavBar'
};
</script>