vue-element-admin-master前端框架了解

一、前端框架了解

1、目录结构

vue-element-admin-master（拥有完整的功能的插件）

2、关键文件

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

2.1 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配置文件所在位置

2.2 build/webpack.dev.conf.js

webpack配置文件，包含项目在开发环境打包和运行的相关配置

webpack.dev.conf.js 中引用了 webpack.base.conf.js

webpack.base.conf.js 中定义了项目打包的入口文件


在HtmlWebpackPlugin配置html模板，生成的js就会自动插入到模板中，如下面的配置。

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

2.3 index.html

项目默认的html页面

2.4 src/main.js

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

2.5config/dev.env.js

定义全局常量值


因此，在项目中的任意位置可以直接使用 process.env.BASE_API 常量表示后端接口的主机地址

2.6 src/utils/request.js

引入axios模块，定义全局的axios实例，并导出模块

2.7 src/api/login.js

引用request模块，调用远程api

二、临时登录接口

1、前端登录问题

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