vue-element- admin,vue-element-admin部署
由于vue-element-admin的架构在4.0.0版本之后进行了重构，整体结构与之前非常相似，但是有一些变化。本文介绍了vue-element-admin(4 . 0 . 0版以后)的开发教程，有兴趣的可以看看。
目录
安装准备ESLint配置连接后台真实数据模拟假数据不需要模拟虚拟数据？前端拦截器登录函数自定义vuex参数Mock数据部分代码由于vue-element-admin的架构在4.0.0版本后进行了重构，所以写这篇文章来解释比较大的变化，方便大家学习。虽然对项目进行了重组，但整体结构和上一篇很像，所以对于一些类似的，我就直接放上之前文章的链接。
因为Markdown不是很有用，这里有一个手动列表。毕竟事情有点杂。
安装准备工作ESLint配置连接后台真实数据模拟假数据不需要模拟虚拟数据怎么办？前端拦截器登陆函数自定义vuex参数模拟数据部分代码
安装准备工作ESLint配置
安装准备ESLint: Vue新手学习笔记：vue-element-admin的安装、配置和入门开发(v4.0.0之前)
这个我就不多解释了。可以直接参考上一篇，应该写的比较详细。在这里，我只说明以下四个内容。
nodenpm 版本要求：
知道框架对这两点都有要求，最低要求应该在哪里满足？
如下所示：package.json
就是这个官方项目里的package.json文件，别人说的不一定对。毕竟版本会迭代，自己看才是最真实的。
i18n 国际化：
大部分人的代码是总支的代码。按照官方的说法，国际化功能已经单独拿出来开分行了，所以需要这个功能的人要下载i18n分行的代码。
Git 克隆指定分支的代码
克隆步骤：
获取你需要的项目的分支名称：比如i18n。
克隆项目：
# format: git clone -b分支名称URL
https://github.com/PanJiaChen/vue-element-admin.git git克隆-b i18n
-b表示从分支下载。
命令：
新版本的命令与旧版本略有不同，增加了一些命令。有兴趣的话可以试试。有关详细信息，请参见package.json文件。
#发布
#本地环境启动
npm运行开发
#构建测试环境
npm运行构建：阶段
#构建生产环境
npm运行构建：生产
#其他
#预览发布环境效果
npm运行预览
#预览静态资源发布环境效果分析
npm运行预览- -报告
#代码格式检查
npm运行lint
#代码格式检查和自动修复
npm运行lint -修复
启动访问报错 404：
当我开始登录一个新项目时，我报告了一个错误。这是因为官方模拟只在正式环境中启用。在i18n分支遇到的，是个缺心眼？
打开文件src/main.js删除环境判断。
连接后台真数据
这是很多人关心的问题。我在网上看了很多文章，直接去vue.config.js配置代理，这不是正确的配置方法。
我还记得上一个版本有每个环境的配置文件。这个版本怎么会没了？有官方配置文件。环境开发：本地。测试环境。env.production:正式环境
PS:这里唯一需要注意的是，这本书的老版本是用冒号连接的，这里等于。如果你犯了一个错误，你不能得到路径src/utils/request.js 。在请求拦截器中打印它。
打印：获取指令并正确配置它们。
PS:这个文件中可以配置其他静态配置，比如一些静态文件路径之类的。
Mock 假数据
为了更好的解释，这里用的例子是我自己写的，不是项目里的。先大致列出项目对应的文件，具体代码放在文末。
这里服务文件夹是自己建的，是分页列表的一个简单例子。
Vue页面文件：/src/views/service/index . vue api接口：/src/api/service/index . JSP:可能很多人觉得API文件是多余的，直接在页面上写路径，但是用API文件管理路径更方便，这在微服务中按特定服务名访问时尤为明显，比如这个：
模拟虚拟数据文件：/mock/service/index . js模拟数据加载文件(这个已经存在):/mock/index.js流程说明：
该接口首先请求api文件。
Vue页面文件
连接
api请求将被mock拦截。我们先来看看模拟数据。
可以看出，新版本在路径拦截方面进行了优化，比之前的版本更好理解。
需要拦截的话会拦截Mock/index.js。
正如您从下拉列表中看到的，这里循环模拟来截取该页面中所有已配置的接口。
不需要 Mock 虚拟数据怎么办？
很简单，两个字：记出来，这样就不会被拦截。
前端拦截器
路径：/src/utils/request.js
本文件分为三个部分。
Axios实例，所以不需要自己写。只要引用这个文件包，就可以看api了。
服务。拦截器. request.use请求拦截器
可以根据需要添加一些请求头之类的。
service . interceptors . response . use返回值拦截器
这里的逻辑不难说。
登陆功能
去掉那些无关的东西，比如规则检查，默认账号密码等等，直接看核心的登录方式。
/src/views/login/index.vue
逻辑很简单，登录参数验证调用商店中的登录方法，登录成功跳转到相应页面。
handleLogin() {
//登录验证
这个。$ refs . loginform . validate(valid={
//如果验证通过
如果(有效){
this.loading=true
//这里执行登录请求的登录方法。
//在src/store/modules/user.js中
这个。$store.dispatch(用户/登录，this.loginForm)。然后(()={
//otherQuery是您退出的页面，它将帮助您重定向回该页面。
这个。$ router . push({ path:this . redirect /，query: this.otherQuery })
this.loading=false
})。catch((errorMsg)={
this.loading=false
//登录失败提示
消息({
消息：错误消息，
类型：“错误”，
时长：5 * 1000
})
})
}否则{
console.log(错误提交！)
返回false
}
})
},
/src/store/modules/user.js login方法
在登录方法上，建议不要做超过操作，直接登录即可，因为在使用缓存的时候，vuex会像之前的版本一样刷新，所以需要采取getInfo方法来获取所需数据。如果按照框架走，建议这里取必要的权限数据，然后放vuex。那些打算直接放localStorage的应该忽略。
/src/views/permissions.js
与之前的版本一样，这个文件是您路由的逻辑。简单看一下重要的部分。
PS:这里对比一下自己的，会发现const {roles}=await是用原码写的。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。