基础环境搭建

一:目录结构

小结:
src目录：在做项目时，最关注的就是src目录, 里面是所有的源代码和资源
非src目录: 一般都是对项目的环境和工具的配置

二:main.js

入口 → new Vue(vue实例化)
　　　　👇

• 1.挂载路由-router

• 2.挂载Vuex-store

• 3.全局注册Element

• 4.App.vue根组件

三:App.vue

根组件
入口 → new Vue(Vue实例化)
　　　👇

• 挂载路由 - router
• 挂载Vuex-store
• 全局注册 - Element
• App.vue根组件 　👉
  　　　　　　　　　　👇
  　　　　　　router-view(一级路由器)
  　　　　　　　　　　👇
  ⇨ - Layout（布局组件）
  　　　　　⤴
  
  　 - Login（登录）　 - 404　⇦

四:permission.js

是控制页面登录权限的文件，在main.js中引入了它

五:settings.js

三个属性 title(项目名称)，fixedHeader（固定头部），sidebarLogo（显示左侧菜单logo）

六:Vuex

七:icons

八:sass、scss、less、css的区别

less, sass, scss都是css预处理语言（也是对应的文件后缀名），它们的语法功能比css更强大
预处理语言使用 ：开发时用预处理语言，在打包上线时，用webpack再配合loader工具给转成css（Cascading Style Sheets）给浏览器使用。

细节:

1. 后缀名：SASS（Syntactically Awesome StyleSheets）版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss

2. 语法规范：
   sass没有{}和;, 有严格的缩进规范 ;

   scss和css的缩进规范是一致的

九:变量

定义 : sass 使用 $ 符号来标识变量

$highlight-color: #f90;
$basic-border: 1px solid black;

使用

#app {
    background-color: $highlight-color;
  	border: $basic-border;
}  

十:嵌套语法

和 less 一样可以转化

十一:模块

多个.scss文件可以相互引用。在一个.scss文件(base.scss)定义多个变量，然后在另一个.scss（test.scss）中引入这个文件，就可以使用其中定义的变量了

十二:格式

@import './xxxx.scss';

十三:axios拦截器

十四:响应拦截器

响应拦截器主要处理 返回的**数据异常** 和**数据结构**问题

十五:封装内容

• axios.create
• 请求拦截器
• 响应拦截器

十六:api模块单独封装

使用封装的request工具，每个接口的请求都单独导出了一个方法，这样做的好处就是:
1 : 每一个文件就是一个业务对应的所有服务请求接口汇总,清晰明了,查找方便(方便维护)
2 : 任何一个业务组件中如果想使用哪个接口直接导入即可(方便复用)
3 : 语义化清晰,维护方便(命名即注释)

示意图

十七:mock功能的使用和删除

含义:真的假数据

使用:(一) 创建mock接口
　👇

(二) 调用mock接口

• 在项目中的组件中正常使用ajax发送请求即可;
• 用测试工具来做测试

删除mock

具体做法: (一) 注释掉mock数据的代码

(二) 删除**src/mock**文件夹