# renzi_admin_template

**Repository Path**: errlei/renzi_admin_template

## Basic Information

- **Project Name**: renzi_admin_template
- **Description**: 人资项目的开发模板
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-06-14
- **Last Updated**: 2023-11-16

## 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'
   
   使用
   <i class="fa fa-camera-retro fa-lg" />
   
   如果公司利用的是 5.x+的版本
   就不是fa类名， 换成了 fas的类名
   ```

3. 阿里的矢量图标库

   ```
   https://www.iconfont.cn/
   去官网选择几个图标加入购物车，添加到项目里面去，然后在下载
   
   下载完以后，将iconfont.css 复制到 项目里面的styles文件夹里面去
   将ttf woff woff2 三个文件 复制到assets里面的fonts文件夹里面去
   修改iconfont.css里面的ttf等的路径
   
   在组件中使用
   <span class="iconfont icon-aixin" />
   
   注意点：阿里的图标库是多个人写的，风格不统一，工作里面一般是公司自己的ui画，如果个人项目，那么就可以使用阿里的图标库
   缺点： 不好添加新图标，要将所有逇字体文件 替换在生成新的，比较繁琐，要是中途换账号了，那么旧图标就会找不到，不利于项目维护
   ```

   

4. svg

工作里面我一般用的是svg，最大的好处就是 可以快递增加和修改一些图标，让公司的ui同事快速绘制给我。 比上面的阿里矢量图标库方便，阿里的每次都要重新下载新的ttf woff woff2。

svg在vue里面结合自定义组件，方便开发