Vue新⼿学习笔记：vue-element-admin之⼊门开发教程
（v4.0.0之后）
由于 vue-element-admin 的架构再 4.0.0 版本后做了重构，所以写这个⽂章，对改动⽐较⼤的部分做个讲解，⽅便⼤家⼊门学习。虽说项⽬做了重构，但是整体结构上和之前的还是很相似的，所以有些和之前差不多的我会直接放之前⽂章的链接
由于 Markdown 实在不太会⽤，这⾥⼿动列下⽬录，毕竟东西有点杂
安装&准备⼯作&ESLint配置
连接后台真数据
Mock 假数据
不需要 Mock 虚拟数据怎么办？
前端
登陆功能
⾃定义 vuex 参数
Mock 数据部分代码
安装&准备⼯作&ESLint配置
新手学做视频教程全集安装&准备⼯作&ESLint 部分：
这个就不多做讲解了，可以直接参考之前的⽂章，写的应该算详细了，这⾥只对下⾯ 4 个内容做个说明
node&npm 版本要求：
都知道框架对这两点是有要求的，那么最低要求要达到哪呢？
最下⾯：
这个是官⽅项⽬⾥的 package.json ⽂件，别⼈说的都不⼀定对，毕竟版本会迭代，⾃⼰看才是最实在的
i18n 国际化：
⼤部分⼈下的代码都是 master 分⽀的代码，照官⽅的说法国际化的功能被单独拿出来开了个分⽀，所以需要这个功能的要去下
i18n 分⽀的代码
要下分⽀代码的可以看这篇：
命令：
新版本的命令和旧版本的略有不同，还加了些命令，有兴趣的可以试下，具体的可看 package.json ⽂件
# 发布
# 本地环境启动
npm run dev
# 构建测试环境
npm run build:stage
# 构建⽣产环境
npm run build:prod
# 其它
# 预览发布环境效果
npm run preview
# 预览发布环境效果 + 静态资源分析
npm run preview -- --report
# 代码格式检查
npm run lint
# 代码格式检查并⾃动修复
npm run lint -- --fix
启动访问报错 404：
我在新项⽬启动登陆报错，那是因为官⽅ mock 只在正式环境启⽤，我在 i18n 分⽀遇到的，缺⼼眼？
打开⽂件 src/main.js 把环境判断去掉
连接后台真数据
这个是很多⼈都关⼼的，我看了⽹上很多⽂章都是直接去 fig.js 去配 proxy，这并不是正确的配置⽅法。还记得上个版本有分出各个环境的配置⽂件配置的，怎么可能这个版本就没有了？官⽅是有提供配置⽂件的
.env.development：本地
.env.staging：测试环境
.env.production：正式环境
PS：这⾥唯⼀注意的就是旧版本是⽤⽤冒号连接，这⾥是等于，写错了就拿不到路径
src/utils/request.js 在请求⾥打印看看
打印：拿到说明配置正确
PS：其他的静态配置都可以在这个⽂件⾥配置，⽐如⼀些静态⽂件路径之类的
Mock 假数据
为了更好的说明，这⾥使⽤的⽰例为⾃⼰写的，不是项⽬⾥带的，先⼤致列下项⽬对应⽂件，具体代码放⽂章结尾这⾥ service ⽂件夹⾃⼰建的，就是个简单的分页列表⽰例
vue页⾯⽂件：/src/views/service/index.vue
api接⼝：/src/api/service/index.js
PS：可能很多⼈觉得 api ⽂件多余，直接在页⾯写路径，但是⽤ api ⽂件在路径上更⽅便管理，这点在微服务中通过特定服务名去访问显得尤为明显，类似这种：
mock 虚拟数据⽂件：/mock/service/index.js
mock 数据加载⽂件（这个原来就有）：/mock/index.js
流程说明：
页⾯接⼝先去请求 api ⽂件
vue页⾯⽂件
api接⼝
在 api 请求时会被 mock 拦截，先来看下 mock 数据
可以看到新版本在路径拦截⽅⾯做了优化，⽐之前的版本配置好理解
mock/index.js 中如果需要拦截就会被拦截
下拉可以看到，这⾥循环了 mocks 把这个页⾯⾥所有有配置的接⼝都进⾏了拦截
不需要 Mock 虚拟数据怎么办？
很简单，两个字：注掉，这样就不会拦截了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。