vue-element-admin部署,vue element admin vue3.0
本文主要介绍vue-element-admin开发教程(v4.0.0之前)，通过示例代码介绍的非常详细，对大家的学习或者工作都有一定的参考价值。有需要的朋友下面和边肖一起学习。
目录
安装下载vue-element-admin，开始准备工作。建议用中文安装一些有用的扩展ESLintdev.env.js/src/router/index.jsmock假数据页面。axios连接后台真实数据正规环境部署前端完整代码参考：说实话，都是逼出来的。对于前端没做过ES6又不会做的人来说，vue视频只是一些基础。
但是没有办法。接下来做微服务架构，前端用vue。你要对这个负责。都是泪，没见过脚手架架。
我完了，不过还好，我完了。在这里，我写下来给和我一样努力的同学们，让他们很快适应介绍。当然，一些基本的东西还是要知道的。
4.0.0版本调整说明：Vue新手学习笔记：vue-element-admin入门开发教程(4.0.0版本之后)
主要分为几个部分
安装准备工作模拟假数据页面axios连接后台真实数据正规环境部署前端完整代码肯定有问题，请指出。
安装
我推荐前端用vscode，比较好用。
Vscode官网
安装node.js和npm
Npm官方网站地址
下载节点，安装非常简单，按照下一步操作即可。
r在命令行输入中输入cmd。
节点v
npm -v
以上信息表明node.js和npm安装成功。
下载 vue-element-admin，并启动
官方：https://github.com/PanJiaChen/vue-element-admin
框架中的组件样式可以在元素上找到。
元素：http://element-cn.eleme.io/#/zh-CN/component/table
可以直接下载压缩包，也可以通过git下载。
#克隆项目
git克隆https://github.com/PanJiaChen/vue-element-admin.git
#安装依赖项
npm安装
#设置淘宝仓库
npm安装-registry=https://registry . NPM . Taobao . org
#启动服务
npm运行开发
建造//建造相关
配置//配置相关
src //源代码
api //所有请求
资产//主题字体等静态资源。
组件//全球公共组件
指令//全球指令
滤波器//全局滤波器
图标//项目所有svg图标
—朗//国际语言
模拟/项目模拟/模拟数据
路由器//路由
店//全球店管理
风格//全球风格
utils //全局公共方法
厂商//公共厂商
观点//观点
App.vue //进入页面
main.js //门户加载组件初始化等。
permission.js//permission—管理
静态//第三方不打包资源。
Tinymce //富文本
.babelrc //babel-loader配置
eslintrc.js //eslint配置项
.gitignore //git忽略项目
网站图标。ico //网站图标图标
index.html//HTML—模板
包. json //包. json
准备工作
汉化
打开vscode后
Windows和Linux的快捷键是：ctrl shift p。
MacOS的快捷键是：command shift p
搜索配置语言，并选择下图中的第一个选项。
将“区域设置”:“en”修改为“区域设置”:“zh-cn”并保存文件。
选择左下方的扩展按钮，搜索如下图中文安装所示的插件。
安装成功后，重启vscode，语言将改为中文。
推荐安装一些好用的扩展
自动关闭标签自动关闭HTML标签。
自动重命名标签在修改HTML标签时会自动修改匹配的标签。
美化代码美化
ESLint ESLint插件，高亮提示
文件查看根据路径字符串快速定位文件。
HTML CSS支持CSS提示(vue支持)
HTMLHint HTML格式提示
JavaScript (ES6)代码片段ES6语法代码片段
Vetvue代码突出显示和完成
颜色选择器与颜色选择器
完成Vue2片段Vue 2代码
在浏览器中打开浏览器预览。
ESLint
刚开始很难用，报错也很疯狂。那是因为搭配不好。匹配后会自动纠正一些小问题。当它得救的时候。
文件首选项设置搜索ESLint在setting.json中点击编辑粘贴进去，保存，就大功告成了。
{
files.autoSave: off ，
eslint.validate: [
javascript ，
javascriptreact ，
vue-html ，
{
语言: vue ，
自动修复:真
}
],
eslint.run: onSave ，
eslint.autoFixOnSave: true
}
dev.env.js
我们先来看看config文件夹中的dev.env.js。
该文件夹中BASE_API的后台接口是公共路径。调整背景的时候记得换。这是本地的，其余的prod和sit分别封装在正式环境和测试环境中。
/src/router/index.js
我们先看看目录吧。
详细的解释在这个目录文件的最上面，每个属性的意思都可以在上面看到。
mock 假数据页面
Mock主要是帮助分离出来的项目为前端提供数据，以便测试。
我们来画一个页面，分页列表，路径/src/service/dataLog.vue用来显示一些信息。
我在元素组件里找到了列表函数和分页函数。
/src/service/dataLog.vue
dataLog.vue的模板部分
模板
div class=应用程序容器
！-查询框双向绑定到关键字-
el输入
v-model=keyword
Placeholder=请输入关键字
可清除的
style=width:500px /
！-搜索按钮绑定单击事件-
El-button type= primary icon= El-icon-search @ click= get datalog() search/El-button
！-数据用于绑定数据-
el表
:data=dataLog
style=宽度：100%
el-table-column type=expand
模板插槽-scope=props
El-form label-position= left inline class= demo-table-expand
El-form-item label=错误消息
span{{ props.row.log }}/span
/El-表单-项目
/el格式
/模板
/El-表格-列
El-表格-列
Label=服务单
prop=data/
El-表格-列
Label=时间
prop=time/
/el-table
！-分页-
页码
v-show=total0
:total=total
:page.sync=listQuery.page
:limit.sync=listQuery.limit
@pagination=getDataLog /
！-文章总数
page当前页面
ListQuery.limit，每页有多少条目？
获取getDataLog后，购买点击分页时回调的功能-
/div
/模板
注意，模板下只能有一个节点，两个节点会被报错。可以试试，所以我放在统一的div里。
至于为什么要这样写这些值，我只能说按照别人给的模板改就好了。别人写什么你就写什么，上面有各种风格。
风格部分就不贴了。最后我会贴出完整的代码。我们来看看js部分。
这里，解释一下分页。分页初始化为第1页，每页10页。之后，每点击一次页码，数据就会被双向绑定到值上。你调后台功能的时候，直接取页面和限值就行了。我不想考虑如何获得div上的数字。
脚本
//这里我要调用我使用的api
//要用的函数接口在括号里，如果不止一个，用逗号隔开。
从“@/api/service/dataLog”导入{ getDataLog }
//引入分页组件
从“@/components/Pagination”导入分页
导出默认值{
//分页组件需要在这里注册。
组件：{分页}，
data() {
返回{
//搜索关键字
关键词： ，
//数据数量
总计：0，
//分页参数
列表查询：{
第1页，
限制：10
},
//列表数据
数据日志：[]
}
},
//这是生命周期函数。这时候数据和方法都初始化了，就看基础知识了。
已创建(){
this.getDataLog()
},
方法：{
//功能部分
getDataLog() {
//参数
this.listQuery={
page: this.listQuery.page，
limit: this.listQuery.limit，
对象：this.keyword
}
//在上面介绍的api中调用getDataLog
//不介绍就报函数未定义。一开始，我一个人折腾了很久。我在这里明确定义了。为什么我还没有定义它？
getDataLog(this.listQuery)。然后(response={
//返回值处理
this.dataLog=[]
this.total=response.data.total
this . datalog=response . data . items
//查询结束后，该关键字应被清除。
this.keyword=
})
}
}
}
/脚本
我们来看看上面的api接口。
/src/api/service/dataLog.js
每次点击都会调用api接口中的方法，参数可以理解。
上面引用的请求文件会在每次调用请求时拦截请求，上面的BASE_API会在其中拼写。
从“@/utils/request”导入请求
//获取错误消息列表
导出函数getDataLog(查询){
退货请求({
URL:“/log/get datalog”，
方法：“get”，
参数：查询
})
}
/src/mock/service/dataLog.js
接下来，我使用了模拟假数据，所以我循环了10个片段，因为实现假分页太费力了。
如果有多个接口要返回，可以在export default中编写多个接口来返回。
从“mockjs”导入模拟
const List=[]
常量计数=10
//模拟错误消息
for(设I=0；我数；i ) {
List.push(Mock.mock({
数据：“12987122”，
时间：“好吃的鸡蛋”，
日志：江浙小吃，小吃小吃江浙小吃，小吃小吃
}))
}
导出默认值{
//获取错误消息列表
getDataLog: ()={
返回{
总计：List.length
项目：列表，
限制：10
}
}
}
/src/模拟/索引. js
上面写完还不够，因为mock不知道哪些请求需要通过api请求假数据，都需要在索引文件中截取。
直接加就行了，就这两行，引用刚才写的假数据，拦截请求。
第一个参数，要拦截的url，链接到这里的api。
第二个参数，get类型请求
第三个参数，export in/src/mock/service/datalog . js对应的接口，也链接了mock fake数据。
根据需要写尽可能多的请求。
然后npm run dev运行测试。
axios 连接后台真数据
我在这里很懒。由于utils/request.js已经帮我们修复了axios，像BASE_api的路径拼接，而且我也不想再写一个api文件，就拿过来用了。
先介绍一下
从“@/utils/request”导入请求
零件js:
方法：{
getDataLog() {
this.listQuery={
page: this.listQuery.page，
limit: this.listQuery.limit，
对象：this.keyword
}
//模拟请求假数据
//getDataLog(this.listQuery)。然后(response={
//this.dataLog=[]
//this . total=response . data . total
//this . datalog=response . data . items
////关键字应该在查询后清除。
//this.keyword=
//})
//请求后台获取真实数据
请求({
URL:“/log/get datalog/”，
方法： post ，
数据：this.listQuery
}).然后(response={
this.dataLog=[]
this . total=response . data . page entity . total
this . datalog=response . data . retdata
})
}
}
这里访问路径就是http://127 .0 .0 .1:8081/log/get datalog，如果全路径访问也是可以的，网址前面带了"/"意思就是会进行路径的拼接，如果写的是URL:“记录/获取数据日志”那么访问就报错了，因为前缀没拼上，还有要把模拟的里的索引。射流研究…文件里的注掉，要不会拦截变成假数据
这里用的是邮政方法，后台部分直接用@请求体接收参数就好了
也可以用得到方法，把参数拼在全球资源定位器(统一资源定位器)上传递，我这采用安静的形式的接口，用@路径变量接收参数
这时候你可能会遇到跨域问题
新建配置包
@配置
公共类CorssDomainConfig实现webmvc配置器{
@自动连线
private CorsInterceptor CorsInterceptor；
@覆盖
public void addInterceptors(InterceptorRegistry注册表){
拦截器注册。添加拦截器(corsInterceptor)；
注册。addpath模式(/* * )；
}
}
然后新建拦截机包
@组件
公共类交叉感受器扩展HandlerInterceptorAdapter {
@覆盖
公共布尔预处理(HttpServletRequest请求、HttpServletResponse响应、对象处理程序)
引发异常{
//添加跨域克-奥二氏分级量表
回应。set header( Access-Control-Allow-Origin ， * )；
回应。set header( Access-Control-Allow-Headers ， Origin，X-Requested-With，Content-Type，Accept，Authorization，token，X-token))；
回应。set header( Access-Control-Allow-Methods ， GET，HEAD，POST，PUT，DELETE，TRACE，OPTIONS，PATCH )；
返回真实的
}
}
项目再启动时，添加感受器就会把预处理给注册成对象，后续请求都会经过预处理接口对请求做出处理
正式环境部署
我这前端采用Nginx作为前端的运行容器
详细部署：码头工人上部署Nginx
我Nginx html文件夹下我保留了距离目录
所以/conf。d/默认值。主配置文件要改下
vue 里 config/sit.env.js，这里我配置了测试服的，然后在 prod.env.js 配置了正式服的
模块。导出={
节点环境："生产",
ENV_CONFIG: sit ，
//项目访问根路径
//测试服
BASE _ API: http://xx。xx。XXX。XXX:xxxx ，
}
#测试服打包
新公共管理运行构建：坐下
#正式服打包
新公共管理运行构建：生产
命令就在package.json里
打包后会在根目录生成距离文件夹，把文件夹放到服务器的超文本标记语言文件夹下就好了，然后启动Nginx，启动过就不用启动了，由于我Nginx直接配置了80 端口的，所以直接服务器路径访问就行了
PS:如果遇到了打包报错的情况，那就把新公共管理更新下新公共管理安装，这会在项目根目录生成节点_模块文件夹，这些是需要的依赖，在Linux操作系统操作系统上打包我这试了不行，依赖更新了也不对，不知道问题出在哪，应该是窗子和Linux操作系统操作系统依赖不太一样吧
前端完整代码
/src/views/service/dataLog.vue
模板
div class=应用程序容器
！-查询框双向绑定关键词-
埃尔输入
v-model=keyword
占位符=请输入关键字
可清除的
style=width:500px /
！-搜索按钮-
El-button type= primary icon= El-icon-search @ click= get datalog()搜索/el-button
！-数据就是绑定数据用的-
埃尔表
:data=dataLog
高度=600
style=宽度：100%
el-table-column type=expand
模板插槽-scope=props
El-form label-position= left inline class= demo-table-expand
El-表单-项目标签=错误信息
div v-html=props.row.log/
/El-表单-项目
/el格式
/模板
/El-表格-列
埃尔-表格-列
标签=服务单
prop=data/
埃尔-表格-列
标签=时间
prop=time/
/el-table
！-分页-
页码
v-show=total0
:total=total
:page.sync=listQuery.page
:limit.sync=listQuery.limit
@pagination=getDataLog /
！-总计总条数
listQuery.page当前页
listQuery.limit每页几条
getDataLog后买点击分页时候要回调的函数-
/div
/模板
脚本
//从" @/API/服务/数据日志"导入{ getDataLog }
从" @/组件/分页"导入分页
从" @/实用工具/请求"导入请求
导出默认值{
组件：{分页},
data() {
返回{
//搜索关键字
关键词： ,
//数据条数
总计：0,
//分页参数
列表查询：{
第一页，
限制：10
},
//列表数据
数据日志：[]
}
},
已创建(){
this.getDataLog()
},
方法：{
getDataLog() {
this.listQuery={
page: this.listQuery.page，
limit: this.listQuery.limit，
对象：this .关键字
}
//模仿请求假数据
//getDataLog(this.listQuery).然后(响应={
//this.dataLog=[]
//这个。总计=响应。数据。总数
//这个。datalog=响应。数据。项目
////查询后要把关键字给清空
//this.keyword=
//})
//请求后台获得真实数据
请求({
URL:"/log/get datalog/"，
方法： post ，
数据：this.listQuery
}).然后(响应={
this.dataLog=[]
这个。总计=响应。数据。页面实体。总数
这个。datalog=响应。数据。retdata
})
}
}
}
/脚本
风格。演示-表格-展开{
字体大小：0;
}。演示表-展开标签{
宽度：90px
颜色：# 99 a9 BF
}。演示-表格-展开100 . El-表单-项目{
右边距：0;
边距-底部：0;
宽度：50%;
}
/风格
/src/api/service/dataLog.js
从" @/实用工具/请求"导入请求
//获取错误信息列表
导出函数getDataLog(查询){
退货请求({
URL:"/log/get datalog "，
方法：“得到”，
参数：查询
})
}
/src/模拟/服务/索引。射流研究…
拦截原因，请求后台就注掉
//嘲弄。mock(/\/log \/get datalog/， get ，dataLogAPI.getDataLog)
/src/mock/service/dataLog.js
从“莫克杰”导入模拟
const List=[]
常量计数=10
//模拟错误信息
对于(设I=0；我数；i ) {
List.push(Mock.mock({
数据："12987122",
时间： 好滋好味鸡蛋仔，
日志： 江浙小吃、小吃零食江浙小吃、小吃零食
}))
}
导出默认值{
//获取错误信息列表
getDataLog: ()={
返回{
总计：列表.长度
项目：列表，
限制：10
}
}
}
参考：
https://blog.csdn.net/brucelpt/article/details/82994332
到此这篇关于vue-元素-管理开发教程(4.0.0版之前)的文章就介绍到这了，更多相关vue-元素-管理开发教程内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。