说实话都是逼出来的，对于前端没干过ES6都不会的人，vue视频也就看了基础的一些
但没办法，接下来做微服务架构，前端就用 vue，这块你负责。。。。说多了都是泪，脚手架框架布了都没看过
干就完事，不过好在做好了，这里写下给和我一样苦逼的同学能快点适应入门下，当然一些基础的东西还是要知道的
v4.0.0 版本的调整后讲解：Vue 新手学习笔记：vue-element-admin 之 入门开发教程（v4.0.0 之后）
主要分为几个部分

• 安装
• 准备工作
• mock 假数据页面
• axios 连接后台真数据
• 正式环境部署
• 前端完整代码

肯定有地方不太对的，麻烦大家指出来
安装 前端我推荐用 vscode 就是好用
vscode官网
安装node.js及npm
npm官网地址
下载node，安装很简单一直下一步就可以了。
win+R 输入cmd进入命令行 输入

node -vnpm -v

文章图片

出现以上信息说明node.js及npm安装成功
下载 vue-element-admin，并启动 官方：https://github.com/PanJiaChen/vue-element-admin
框架里的组件样式可以从 element 上找
element：http://element-cn.eleme.io/#/zh-CN/component/table
可以直接下载压缩包解压，也可以通过 git 下载

# 克隆项目git clone https://github.com/PanJiaChen/vue-element-admin.git # 安装依赖npm install #设置淘宝仓库npm install --registry=https://registry.npm.taobao.org # 启动服务npm run dev

文章图片

├── build// 构建相关├── config// 配置相关├── src// 源代码│├── api// 所有请求│├── assets// 主题 字体等静态资源│├── components// 全局公用组件│├── directive// 全局指令│├── filtres// 全局 filter│├── icons// 项目所有 svg icons│├── lang// 国际化 language│├── mock// 项目mock 模拟数据│├── router// 路由│├── store// 全局 store管理│├── styles// 全局样式│├── utils// 全局公用方法│├── vendor// 公用vendor│├── views// view│├── App.vue// 入口页面│├── main.js// 入口 加载组件 初始化等│└── permission.js// 权限管理├── static// 第三方不打包资源│└── Tinymce// 富文本├── .babelrc// babel-loader 配置├── eslintrc.js// eslint 配置项├── .gitignore// git 忽略项├── favicon.ico// favicon图标├── index.html// html模板└── package.json// package.json

准备工作 汉化
打开vscode后
Windows、Linux 快捷键是：ctrl+shift+p
macOS 快捷键是：command + shift + p
搜索 Configure Language，选择下图第一个选项。

文章图片

将"locale":“en” 修改为 “locale”:“zh-CN” ，保存文件。
选择左侧左下方的扩展按钮，搜索chinese 安装下图的插件

文章图片

安装成功以后重启vscode，语言就改成中文了。

文章图片

推荐安装一些好用的扩展

Auto Close Tag 自动闭合HTML标签
Auto Rename Tag 修改HTML标签时，自动修改匹配的标签
Beautify 代码美化
ESLint ESLint 插件，高亮提示
File Peek 根据路径字符串，快速定位到文件
HTML CSS Support css提示（支持vue）
HTMLHint HTML格式提示
JavaScript (ES6) code snippets ES6语法代码段
Vetur Vue代码高亮及补全
VS Color Picker vs颜色选择器
Vue 2 Snippets Vue2代码补全
open in browser 在浏览器中预览

ESLint
刚开始很难用，疯狂报错，那是因为没配好，配好后一些小的问题，会自动修正，在保存的时候
文件 ? 首选项 ? 设置 ? 搜索 ESLint ? 点击在 setting.json 中编辑 ? 粘进去，保存，完事

