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

---

一、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
1
2
3
4
5
6
7

如果上面的 install 报错

则先执行下面的命令，再install

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

二、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
2
3
4
5
6
7

三、前端框架了解

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 平台地址无效，导致前端的登录功能无法执行