vue-element-admin 新手学习笔记 - (1）

小白的一点点小小经验，大神手下留情，如有不好的地方，或者不对的地方请大家多多指教

因为本人是用 vue-element-admin 来做的，所以就用vue-element-admin 来说，但是推荐使用 vue-admin-template

1：项目初始化

vue-element-admin

vue-element-template

vue-element-admin 文档

先从给git上下载下来vue-element-admin，然后 npm install ， npm run dev 这样项目就运行起来了。

2：项目配置

1. 如果该项目上的页面都是不需要用到的，则可在src/views下面删除该页面，只剩余dashboard、error-page、login、redirect。
2. 在src/router/index.js中删除路由配置，保留上述1中所说的剩余页面的路由配置

   

3. 在src/settings.js中设置

   title : 设置项目的标题，

   

   

   showSettings： 设置控制面板是否显示

   

   fixedHeader: 头部是否固定，

   

   sidebarLogo： 左侧菜单栏顶部的图标是否显示

   

4. 由于该项目中的所有请求用的是mock.js，所以如果要连接后台调试，在vue.config.js中先把mock注释掉，然后配置接口域名，在找到devServer中配置，

   

   

   端口号配置

   

5. 完成上述配置之后开始运行项目，这是点击登录会调不到接口是由于vue.config.js中把

   mock去掉了，这时先看一下登录接口代码，src/views/login/index.vue，从handleLogin中可以看出来在点击登录后通过校验会进入stroe中modules下面的user中的actions中login方法里，

   

   在login中可以看到通过调用login接口(登录接口在src/api/login)，把获取到的token存储起来，setToken函数是把token存储到cookie中的一个方法，在src/utils/auth.js中可以看到

   

   在登录获取到token后跳转路由前会去做一些验证，

   参考-https://blog.csdn.net/weixin_43564110/article/details/105117991

3：axios讲解

• 该项目中在utils下面的request.js中自定义了一个axios, axios.create创建一个新的axios,timeout:这是请求超时的时间，withCredentials 是跨域请求时可以携带cookie,

  

  请求拦截器，可通过config.headers设置请求头, 当然这个是看各自项目的需求，由于本人的项目中需要修改请求头中的content-Type

  

  在修改完content-Type后传参给后台是字符串，但是需要的是key=value形式的，所以这时可以就用到了qs, 在改项目中安装qs, 然后在请求拦截器中设置，

  

  响应拦截器，按照各自项目的要求修改状态码