在线做海报网站,wordpress5.0.4不支持,跨境外贸网,高粱seo博客经过之前的学习，已经能够正常打开文档了。 目前为止，我们的代码能够实现： 打开文档编辑文档手动保存自动保存虽然功能依然比较少，但是我们已经基本实现了文档管理最核心的功能，而且我们有个非常大的优势，就是支持多人同时在线协同编辑。
现在我们要开发项目，我们得做基…经过之前的学习，已经能够正常打开文档了。 目前为止，我们的代码能够实现：
打开文档编辑文档手动保存自动保存虽然功能依然比较少，但是我们已经基本实现了文档管理最核心的功能，而且我们有个非常大的优势，就是支持多人同时在线协同编辑。
现在我们要开发项目，我们得做基本的项目架构设计。技术架构就不用设计了，但是我们的页面需要规划。交互也需要规划。
我们要做的到底是一个什么样的项目？
我们的基本方向是模仿腾讯文档：https://docs.qq.com/desktop/?_t=1721740429613u=a54febc2d1484b1db8fe368f479f21ac
这个是首页：
首页的结构分析大致如下：
当我们点击新建的时候，会弹出一个下拉菜单。但是这个菜单比较大，内容很多。
当我们点击文档的时候，会弹出一个对话框：
模板这个事儿本身并不复杂，但是我们第一个版本的目标是内部使用，所以我们可以不打开对话框，而是直接新建一个空白的文档，并跳转到文档编辑页面。
我们第一个版本的大目标是先实现Word文档的管理，所以其他的功能可以暂时不考虑。
上面首页的布局我们是要重点的参考的，其他的就可以从简，我们直接跳转到onlyoffice的编辑页面即可。
当我们新建了文档，并选择了保存以后，我们回到首页，应该能够在一个表格中，看到我最近创建或者更新的文档列表。 关于表格的交互我们可以简单点，通过一些按钮去控制，比如删除按钮，编辑按钮，复制按钮等等。
接下来就开始准备开发吧。
先安装antd组件库：
pnpm i ant-design-vue
pnpm i @ant-design/icons-vue接着添加一个布局页面：
完整代码如下：
script setup
import {ref} from 'vue';
import {Layout, LayoutHeader, Menu,MenuItem, LayoutSider, SubMenu,Breadcrumb, BreadcrumbItem, LayoutContent,
} from "ant-design-vue"
import {UserOutlined, LaptopOutlined, NotificationOutlined,
} from "@ant-design/icons-vue"const selectedKeys1 = ref(['2']);
const selectedKeys2 = ref(['1']);
const openKeys = ref(['sub1']);
/scripttemplateLayoutLayoutHeader class="header"div class="logo"/Menuv-model:selectedKeys="selectedKeys1"theme="dark"mode="horizontal":style="{ lineHeight: '64px' }"MenuItem key="1"nav 1/MenuItemMenuItem key="2"nav 2/MenuItem
