学习和理解通用的vue后盾集成计划vue-element-admin
vue-element-admin 是一个后盾前端解决方案，它基于 vue 和 element-ui实现。它应用了最新的前端技术栈，内置了 i18 国际化解决方案，动静路由，权限验证，提炼了典型的业务模型，提供了丰盛的性能组件，它能够帮忙你疾速搭建企业级中后盾产品原型。
vue-element-admin 是一个后盾集成计划, 集成了PC我的项目中很多的业务场景和性能, 尤其在当下SPA的趋势下,咱们能够从中取得很多成熟的解决方案.
vue-element-admin 有一个成熟的集成计划，外面蕴含了所有的业务性能和场景,并不适宜间接拿来进行二次开发, 然而能够通过该我的项目中的一个案例来进行学习和应用.
这里是官网地址
这里是线上demo地址
如果你想查看该项目标具体性能和成果，能够拉取代码，启动进行预览￥
$ git clone https://github.com/PanJiaChen/vue-element-admin.git #拉取代码$ cd vue-element-admin #切换到具体目录下$ npm run dev #启动开发调试模式 查看package.json文件的scripts可通晓启动命令留神：以后我的项目下载速度如果过慢，能够间接下载代码的压缩包运行
集成计划并不适宜咱们间接拿来进行二次开发，根底模板则是一个更好的抉择
根底模板, 蕴含了根本的 登录 / 鉴权 / 主页布局 的一些根底性能模板, 咱们能够间接在该模板上进行性能的扩大和我的项目的二次开发
浏览vue-element-admin的文档，理解这个集成计划
搭建我的项目前的一些根本筹备
介绍搭建一个vue中台我的项目,须要环境和工具
接下来要做的是一个大型的我的项目，咱们须要更好的环境筹备和资源前置，所以提前查看咱们的环境和资源
nodejs环境
nodejs是当下前端工程化开发必不可少的环境, 应用 nodejs的npm性能来治理依赖包查看node 和 npm的版本
$ node -v #查看node版本$ npm -v #查看npm版本git版本控制
git版本控制工具是目前最为风行的分布式版本管理工具,代码的提交, 检出, 日志, 都须要通过git实现查看git装置版本
$ git --version #查看git装置版本npm淘宝镜像
npm是十分重要的npm管理工具,因为npm的服务器位于国外, 所以个别倡议 将 npm设置成国内的淘宝镜像
设置淘宝镜像
$ npm config set registry https://registry.npm.taobao.org/ #设置淘宝镜像地址$ npm config get registry #查看镜像地址vscode编辑器
vscode编辑器是目前前端开发的编码利器， 以及丰盛的插件零碎，非常适合开发前端我的项目
vscode编辑器插件 + vetur + eslint
vetur是基于 单文件组件开发的反对插件, 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拉取根底我的项目模板
$ git clone https://github.com/PanJiaChen/vue-admin-template.git hrsaas #拉取根底模板到hrsaas目录装置我的项目依赖（定位到我的项目目录下）
$ npm install #装置依赖启动我的项目
$ npm run dev #启动开发模式的服务我的项目运行结束，浏览器会主动关上根底模板的登录页，如上图
目录构造
本我的项目曾经为你生成了一个根本的开发框架，提供了涵盖中后盾开发的各类性能和坑位，上面是整个我的项目的目录构造。
├── build # 构建相干├── mock # 我的项目mock 模仿数据├── public # 动态资源│ │── favicon.ico # favicon图标│ └── index.html # html模板├── src # 源代码│ ├── api # 所有申请│ ├── assets # 主题 字体等动态资源│ ├── components # 全局专用组件│ ├── icons # 我的项目所有 svg icons│ ├── layout # 全局 layout│ ├── router # 路由│ ├── store # 全局 store治理│ ├── styles # 全局款式│ ├── utils # 全局专用办法│ ├── vendor # 专用vendor│ ├── views # 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 icons│ ├── layout # 全局 layout│ ├── router # 路由│ ├── store # 全局 store治理│ ├── styles # 全局款式│ ├── utils # 全局专用办法│ ├── vendor # 专用vendor│ ├── views # views 所有页面│ ├── App.vue # 入口页面│ ├── main.js # 入口文件 加载组件 初始化等│ └── permission.js # 权限治理│ └── settings.js # 配置文件小结：
这样咱们就能够通过admin模板来做咱们的我的项目了, js高程第四版链接: https://pan.baidu.com/s/18P8k... 能够加公众号获取提取码.
若有不懂的中央，请加q群147936127交换或者vx: ltby52119，谢谢~