# renzi1116

**Repository Path**: shang1978/renzi1116

## Basic Information

- **Project Name**: renzi1116
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-16
- **Last Updated**: 2023-12-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 项目实战

## README

## 1.项目启动

从公司的仓库拉取代码以后,怎么样下载依赖,
看仓库里面有没有lock文件
如果同事是用 yarn下载的,那么项目里面就有 yran.lock文件
如果同事是用 npm 下载的,那么项目里面就有 package-lock.json
我们自己下载的时候尽量和他们保持一致,安装之前先问一下同事的nodejs版本.尽量使用16.x的版本

## 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画，如果个人项目，那么就可以使用阿里的图标库
缺点： 不好添加新图标，要将所有逇字体文件 替换在生成新的，比较繁琐，要是中途换账号了，那么旧图标就会找不到，不利于项目维护

>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， 可以修改