1，在线教育前端工程环境搭建

1.1 :vue-element-admin概述

vue element admin 是基于 Element ui一个半成品项目，已经完成了通用功能。
- 封装了一些特有的js
- 封装了一些组件
vue-element-admin是基于element-ui 的一套后台管理系统集成方案。

功能：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#功能

GitHub地址：GitHub – PanJiaChen/vue-element-admin: A magical vue admin https://panjiachen.github.io/vue-element-admin

项目在线预览：Vue Element Admin

可从GitHub下载前端项目，进行改变以用来满足自己的对项目的需求

1.2：安装

从GitHub下载完成后对项目进行安装

在前端控制台:进入项目目录：cd .\vue-element-admin-master-pra\

安装依赖
npm install

安装完成后进行启动：npm run dev

2，优化前端工程的细节

2.1：修改前端工程的信息（可做可不做）

找到package.json文件

修改name，description，author

2.2：修改端口号（可做可不做）

在vue.config.js文件中可修改项目端口号

修改端口号的三种方式

第一种默认的地方修改：

第二种：npm 配置端口号（注意=等左右没有空格）启动时运行

npm run dev –port=8888

第三种：vue 运行环境（开发环境）中配置端口号

port=9999

2.3：前端目录结构介绍

.

├── build // 构建脚本

├── mock // 模拟数据服务

├── node_modules // 项目依赖模块 *

├── plop-templates // 模块生成工具

├── public // 静态资源目录，build之后，public目录下内容不合并，不压缩，直接拷贝到dist中

├── src //项目源代码 *

├── test // 测试程序目录

├── .env.development //开发环境下配置文件，VUE_APP_BASE_API访问路径前缀

├── .env.production //生产环境下配置文件，VUE_APP_BASE_API访问路径前缀

├── package.json // 项目信息和依赖配置 *

└── vue.config.js // vue的核心配置文件 *

src

├── api // 接口目录，发送ajax代码 *

├── assets //静态资源目录，在build时，资源进行压缩、合并等操作。

├── components //公共组件目录，非公共组件在各自view下维护

├── directive //指令目录

├── filters // 过滤器目录

├── icons //svg icon

├── router // 路由表 *

├── store // 存储 vuex *

├── styles // 各种样式

├── utils // 公共工具，非公共工具，在各自view下维护 *

├── views // 各种layout 项目中所有的页面都放在此处

├── vendor // 工具（excel、zip）

├── App.vue //项目顶层组件

├── main.js //项目入口文件

├── permission.js //认证入口

└── settings.js 项目内容配置文件（项目标题）