开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：项目前端页面框架介绍】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11329
项目前端页面框架介绍
内容介绍：
一、前端页面环境说明
二、目录结构
一、前端页面环境说明
1.前端框架入口
（1）前端后端程序项目都有个入口。比如后端接口一般是 main 方法，而现在这个前端也有入口，两个地方，第一个地方是一个 HTML 文件。
但是里边没有写什么东西，是一个普通的页面，里面有 div。
（2）还有一个入口在 src，有个 main.js 文件
（3）html 中只写了 div 用于显示
在 main.js 中引入了其他组件，创建了 Vue 对象做操作。
2.前端页面环境使用框架（模板），基于两种技术实现出来。
（1）对这两种技术做了封装，让开发更加的简洁，更加简单。但是不是只有两种，主要是基于两种技术做到的。
Vue-admin-template 模板 = vue + element-ui
二、目录结构
共有五个目录如下：
1.框架 build 目录--放项目构建的脚本文件
Build 有构建或者创建的意思。这个目录表示项目运行时一些项目构建或者项目编译。
类似于 Java 中的 class 文件，是编译的一些代码。这些东西不需要改。
2.config 目录
Config 有配置的意思。主要是项目中一些最基本的设置。
（1）其中 index 文件是项目中最基本配置，例如默认端口号是9528，可以改成别的端口。当前主机或 IP，是本地 localhost 或者改成 IP，这些可以在里边做修改。
（2）index 里边有 useEslint:true,统一改成 false。
ESLint 是一个插件，做代码格式整理或者代码格式检查，也就是做代码的检查工具。但不建议装这个东西，因为它有一个缺点检查太严格了。
比如代码中多了一个空格、多了很多换行，这些应该没有错，但是它会把这个也作为错误执行。所以改成 false。不改的话写代码的时候要特别注意。
（3）另外两个文件：dev.env.js，prod.env.js，针对环境，是开发环境或者测试环境
dev.env.js 修改访问后端地址,其中
“http://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin”
表示当前要访问的接口的地址，这是默认地址。后面要改成本地，比如本地 localhost8001的地址。
3. node_modules 目录
下载的依赖在这里都存在
4. Src 目录
（1）第一个 api ——定义调用方法，比如添加修改删除
重要部分，更改得地方很多，在里边会一直定义方法。
（2）第二个 assets ——放静态资源。比如 css 文件，js 文件或者相关项目中的图片。
（3）components——放一些插件或者组件。
比如当前这个框架，程序员觉得里边有一个东西没有做到，想用一些额外的框架引进来，就需要放这个目录里。
（4）icons——放项目中使用到的图标
（5）router——路由部分
也是一个重要部分
（6）store——这个没什么用，里面主要放一些相关脚本文件。
（7）styles——放样式文件
（8）utils——在这个框架中一些相关的工具类，比如权限、请求的等等。
（9）views——项目中具体的页面部分，
里面默认自带一些页面，都是 vue 后缀名。后面创建也是用 vue 来进行创建。
用框架的目的是为了少写代码，更快的做出功能。可以极大提高开发效率。
需要做的主要过程是定义请求的方法和路径，在 router 里写路由，最后页面中做调用，再来实现这个过程。
5.static——放一些资源,一般用不到。
