尚医通 (十四) --------- vue-element-admin 与前端框架

迷南。 2024-04-01 16:30 33阅读 0赞

#### 目录 ####

*  一、vue-element-admin
 *  二、vue-admin-template
 *  三、前端框架了解
 *   *  1. 目录结构
     *  2. 关键文件
 *  四、临时登录接口

--------------------

## 一、vue-element-admin ##

**A、简介**

vue-element-admin 是基于 element-ui 的一套后台管理系统集成方案。  
GitHub地址：[https://github.com/PanJiaChen/vue-element-admin][https_github.com_PanJiaChen_vue-element-admin]  
项目在线预览：[https://panjiachen.gitee.io/vue-element-admin][https_panjiachen.gitee.io_vue-element-admin]

**B、安装**

# 解压压缩包
    # 进入目录
    cd vue-element-admin-master
    # 安装依赖
    npm install
    # 启动。执行后，浏览器自动弹出并访问http://localhost:9527/
    npm run dev

如果上面的 install 报错

![在这里插入图片描述][30cebd775c2c4b13a17fc4a88cef8f75.png]  
则先执行下面的命令，再install

npm i -g node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

## 二、vue-admin-template ##

**A、简介**

vueAdmin-template 是基于 vue-element-admin 的一套后台管理系统基础模板 (最少精简版)，可作为模板进行二次开发。

GitHub地址：[https://github.com/PanJiaChen/vue-admin-template][https_github.com_PanJiaChen_vue-admin-template]

> 建议：你可以在 vue-admin-template 的基础上进行二次开发，把 vue-element-admin当做工具箱，想要什么功能或者组件就去 vue-element-admin 那里复制过来。

**B、安装**

# 解压压缩包
    # 进入目录
    cd vue-admin-template-master
    # 安装依赖
    npm install
    # 启动。执行后，浏览器自动弹出并访问http://localhost:9528/
    npm run dev

## 三、前端框架了解 ##

### 1. 目录结构 ###

vue-element-admin-master (拥有完整的功能的插件)

![在这里插入图片描述][94daf7411b754e3fb5947729280096e8.png]

### 2. 关键文件 ###

vue-admin-template-master (源码相对简单，我们的后台管理系统基于这个版本)

**A、package.js**

npm 项目的核心配置文件，包含项目信息，项目依赖，项目启动相关脚本，启动项目的命令 ： `npm run dev`  
dev脚本：`webpack-dev-server --inline --progress --config`

build/webpack.dev.conf.js

webpack-dev-server ：一个小型的基于 Node.js 的 http 服务器，可以运行前端项目

*  `--inline`：一种启动模式
 *  `--progress`：显示启动进度
 *  `--config build/webpack.dev.conf.js`：指定 webpack 配置文件所在位置

![在这里插入图片描述][b6cd0b8b345f4227957eca70ac3b8018.png]  
**B、build/webpack.dev.conf.js**

webpack 配置文件，包含项目在开发环境打包和运行的相关配置  
webpack.dev.conf.js 中引用了 webpack.base.conf.js  
webpack.base.conf.js 中定义了项目打包的入口文件

![在这里插入图片描述][7cf00f717ec849b785071dc82e193c51.png]  
![在这里插入图片描述][e2c8a616080c4ff68edbf4e495613130.png]  
在 HtmlWebpackPlugin 配置 html 模板，生成的 js 就会自动插入到模板中，如下面的配置。

因此生成的 js 文件会被自动插入到名为 index.html 的页面中

![在这里插入图片描述][51c6c360160e41609a6c21022fb090e6.png]

**C、index.html**

项目默认的 html 页面

![在这里插入图片描述][d42f9fa4fffd41f4a3b34db02c07e009.png]  
![在这里插入图片描述][a4b271e53d464b20993fca3db295a3b0.png]

**D、src/main.js**

项目 js 入口文件，项目的所有前端功能都在这个文件中引入和定义，并初始化全局的 Vue 对象。

![在这里插入图片描述][1101a99fa17b409f9189ed3a65d9e1b6.png]

**E、config/dev.env.js**

定义全局常量值

![在这里插入图片描述][511cdec9f0bb4aaba143772796fb4f70.png]  
![在这里插入图片描述][61b2eb2c19334607add9f7c968be3364.png]  
因此，在项目中的任意位置可以直接使用 process.env.BASE\_API 常量表示后端接口的主机地址

**F、src/utils/request.js**

引入 axios 模块，定义全局的 axios 实例，并导出模块  
![在这里插入图片描述][59c2b267b0454a0787c6feb7c76e8587.png]  
**G、src/api/login.js**

引用 request 模块，调用远程 api

![在这里插入图片描述][e8968eba9d244bb68db559d302051d78.png]

## 四、临时登录接口 ##

**前端登录问题**

默认情况下，前端项目已经实现了登录功能，后端连接到远程 Mock 平台的模拟数据接口进行登录，而 Mock 平台地址无效，导致前端的登录功能无法执行

![在这里插入图片描述][313a5b1a979d4889becd3b02fda4ec24.png]

[https_github.com_PanJiaChen_vue-element-admin]: https://github.com/PanJiaChen/vue-element-admin
[https_panjiachen.gitee.io_vue-element-admin]: https://panjiachen.gitee.io/vue-element-admin
[30cebd775c2c4b13a17fc4a88cef8f75.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/aec09fbfbf3d4c7ca1e4960b122ace46.png
[https_github.com_PanJiaChen_vue-admin-template]: https://github.com/PanJiaChen/vue-admin-template
[94daf7411b754e3fb5947729280096e8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5cc780a0483a40569a5fb7d7e9b1cd99.png
[b6cd0b8b345f4227957eca70ac3b8018.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/28cb6ab5568a40dc9078a4fc6cf4f883.png
[7cf00f717ec849b785071dc82e193c51.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/aede4e44ef8447ce84ee066ea3833b33.png
[e2c8a616080c4ff68edbf4e495613130.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9365fabde16c4f63b88311f157d7a227.png
[51c6c360160e41609a6c21022fb090e6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5ea5332e17224b4eaf130038e6df6a68.png
[d42f9fa4fffd41f4a3b34db02c07e009.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b035668d168d4bdfa11740440c67d2f5.png
[a4b271e53d464b20993fca3db295a3b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/44fc91ef616042ac9ae7df1e2b8da75f.png
[1101a99fa17b409f9189ed3a65d9e1b6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/062a51123f1a40b99727fcabd860fdc2.png
[511cdec9f0bb4aaba143772796fb4f70.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3f65f3f827514600bbedf5211543c652.png
[61b2eb2c19334607add9f7c968be3364.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5b420d2d6f5d4ece9651bbd3300e6bf4.png
[59c2b267b0454a0787c6feb7c76e8587.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ffb4cf8383e147c387a7b3c07d5575dd.png
[e8968eba9d244bb68db559d302051d78.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/4591ee20b42746a9b131f078d37b1c15.png
[313a5b1a979d4889becd3b02fda4ec24.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8ca2433998d84a0e804095d0a5d1a30d.png