vue

这是一个通用的后台管理系统模板，基于 vue.js 和 element-ui 实现。该模板包含完整的项目结构和代码逻辑，可以作为后台管理系统开发的基础。

后端项目地址：https://gitee.com/fly-sy/my-backend-app

接口文档地址：https://console-docs.apipost.cn/preview/5a1b8d8bcff54220/350d2d652cd952ce

vue-element-admin/ ├── .env // 环境变量配置文件 ├── .env.development // 开发环境的环境变量配置文件 ├── .env.production // 生产环境的环境变量配置文件 ├── .eslintrc.js // ESLint 配置文件 ├── .gitignore // Git 忽略文件 ├── babel.config.js // Babel 配置文件 ├── LICENSE // 项目许可证文件 ├── package-lock.json // 记录项目依赖的确切版本 ├── package.json // 项目依赖和脚本配置文件 ├── README.md // 项目说明文档 ├── vue.config.js // Vue CLI 配置文件 ├── public/ // 静态资源目录 │ ├── favicon.ico // 网站图标 │ └── index.html // 入口 HTML 文件 └── src/ // 源代码目录 ├── api/ // API 请求目录 │ └── ... // API 请求文件 ├── assets/ // 资源文件目录 │ ├── icon/ // 图标文件 │ ├── images/ // 图片文件 │ └── ... // 其他资源文件 ├── components/ // 可复用的 Vue 组件目录 │ └── ... // Vue 组件文件 ├── directive/ // 自定义 Vue 指令目录 │ └── ... // 自定义指令文件 ├── filters/ // Vue 过滤器目录 │ └── ... // 过滤器文件 ├── icons/ // 项目使用的图标目录 │ └── ... // 图标文件 ├── lang/ // 国际化文件目录 │ └── ... // 国际化配置文件 ├── layout/ // 布局组件目录 │ ├── components/ // 布局组件中使用的子组件 │ └── ... // 布局组件文件 ├── mixins/ // Vue 混入目录 │ └── ... // 混入文件 ├── plugins/ // Vue 插件目录 │ └── ... // 插件文件 ├── router/ // Vue 路由配置目录 │ ├── index.js // 路由入口文件 │ └── ... // 路由配置文件 ├── store/ // Vuex 状态管理目录 │ ├── index.js // Vuex 入口文件 │ ├── modules/ // Vuex 模块目录 │ └── ... // Vuex 相关文件 ├── styles/ // 全局样式目录 │ ├── index.scss // 全局样式入口文件 │ └── ... // 其他样式文件 ├── utils/ // 工具函数目录 │ └── ... // 工具函数文件 ├── views/ // 页面目录 │ ├── dashboard/ // 仪表盘页面目录 │ │ └── ... // 仪表盘页面文件 │ ├── login/ // 登录页面目录 │ │ └── ... // 登录页面文件 │ ├── ... // 其他页面目录 │ └── index.js // 页面路由映射文件 ├── App.vue // 根组件文件 ├── main.js // 入口 JS 文件 └── permission.js // 权限控制文件

为什么使用 eslint + perttier 组合作为代码的格式化风格？

eslint 是一种代码规范和质量检查工具，它可以检测和报告代码中的问题，如语法错误、格式错误、命名错误等。

perttier 是一个代码格式化工具，它可以将代码按照统一的风格进行格式化。

使用 eslint + perttier 组合可以保证代码风格的一致性和质量。

eslint 常用的.eslintrc.js文件配置如下

perttier

在 vscode 中安装 Prettier - Code formatter 插件

在项目的根目录创建.prettierrc.json文件并添加如下配置

创建src/styles/index.scss 和 src/styles/normalize.css

在src/styles/normalize.css中添加如下样式

在 Vue CLI 项目中使用 Element UI 可以通过以下步骤进行：

首先，你需要使用 npm 或 yarn 将 Element UI 安装到你的 Vue CLI 项目中。在项目根目录下打开命令行窗口，然后运行以下命令：

使用 npm：

或者使用 yarn：

在你的 Vue CLI 项目中，你需要将 Element UI 引入到你的项目中。在你的 main.js 文件中，添加以下代码：

这里，我们首先导入了 Vue 和 ElementUI。然后，我们导入了 Element UI 的样式文件。最后，我们通过 Vue.use(ElementUI) 将 Element UI 添加到 Vue 中。

现在，你就可以在你的 Vue 组件中使用 Element UI 的组件了。例如，你可以在你的组件中添加一个按钮：

注意，Element UI 的组件通常都以 el- 开头。

如果你希望只引入需要的 Element UI 组件，以减少项目的体积，你可以使用按需引入的方式。这需要使用到 Babel 插件 babel-plugin-component。首先，你需要安装这个插件：

然后，在你的 .babelrc 或 babel.config.js 文件中，添加以下配置：

接下来，你可以只引入你需要的组件和样式：

这样，你就只会引入 Button 和 Select 组件以及它们的样式，而不会引入整个 Element UI 库。

抽离代码

将 Element UI 抽离到 src/plugins/ElementUI.js 文件中是一个很好的做法，这样可以更好地组织代码并使其易于管理。下面是如何实现这一点的步骤：

首先，在 src/plugins 目录下创建一个新的文件 ElementUI.js。

在 ElementUI.js 文件中，安装并引入 Element UI 及其样式文件。

这里我们导出了一个函数，这个函数会调用 Vue.use(ElementUI) 来安装 Element UI 插件。

接下来，在 main.js 文件中，你需要引入并使用这个 ElementUI.js 文件。

在这里，我们引入 ElementUI 函数，并立即调用它，从而安装 Element UI 插件。

如果你希望按需引入 Element UI 的组件，你可以在 ElementUI.js 文件中做相应的配置，并使用 babel-plugin-component。这要求你已经安装并配置了该插件。

然后在 main.js 中使用它：

这样，你就成功地将 Element UI 的引入和使用抽离到了 src/plugins/ElementUI.js 文件中，并在 main.js 中进行了引入和使用。这有助于保持你的 main.js 文件更加简洁，并且让你的插件和配置更加模块化。

首先，确保你的项目中已经安装了 axios。如果没有，请在项目根目录下运行以下命令进行安装：

或者，如果你使用 yarn：

在 src/utils/axios.js 文件中，创建并配置 axios 的实例，并封装一些通用的请求方法：

在 src/api 文件夹下创建对应的接口文件，比如 users.js，并封装具体的接口请求：

在你的 Vue 组件中，你可以直接引入并使用这些封装好的 API 函数：

在上述的 handleSubmit 方法中，我们处理了登录接口的响应。根据后端返回的响应数据，我们可以判断登录是否成功，并相应地执行不同的逻辑。同时，我们也捕获了可能发生的请求错误，并打印了错误信息。

如果你的 API 请求需要不同的基础 URL（比如开发环境和生产环境），你可以使用 Vue CLI 的环境变量功能。在项目的根目录下创建 .env.development 和 .env.production 文件，并在其中设置 VUE_APP_BASE_API 变量。这样，你就可以在 axios.js 文件中引用这个变量来设置 baseURL。

例如，在 .env.development 中：

在 .env.production 中：

确保在 axios.js 文件中使用 process.env.VUE_APP_BASE_API 来读取这个变量。

在 src/utils/axios.js 文件中，你可以添加请求和响应的拦截器，用于处理一些通用的逻辑，比如添加请求头、处理响应数据格式、统一处理错误等。

注意事项

这样，你就完成了 axios 的整合和使用，并封装了登录接口到 src/api/users.js 文件中。现在你可以在你的 Vue 组件中方便地调用这个接口，并进行后续的逻辑处理。