人力资源的环境搭建
1.0 vue-element-admin的了解和介绍
vue-element-admin (https://panjiachen.gitee.io/vue-element-admin-site/zh/)
- 是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。
- 是一个后台集成方案, 集成了PC项目中很多的业务场景和功能, 尤其在当下SPA的趋势下,我们可以从中获得很多成熟的解决方案.
- 它有一个成熟的集成方案,里面包含了所有的业务功能和场景,并不适合直接拿来进行二次开发, 但是可以通过该项目中的一个案例来进行学习和使用.
如果你想查看该项目的具体功能和效果,可以拉取代码,启动进行预览
$ git clone https://github.com/PanJiaChen/vue-element-admin.git #拉取代码
$ cd vue-element-admin #切换到具体目录下
$ npm run dev #启动开发调试模式 查看package.json文件的scripts可知晓启动命令
- 所以: 我们一般都是使用他的 基础模板 来进行二次开发
包含了基本的 登录 / 鉴权 / 主页布局 的一些基础功能模板, 我们可以直接在该模板上进行功能的扩展和项目的二次开发
2.0 正式搭建项目前的一些基本准备
- 查看node 和 npm的版本
nodejs是当下前端工程化开发必不可少的环境, 使用 nodejs的**npm
**功能来管理依赖包
node -v #查看node版本
npm -v #查看npm版本
- 查看git安装版本
git版本控制工具是目前最为流行的分布式版本管理工具,代码的**提交, 检出, 日志
**, 都需要通过git完成
git --version #查看git安装版本 (git 不是使用-v)
- npm淘宝镜像
npm是非常重要的npm管理工具,由于npm的服务器位于国外, 所以一般建议 将 npm设置成国内的淘宝镜像
npm config set registry https://registry.npm.taobao.org/ #设置淘宝镜像地址
npm config get registry #查看镜像地址
- vscode编辑器 加 插件 +
vetur
+eslint
> vetur是基于 单文件组件开发的支持插件, eslint是 基于代码校验的插件工具
除此之外, eslint需要在vscode中进行一些参数的配置
(在vscods 的设置里面添加)
{
"eslint.enable": true,
"eslint.run": "onType",
"eslint.options": {
"extensions": [
".js",
".vue",
".jsx",
".tsx"
]
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
3.0 项目模板启动
- git拉取基础项目模板** (这里的 https 要改成 git)
git clone https://github.com/