一、vue-element-admin
A、简介
vue-element-admin 是基于 element-ui 的一套后台管理系统集成方案。
GitHub地址:https://github.com/PanJiaChen/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 报错
则先执行下面的命令,再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
建议:你可以在 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 (拥有完整的功能的插件)
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 配置文件所在位置
B、build/webpack.dev.conf.js
webpack 配置文件,包含项目在开发环境打包和运行的相关配置
webpack.dev.conf.js 中引用了 webpack.base.conf.js
webpack.base.conf.js 中定义了项目打包的入口文件
在 HtmlWebpackPlugin 配置 html 模板,生成的 js 就会自动插入到模板中,如下面的配置。
因此生成的 js 文件会被自动插入到名为 index.html 的页面中
C、index.html
项目默认的 html 页面
D、src/main.js
项目 js 入口文件,项目的所有前端功能都在这个文件中引入和定义,并初始化全局的 Vue 对象。
E、config/dev.env.js
定义全局常量值
因此,在项目中的任意位置可以直接使用 process.env.BASE_API 常量表示后端接口的主机地址
F、src/utils/request.js
引入 axios 模块,定义全局的 axios 实例,并导出模块
G、src/api/login.js
引用 request 模块,调用远程 api
四、临时登录接口
前端登录问题
默认情况下,前端项目已经实现了登录功能,后端连接到远程 Mock 平台的模拟数据接口进行登录,而 Mock 平台地址无效,导致前端的登录功能无法执行