Vue-element-ui-admin 项目常见问题解决方案

Vue-element-ui-admin 项目常见问题解决方案

vue-element-ui-admin :maple_leaf: 一个基于Vue 3(ScriptSetup) + TS + Vite + ElementPlus + Pinia + VueRouter + Axios的后台模板，做了目录结构的整理和常用方法的封装，开箱即用 :) 项目地址: https://gitcode.com/gh_mirrors/vu/vue-element-ui-admin

一、项目基础介绍

Vue-element-ui-admin 是一个基于 Vue 3(ScriptSetup) + TypeScript + Vite + ElementPlus + Pinia + VueRouter + Axios 的后台管理模板。项目主要采用了 Vue 3 的最新特性，如 ScriptSetup，以及现代化的前端技术栈，旨在提供一个开箱即用的后台管理系统。项目的主要编程语言为 TypeScript 和 Vue。

二、新手常见问题及解决方案

问题1：如何配置和运行项目

问题描述：新手在下载项目后，不知道如何配置和运行。

解决步骤：

1. 确保已经安装了 Node.js 和 npm。
2. 克隆项目到本地：git clone https://github.com/xusenlin/vue-element-ui-admin.git
3. 进入项目目录：cd vue-element-ui-admin
4. 安装项目依赖：npm install 或 yarn install
5. 运行开发环境：npm run dev 或 yarn dev
6. 访问 http://localhost:3000，查看项目是否运行正常。

问题2：如何进行环境配置

问题描述：新手不知道如何修改项目环境配置，例如请求地址、API 等。

解决步骤：

1. 在项目根目录下，找到 env 文件夹，里面包含了不同环境的配置文件。
2. 根据需要修改 development、pre、production 或 test 文件中的配置，如请求地址等。
3. 重新启动项目，以应用新的配置。

问题3：如何添加新的页面

问题描述：新手在项目中添加新页面时，不知道如何操作。

解决步骤：

1. 在 src/pages 目录下创建一个新的文件夹，用于存放新页面的文件。
2. 在新文件夹中创建一个 Vue 单文件组件，例如 NewPage.vue。
3. 在 src/router/index.ts 文件中，添加新页面的路由配置。
4. 在父级路由中，添加 <router-view></router-view> 标签，用于展示新页面。
5. 重新启动项目，访问新页面路由，查看页面是否添加成功。

vue-element-ui-admin :maple_leaf: 一个基于Vue 3(ScriptSetup) + TS + Vite + ElementPlus + Pinia + VueRouter + Axios的后台模板，做了目录结构的整理和常用方法的封装，开箱即用 :) 项目地址: https://gitcode.com/gh_mirrors/vu/vue-element-ui-admin