基于cornerstone3D的dicom影像浏览器 第一章,新建vite项目,node版本22
完整效果:
cornerstone3D的dicom影像浏览器
1.创建vue3项目,使用命令:npm create vite@latest
2.下载对应的依赖
"@cornerstonejs/core": "^3.25.0",
"@cornerstonejs/dicom-image-loader": "^3.25.0","@cornerstonejs/labelmap-interpolation": "^3.26.0",
"@cornerstonejs/tools": "^3.25.0",
"cornerstone-wado-image-loader": "^4.13.2","dicom-parser": "^1.8.21",
"mitt": "^3.0.1","pinia": "^3.0.3",
"vue-router": "^4.5.1"
"sass": "^1.89.2","sass-loader": "^16.0.5",
3.构建项目,main.js入口文件
import { createApp } from "vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/reset.css";
import "./style.css";
import App from "./App.vue";
import mitt from "mitt";
import router from "./router/index.js";
import { createPinia } from "pinia";// createApp(App).mount('#app')
const app = createApp(App);
const pinia = createPinia();app.config.globalProperties.emitter = mitt();
app.use(Antd);
app.use(pinia);
app.use(router);
app.mount("#app");
4.router/index.js
import { createMemoryHistory, createRouter } from 'vue-router'import homeView from '@/views/home/index.vue'const routes = [{ path: '/', component: homeView },
]const router = createRouter({history: createMemoryHistory(),routes,
})export default router