# 人资项目
**Repository Path**: mrtao150/human-resource-projects
## Basic Information
- **Project Name**: 人资项目
- **Description**: 已经不太记得是第几个人资项目仓库了
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-25
- **Last Updated**: 2023-11-28
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
## 1. 项目启动
从公司的仓库拉取了代码以后，怎么样下载依赖？
看仓库里面有没有lock文件
如果同事是用 yarn下载的，那么项目里面就有 yarn.lock文件
如果同事是用 npm 下载的，那么项目里面就有 package-lock.json
我们自己下载的时候尽量和他们保持一致。 安装之前先问一下同事的nodejs版本
我们这个项目，尽量使用16.x的版本
yarn 下载依赖，会安装的快一些
如果下载了新的nodejs， 那么就要去修改 .npmrc .yarnrc 换成国内的源地址
npm i yarn -g 全局安装一个 yarn工具
然后在 安装项目的依赖，重启vscode
nodejs安装目录 不能写中文
## 2. mock数据
前端开发完了页面以后，后端的接口还没有写完，这个时候前端就可以使用mock这个 是一个库，可以模拟后端自己写一些请求，等后端接口写完以后，直接替换后端接口即可
## 3. 图标的引入方式
1. element-ui 自带的
2. font-awesome的图标
```
官网地址： https://fontawesome.dashgame.com/
下包之前，去npm 官网搜一下包名，看看npm上面有没有这个包
npm install font-awesome --save 下载， 默认下载的是 4.x版本
导入
import 'font-awesome/css/font-awesome.min.css'
使用
如果公司利用的是 5.x+的版本
就不是fa类名， 换成了 fas的类名
```
3. 阿里的矢量图标库
```
https://www.iconfont.cn/
去官网选择几个图标加入购物车，添加到项目里面去，然后在下载
下载完以后，将iconfont.css 复制到 项目里面的styles文件夹里面去
将ttf woff woff2 三个文件 复制到assets里面的fonts文件夹里面去
修改iconfont.css里面的ttf等的路径
在组件中使用
注意点：阿里的图标库是多个人写的，风格不统一，工作里面一般是公司自己的ui画，如果个人项目，那么就可以使用阿里的图标库
缺点： 不好添加新图标，要将所有逇字体文件 替换在生成新的，比较繁琐，要是中途换账号了，那么旧图标就会找不到，不利于项目维护
```
4. svg
工作里面我一般用的是svg，最大的好处就是 可以快递增加和修改一些图标，让公司的ui同事快速绘制给我。 比上面的阿里矢量图标库方便，阿里的每次都要重新下载新的ttf woff woff2。
svg在vue里面结合自定义组件，方便开发
核心就是 svg-sprite-loader这个webpakc插件，专门用来转换svg模块
## 4. git的基本使用
```
.git 是本地仓库
删除它，自己在用 git init 新建一个自己的空仓库
工作区
git add . 跟踪所有文件，将文件加入到暂存区
git commit -m '注释' 加入到本地仓库
git remote add origin https://仓库地址 ---- 将本地仓库和远程仓库建立连接
git push origin master 提交到远程仓库
```
## 5. element表单校验关注的点
1. 就是我们表单里面的字段属性 ---------- 去接口文档看，和后端的参数要一模一样
2. 根据element的form表单校验官网，找rules的例子
## 6. 跨域的问题
1. 默认发请求会有跨域问题，协议+域名+端口 三者有任意一个不一样，就会产生跨域--- CORS
2. 跨域： 是浏览器的自己的安全机制（限制不同域名之间xhr发请求）（正常写script标签 link标签没有口语的说法）
3. 以前的解决方式是，在后端(我们写nodejs的时候)设置 一个包 cors。 现在我们的后端是java写的，我们也没有代码，java那边就是没有写跨域，前端怎么解决？
4. 前端就是用 代理proxy 来解决。前端vue项目，启动起来 npm run serve ---他的底层是webpack里面的一个包 webpack-dev-server，这个包会自动启动一个本地服务器，端口默认是3000， 可以修改
## 7. 开发里面常见的环境
我们平时3个前端 4个后端 UI 测试 等等在一个项目组件里面开发项目
1. 开发环境。我们3个前端，平时写代码的时候，用的是自己的一些git仓库，我是a想看b的代码， b想看c的代码。 这里就有一个开发环境的概念， 我们组长想看a的登录功能，看b的列表功能，看c表单功能。组长直接去开发环境看我们的代码，我们自己也可以去看。 有新的需求写完了就上去看一下效果，有bug就及时改掉， 192.168.1.1:8080 这个地址就是开发
2. 测试环境。1号开发，15号要上线， 定一个时间 10号去测试。测试的通过会有一个单独的地址，一般是后端给他们，比如地址就是 192.168.1.2:9000. 他们边测试，边将一些bug发布到一个jira 禅道 --bug平台。 就将bug指派给前端和后端对应的同学
1. 生产环境。 13号晚上 所有bug都解决完毕以后， uat阶段， 产品经理他会在看一下项目，如果没有bug，他就发邮件，说15晚上 11:00 准时上线， www.baidu.com 我们的前端和后端都会把 修改好的代码，一般都是master分支上的代码，提交打包压缩，发给后端上线。 用户一进入百度，就可以看到我们更新后的页面了。 如果中途有bug，那么就涉及到代码回退，hotfix分支改bug等等。
代码里面的 环境变量---https://cli.vuejs.org/zh/guide/mode-and-env.html
```
npm run dev/serve --- 核心是看 vue-cli-service server 那么就说明当前是开发环境， 默认的NODE_ENV 值就是 'development'。 然后会自动读取文件 .env.development
npm run build ----- 核心是看 vue-cli-service build 那么就说明当前环境是生产环境， 默认的NODE_ENV 值就是 'production' 然后会自动读取文件 .env.production
如果想针对开发和生产环境做一些定制化的配置，
那么可以在 .env.development .env.production 两个文件里面 写同一个变量(必须是VUE_APP_开头)
这样在不同的环境，使用 process.env.VUE_APP_XXXX 得到的值就不一样
代码不动，不同的环境，代码执行的分支不一样。这就是我们环境变量的含义
```
## 8. 代码快照的切换
本地测试用的，公司里面不要用
如果我晚上要写代码，我就想写编辑功能，新增功能不想写
1. 先把老师仓库的完整代码clone下来 git clone https://xxxxxxxx1
2. 去我的网上码云仓库，找 提交的commitid，这个也叫快照 (每次git commit 一下 就会生成一个快照)
3. 使用 **git checkout sssdf3123**(hash值，一般用前7位即可)
4. 然后在接着写自己的代码，但是不要提交。如果想要提交，那么就要删除 `.GIT` 隐藏文件夹
还要一个命令，可以本地查看所有的提交记录以及 hash值，gitk