{"files.autoSave": "off","eslint.validate": ["javascript","javascriptreact","vue-html",{"language": "vue","autoFix": true}],"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 用来显示一些信息
我在 element 组件里找了一个列表功能和分页功能
/src/service/dataLog.vue

文章图片

dataLog.vue 的 template 部分

注意 template 下只能有一个节点，两个就报错了，可以试下，所有我放在一个统一的 div 里
至于这些值为啥这样写，我只能说照着人家给的模板改就好，人家写啥你写啥，样式啥的人家上面都有

文章图片

样式部分就不贴了，最后会把完整的代码贴出来，来看下 js 的部分
这里解释下分页，分页除了初始化给了第 1 页和每页 10 条后，之后每次点击页码，数据都会双向绑定到值上，所有在调后台函数的时候，直接取 page 和 limit 值就行了，不想要再去想我怎么去拿 div 上面的数字

接下来看看上面的 api 接口
/src/api/service/dataLog.js
每次点击就会去调用 api 接口里的方法，参数都看得懂
上面引用的 request 文件使得每次调用的时候都会对请求进行拦截，上面的 BASE_API 就会在里面被拼上去

import request from '@/utils/request' // 获取错误信息列表export function getDataLog(query) {return request({url: '/log/getDataLog',method: 'get',params: query})}

/src/mock/service/dataLog.js
接下来就是使用 mock 假数据，我就循环了10条，因为假的分页，特意去实现太费劲了
如果有多个接口的数据要返回，可以在 export default 里写多个接口去返回

import Mock from 'mockjs' const List = [] const count = 10 // 模拟错误信息for (let i = 0; i < count; i++) {List.push(Mock.mock({data: '12987122',time: '好滋好味鸡蛋仔',log: '江浙小吃、小吃零食江浙小吃、小吃零食'}))} export default {// 获取错误信息列表getDataLog: () => {return {total: List.length,items: List,limit: 10}}}

/src/mock/index.js
上面的写完还不行，因为通过 api 提交的请求，mock 不知道哪些是需要请求假数据的，所有需要在 index 文件里进行拦截
直接加就好了，就这两行，把刚写的假数据引用进来，对请求进行拦截
第一个参数，就是要拦截的 url 这里就和 api 挂钩起来了
第二个参数，get 类型请求
第三个参数，/src/mock/service/dataLog.js 里 export 的对应接口，这样就和 mock 假数据也挂钩起来了
需要拦截多少个请求就要写多少个

文章图片

然后 npm run dev 运行测试就好了
axios 连接后台真数据 这里我偷了个懒，由于 utils/request.js 已经帮我们把 axios 都弄好了，像 BASE_API 的路径拼接，我又不想再写个 api 文件，所以我就直接拿过来用了
先引入

import request from '@/utils/request'

js 部分：

methods: {getDataLog() {this.listQuery = {page: this.listQuery.page,limit: this.listQuery.limit,object: this.keyword}// mock 请求假数据// getDataLog(this.listQuery).then(response => {//this.dataLog = []//this.total = response.data.total//this.dataLog = response.data.items//// 查询后要把关键字给清空//this.keyword = ''// })// 请求后台获得真实数据request({url: '/log/getDataLog/',method: 'post',data: this.listQuery}).then(response => {this.dataLog = []this.total = response.data.pageEntity.totalthis.dataLog = response.data.retData})}}

这里访问路径就是 http://127.0.0.1:8081/log/getDataLog，如果全路径访问也是可以的，url 前面带了 “/”意思就是会进行路径的拼接，如果写的是 url: 'log/getDataLog' 那么访问就报错了，因为前缀没拼上，还有要把 mock 里的 index.js 文件里的注掉，要不会拦截变成假数据
这里用的是 post 方法，后台部分直接用 @RequestBody 接收参数就好了

文章图片

也可以用 get 方法，把参数拼在 url 上传递，我这采用 restful 形式的接口，用 @PathVariable 接收参数

文章图片

这时候你可能会遇到跨域问题
新建 config 包

@Configurationpublic class CorssDomainConfig implements WebMvcConfigurer { @Autowiredprivate CorsInterceptor corsInterceptor; @Overridepublic void addInterceptors(InterceptorRegistry registry) {InterceptorRegistration registration = registry.addInterceptor(corsInterceptor); registration.addPathPatterns("/**"); } }

然后新建 interceptor 包

@Componentpublic class CorsInterceptor extends HandlerInterceptorAdapter { @Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)throws Exception {// 添加跨域CORSresponse.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Headers", "Origin,X-Requested-With,Content-Type,Accept,Authorization,token, x-token"); response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH"); return true; }}

项目再启动时，addInterceptors 就会把 preHandle 给注册成对象，后续请求都会经过 preHandle 接口对请求做出处理
正式环境部署 我这前端采用 Nginx 作为前端的运行容器
详细部署：Docker 上部署 Nginx
我 Nginx html 文件夹下我保留了 dist目录

文章图片

所以 /conf.d/default.conf 要改下

文章图片

vue 里 config/sit.env.js，这里我配置了测试服的，然后在 prod.env.js 配置了正式服的

module.exports = {NODE_ENV: '"production"',ENV_CONFIG: '"sit"',// 项目访问根路径// 测试服BASE_API: '"http://xx.xx.xxx.xxx:xxxx"',}

#测试服打包npm run build:sit #正式服打包npm run build:prod

命令就在 package.json 里
打包后会在根目录生成 dist 文件夹，把文件夹放到服务器的 html 文件夹下就好了，然后启动 Nginx，启动过就不用启动了，由于我 Nginx 直接配置了 80 端口的，所以直接服务器路径访问就行了
PS:如果遇到了打包报错的情况，那就把 npm 更新下 npm install ，这会在项目根目录生成 node_modules 文件夹，这些是需要的依赖，在 linux 上打包我这试了不行，依赖更新了也不对，不知道问题出在哪，应该是 windows 和 linux 依赖不太一样吧
前端完整代码 /src/views/service/dataLog.vue

.demo-table-expand {font-size: 0; }.demo-table-expand label {width: 90px; color: #99a9bf; }.demo-table-expand .el-form-item {margin-right: 0; margin-bottom: 0; width: 50%; }

/src/api/service/dataLog.js

import request from '@/utils/request' // 获取错误信息列表export function getDataLog(query) {return request({url: '/log/getDataLog',method: 'get',params: query})}

/src/mock/service/index.js
拦截原因，请求后台就注掉

// Mock.mock(/\/log\/getDataLog/, 'get', dataLogAPI.getDataLog)

/src/mock/service/dataLog.js

import Mock from 'mockjs' const List = [] const count = 10 // 模拟错误信息for (let i = 0; i < count; i++) {List.push(Mock.mock({data: '12987122',time: '好滋好味鸡蛋仔',log: '江浙小吃、小吃零食江浙小吃、小吃零食'}))} export default {// 获取错误信息列表getDataLog: () => {return {total: List.length,items: List,limit: 10}}}

参考： https://blog.csdn.net/brucelpt/article/details/82994332
【vue-element-admin开发教程(v4.0.0之前)】到此这篇关于vue-element-admin开发教程(v4.0.0之前)的文章就介绍到这了,更多相关vue-element-admin开发教程内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

推荐阅读

• 

  凉血祛风糖浆的说明书
• 

  非师范学生当老师 非师范生怎么当上老师
• 

  linux抓网络数据命令 linux网络抓包分析工具
• 

  什么是视频滤镜，视频滤镜原理
• 

  微信声音锁登录无法识别如何解决 微信声音锁登录无法识别如何解决呢
• 

  黄芪水一个星期喝几次是合理的
• 

  圣诞语录短句简短 圣诞语录短句简短给朋友
• 

  十条笑话:儿子喜欢上隔壁家女儿，我该怎么办?
• 

  关于电脑怎么同步微信视频号的信息
• 

  易拉罐吹跑车声音教程 这么强大的操作
• 

  枯萎的玫瑰花瓣可以做什么
• 

  redis和数据库不一致时怎么解决 Redis和sql区别
• 

  天之蓝海之蓝梦之蓝 洋河海之蓝酒价格表
• 

  心烦的时候怎么办
• 

  如何在云服务器上安装PHP？ 云服务器怎么安装php
• 

  安装辅材包括哪些 安装辅材包括哪些东西
• 

  华为编程语言仓颉官网报名，谁创造了汉语
• 

  新产品上市的推广话术 新品上市广告语怎么写
• 

  廖常初plc编程及应用，PLC编程及应用 第3版 廖常初 课后答案
• 

  紫砂壶怎么选

• vue-element-admin|vue-element-admin 登陆及目录权限控制的实现
• 如何修复Mac的鼠标光标消失问题 （解决办法教程）
• 5+ App开发入门指南
• 安装系统 一键重装系统XP图文图文详细教程
• 安装系统 在线一键重装系统win7图文图文详细教程
• 一键安装Win7系统图文图文详细教程
• 安装系统 小白一键重装系统图文图文详细教程
• 系统之家重装XP系统图文图文详细教程
• 一键装机XP系统图文图文详细教程
• 卡拉云|Postman 使用教程 - 手把手教你 API 接口测试