一 准备

1. 安装配置nodejs https://www.jianshu.com/p/13f45e24b1de
2. 安装git https://blog.csdn.net/huangqqdy/article/details/83032408

二 vue-element-admin

https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/#%E5%AE%89%E8%A3%85

（一）安装 切换到你的文件目录下，dos命令 一步步运行

(二) 启动完成后会自动打开浏览器访问 http://localhost:9527， 你看到下面的页面就代表操作成功了。

三 目录结构

四 nodejs相关指令

npm -l 查看所有命令的用例信息
npm help 查看某个命令的帮助信息
npm help-search 在帮助文档中查找包含关键词的文档列表
npm -h 查看某个命令的用法
npm root [-g] 查看本地或者全局node-module目录的位置
npm ping 验证registry的连通性和身份验证

npm init 初始化当前目录为一个包，会生成一个 package.json 的文件

npm install 不带任何参数，会按照根目录下的package.json里的依赖包
npm install [<@scope>/] 局部安装某个包
npm install [<@scope>/]@ 局部安装某个包（按照tag）
npm install [<@scope>/]@ 安装包的某个版本
npm i install的别名
npm install-test 它和npm install的区别是执行完npm install后立马执行npm test
npm it 同上alias

npm uninstall 卸载某个包
npm un 同上，别名

npm update [-g] […] 更新包
npm up [-g] […] npm update的别名

npm link [<@scope>/][@] 将npm包创建快捷方式到全局npm的路径下

npm outdated 查看当前安装的包里版本是否过期的信息

npm deprecate [@] 添加对某个包的某个版本的反对信息。只有owner才可以，安装此包能看到这些反对信息

npm pack 将当前npm包文件打成一个压缩包

npm prune 移除没有定义在package.json 依赖配置上的包

npm search [–long] [search terms …] 从远程仓库中搜索某个包的信息

npm owner add [<@scope>/] 添加某个用户作为某个包的管理者
npm owner rm [<@scope>/] 移除某个用户作为某个包的管理者
npm owner ls [<@scope>/] 查看某个包的管理者

npm config get registry 获取npm 仓库地址
npm config list [—-json] 获取npm配置信息
npm config edit 编辑npm的配置信息
npm config delete 删除某个配置
npm set key val 设置某个配置
npm get key val 获取某个配置
npm c === npm config 别名

npm tag管理,tag的作用是不干扰正常版本发布的前提下，发布一个基于某个tag的版本，下载latest版本是不会下载到这个tag产生的版本。
npm dist-tag add @ [] 为某个版本添加tag 如果添加的tag为latest，这个tag版本将成为最新版本。用户下载最新的时候会直接下载到该版本
npm dist-tag rm 移除tag
npm dist-tag ls [] 查看tag清单

npm cache add 添加某个tar包到缓存
npm cache add 通过git地址添加某个包到缓存
npm cache add @ 添加某个包到缓存
npm cache clean —force 清除缓存文件 npm@5 后必须使用强制符
npm cache verify 清理无用的缓存文件和校验缓存数据完整性

npm doctor npm诊断命令，npm 会对npm运行的环境进行检测诊断，包括npm的版本，git版本，npm使用的文件权限，npm ping等等

npm version npm 版本
npm whoami npm 当前登陆用户

npm adduser 添加用户
npm login 登陆用户
npm logout 退出当前登陆的npm账号

npm unpublish [<@scope>/][@] 取消发布包, 将发布的包从远程仓库中删除
npm publish [|] [–tag ] [–access <public|restricted>] 发布一个包

npm bugs 打开包的bugs 报告页面
npm docs 打开包的文档地址
npm repo [] 打开包的源文件管理地址 比如github地址

npm bin [—-global] 查看npm 可执行文件的目录

查看当前npm包的依赖包列表
npm ls
npm list
npm la
npm ll

npm 用户个人信息管理
npm profile get [–json|–parseable] [] 获取个人信息
npm profile set [–json|–parseable] 设置个人信息
npm profile set password 设置密码
npm profile enable-2fa [auth-and-writes|auth-only] 设置开启双重验证
npm profile disable-2fa 关闭开启双重验证

npm completion >> ~/.zsh npm开启自动补全命令，设置后，按住tab键能自动提示npm 命令

npm stop 运行当前目录下的package.json 里的scripts里的top命令，如果有的话
npm start 运行当前目录下的package.json 里的scripts里的start命令，如果有的话
npm restart 运行当前目录下的package.json 里的scripts里的restart命令，如果没有，则执行npm stop 再执行npm start
npm run-script [-- …] 运行当前目录下的package.json 里的scripts里的命令
npm run 同上，别名
npm test [-- ] 运行当前目录下的package.json 里的scripts里的test命令，如果有的话

npm star […] 将某个包加入当前用户的感兴趣的清单
npm unstar […] 将某个包移除当前用户清单
npm stars [] 列出该用户所有感兴趣的包

npm rebuild [[<@scope>/]…] 执行编译某个包
npm rb 同上，alias

npm prefix [-g] 查看最靠近package.json的父级目录

npm dedupe 通过一些算法 将多个依赖包中重复依赖的包移除，只保留一个
npm ddp 同上 别名

npm explore [ – ] 进入指定的包里执行一些命令，比如执行更新源代码，执行重新编译等

npm access 设置包的权限
npm edit 修改包内容

npm team 管理所属团队或者添加团队成员等

npm shrinkwrap 生成当前项目确定的依赖版本，类似package-lock.json，但是还是有略微区别

npm token 身份令牌管理
npm run build:prod 打包成dist文件，放入Tomcat中webapp文件下面即可

五 组件库 饿了吗开发的，搭配这个，web管理系统页面项目可以缩短周期近90%

为什么会缩短90%呢，因为，分页，表格，按钮等各式各样的标签都已经设计好，拿来就用，不要你去写样式，js什么的，你唯一要做的就是改四个配置文件，后面会讲。

https://element.eleme.cn/#/zh-CN/component/drawer

里面有开发文档，很简单的，按照固定的模式往里面套就行了，前提你要有vue框架的开发基础，如果没有的话，可以用个两三个小时学习一下，前提是你有html，js基础，如果没有话，我建议你点击右上角的×，胸带

六 配置请求连接

这三个文件 在vue-elemnt-admin根目录下，进去更改VUE_APP_BASE_API

vue-element-admin\src\utils目录下 request.js
baseURL更改成你的请求路径

七 登录问题

这是vue-element-admin是最关键的地方，也是很多初学者害怕的地方，它的流程其实不复杂，自带token验证，也就说你的后端需要提供三个接口
由于内容太多，我想睡觉了，转载这位大神的博客，他已经将它讲解的很清楚了
https://www.jianshu.com/p/29c5b8cd593e

小白一枚，不喜勿喷