第二章 Vite4 + Vue3 + Vtkjs 布局

一、介绍

这篇文章本来不想写的，因为大家都会，最终还是决定写一下，目的是不想来看的小伙伴被搞得一头雾水，莫名奇妙的就出现很多代码，前后对不上。既然是专栏，那么就要有始有终。每一步的代码都能呈现出来，达到一个完整性。

那么一个系统不管是成型的还是一个demo，最起码的就是看起来像那么回事。布局的话我采用上下结构，上面的话可以放一些logo，导航什么的。下面分为左右部分，左侧显示模型的一些信息，如果批量导入的话可以对指定模型进行处理。右侧就是我们的可视化区域。可视化区域的话放置一些常用的工具，比如切换背景色、模型旋转、全屏切换等等。

二、安装依赖

因为涉及到UI，图标等等，所以我直接把ELementPlus、icon、vue-router一并安装做好相应的配置，如下

1、安装

# UI库和路由
yarn add element-plus vue-router

# 图标库
yarn add @iconify-json/carbon @iconify-json/ep @iconify-json/noto -D

# 按需引入
yarn add unplugin-vue-components unplugin-auto-import unplugin-icons -D