遇到的几个难题

1、vue3+vite项目中使用element-plus，导入但是无效。

解决办法：先npm install @element-plus/icons-vue 下载，然后在需要用到的组件中Import，需要Import，再以组件的形式放在需要图标的地方。

import {Edit} from '@element-plus/icons-vue';

<el-icon><Edit /></el-icon>

2、axios.put修改数据时，显示数据格式不对。在url中就加入需要修改数据的id，然后在后面再添加需要修改的数据对象。

const post={
   // id:ruleForm.id,
   title:ruleForm.name,
   body:ruleForm.desc
} 
const data=await axios.put(`http://localhost:3001/posts/${ruleForm.id}`,post);

3、自己创建数据接口模拟数据命令

json-server --watch data/db.json --port=3001

在使用之前需要npm install json-server

4、阿里矢量图的使用

以项目代码方式下载zip后，解压把几个icon相关文件放到项目某个新建文件夹下。

比如放在incon文件夹下，则在main.js中导入iconfont.css文件

import './icon/iconfont.css'

这个文件下有所下载可用的图标名，以及对应样式，在里面可以修改。

使用代码：

<span class="icon-shouye iconfont">

5、希望背景占满整个屏幕，且背景图片纵向平铺

html,body,#app{
  margin: 0;
  padding: 0;
  height:100%;
  /* height: 100%; */
  background-image: url(../src/pic/2.jpg);
  background-repeat: repeat-y;
  background-size: cover;
}

6、elementplus卡片换行问题

一些组件比如卡片里的内容是不换行的。

解决办法：在卡片里加一个p标签，然后设置v-html，就可以识别<br>，从而实现换行了。

但是问题又来了，数据里的是'\n'，所以还需要在获取数据的时候将'\n'转换为<br>。

但是我想要编辑数据的时候发现获取的数据会包含<br>，此时对获取的数据反向转换即可。

7、卡片内数据超过卡片宽度会溢出，设置滚动条

将卡片里的内容包含着el-scrllbar中，记得设置宽度。