demo-vue3

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VS Code + Vue (Official) (and disable Vetur).

Recommended Browser Setup

• Chromium-based browsers (Chrome, Edge, Brave, etc.):
  • Vue.js devtools
  • Turn on Custom Object Formatter in Chrome DevTools
• Firefox:
  • Vue.js devtools
  • Turn on Custom Object Formatter in Firefox DevTools

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

使用教程

<template>
    <div id="app">
      <FileViewer :fileList="fileList" :kkFileViewHost="kkFileViewHost" :leftFileList="leftFileList"/>
    </div>

</template>

<script setup>
import { FileViewer } from 'sxdfilepreviewv3';
import  'sxdfilepreviewv3/style';

const fileList = [
  {
    "name": "000002.tiff",
    "url": "http://localhost:3000/files/000002.tiff"
  },
  {
    "name": "2.jpg",
    "url": "http://localhost:3000/files/2.jpg"
  }
];
const kkFileViewHost = 'http://127.0.0.1:8012';
const leftFileList = false

</script>

如果引用中出现图片显示不出来，请检查图片路径是否正确 在vite.config.js中添加 optimizeDeps: { exclude: ['sxdfilepreviewv3'] // 禁止预构建你的组件 },

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  optimizeDeps: {
    exclude: ['sxdfilepreviewv3'] // 禁止预构建你的组件
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})