第二章 Vite4 + Vue3 + Vtkjs 布局

一、介绍

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

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

第二章 Vite4 + Vue3 + Vtkjs 布局_第1张图片

二、安装依赖

因为涉及到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

你可能感兴趣的:(VTK.js,vue.js,前端,javascript,3d,前端框架)