学习了解通用vue后台集成方案vue-element-adminvue-element-admin是一个后台前端方案，基于vue和element-ui实现。采用最新的前端技术栈，内置i18国际化方案，动态路由，权限验证，提炼典型业务模型，提供丰富的功能组件。可以帮助您快速构建企业级中后端产品原型。vue-element-admin是一个后台集成方案，在PC项目中集成了很多业务场景和功能，尤其是在现在的SPA趋势下，我们可以从中得到很多成熟的解决方案。vue-element-admin有一套成熟的集成方案，包含了所有的业务功能和场景，不适合直接二次开发，但是可以通过项目中的一个案例来学习和使用。这里是官网地址，这里是在线演示地址。如果你想查看项目的具体功能和效果，可以拉取代码开始预览。$gitclonehttps://github.com/PanJiaChen/vue-element-admin.git#拉取代码$cdvue-element-admin#切换到特定目录$npmrundev#启动开发调试模式查看package.json文件的脚本知道启动命令注意：如果当前项目下载速度太慢，可以直接下载代码压缩包运行集成方案不合适我们直接二次使用开发，基本模板是更好的选择。基础模板包含一些基本的登录/认证/首页布局的基础功能模板。我们可以直接在这个模板上进行功能的扩展和实现。项目的二次开发浏览vue-element-admin的文档，了解在构建这个集成方案的项目之前的一些基本准备更好的环境准备和资源前端，所以提前检查我们的环境和资源nodejs环境nodejs是必不可少的前端工程开发环境，使用nodejs的npm功能管理依赖包查看node和npm的版本$node-v#查看node版本$npm-v#查看npm版本gitversioncontrolgit版本控制工具是目前最流行的分布式版本管理工具。代码提交、签出、日志都需要通过git来完成查看git安装版本$git--version#查看git安装版本npm淘宝镜像npm是一个非常重要的npm管理工具。由于npm服务器在国外，一般建议将npm设置为国内淘宝镜像。设置淘宝镜像$npmconfigsetregistryhttps://registry.npm.taobao.org/#设置淘宝镜像地址$npmconfiggetregistry#查看镜像地址vscodeeditorvscodeeditor是目前前端开发的编码工具，拥有丰富的插件系统，非常适合开发前端项目。vscode编辑器插件+vetur+eslintvetur是一个基于单文件组件开发的支持插件，eslint是一个基于代码验证的插件工具另外eslint需要在vscode中配置一些参数{"eslint.enable":true,"eslint.run":"onType","eslint.options":{"extensions":[".js",".vue",".jsx",".tsx"]},"editor.codeActionsOnSave":{"source.fixAll.eslint":true}}本项目技术栈本项目技术栈基于ES2015+、vue、vuex、vue-router、vue-cli、axios和element-ui来查看各自的开发环境和资源，尤其是npm的淘宝镜像。需要额外注意项目模板启动和目录引入拉取项目的基本模板，并引入目录。git拉取基础项目模板$gitclonehttps://github.com/PanJiaChen/vue-admin-template.githrsaas#将基础模板拉取到hrsaas目录安装项目依赖（定位到项目目录下）$npminstall#安装依赖启动项目$npmrundev#启动开发模式的服务项目运行后，浏览器会自动打开基础模板的登录页面，如上目录结构本项目生成了一个基础模板为你开发框架提供了涵盖中后台开发的各种功能和坑。下面是整个项目的目录结构├──build#构建相关├──mock#项目模拟模拟数据├──public#静态资源││──favicon.ico#favicon图标│└──index.html#html模板├──src#源代码│├──api#所有请求│├──assets#主题字体等静态资源│├──components#全局公共组件│├──icons#项目的所有svg图标│├──layout#全局布局│├──router#路由│├──store#全局存储管理│├──styles#全局样式│├──utils#全局公共方法│├──vendor#公共供应商│├──views#查看所有页面│├──App.vue#入口页面│├──main.js#入口文件加载组件初始化等│└──permission.js#权限管理│└──settings.js#配置文件├──tests#测试├──.env.xxx#环境变量配置├──.eslintrc.js#eslint配置项├──.babelrc#babel-loader配置├──.travis.yml#自动化CI配置├──vue.config.js#vue-cli配置├──postcss.config.js#postcss配置└──package.json#package.json此时，你可能会眼花缭乱，因为生成的目录下文件太多了。当我们在做一个项目的时候，src目录是我们最关注的。它包含所有源代码和资源。至于其他的目录，都是和项目相关的。环境和工具的配置项目运行机制和代码注释了解当前模板的基本运行机制和基础架构眼花缭乱的目录和文件是如何工作的？下面做一个基本的解释，帮助大家更好的理解和开发├──src#源码│├──api#所有请求│├──assets#主题字体等静态资源│├──components#全局公共组件│├──icons#项目的所有svg图标│├──layout#全局布局│├──router#路由│├──store#全局存储管理│├──styles#全局样式│├──utils#全局公共method│├──vendor#公开供应商│├──views#查看所有页面│├──App.vue#入口页面│├──main.js#入口文件加载组件初始化等│└──权限.js#权限管理│└──settings.js#配置文件概要：方便我们使用admin模板来做我们的项目，第四版js提升链接：https://pan.baidu.com/s/18P8k...可以加公众号获取提取码。有不明白的请加q群147936127交流或vx：ltby52119，谢谢~
