vue3+ts+vite项目中使用spreadjs，通过script标签引入spreadjs可以提高打包速度

https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/quickstart/quickstart-js

右键另存这个官方的示例页面可以下载全部js文件

https://demo.grapecity.com.cn/SpreadJS/WebDesigner/index.html

spread.html:

<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="spreadjs culture" content="zh-cn" /><title>SpreadJS Designer</title><linkhref="./public/spread/gc.spread.sheets.excel2013white.css"rel="stylesheet"type="text/css"/><linkhref="./public/spread/gc.spread.sheets.designer.17.0.2.min.css"rel="stylesheet"type="text/css"/></head><body unselectable="on"><divid="gc-designer-container"role="application"style="height: 600px"></div><script src="./public/spread/gc.spread.sheets.all.min.js"></script><script async src="./public/spread/gc.spread.sheets.shapes.min.js"></script><script async src="./public/spread/gc.spread.sheets.charts.min.js"></script><scriptasyncsrc="./public/spread/gc.spread.sheets.slicers.min.js"></script><script async src="./public/spread/gc.spread.sheets.print.min.js"></script><scriptasyncsrc="./public/spread/gc.spread.sheets.barcode.min.js"></script><script async src="./public/spread/gc.spread.sheets.pdf.min.js"></script><scriptasyncsrc="./public/spread/gc.spread.pivot.pivottables.min.js"></script><scriptasyncsrc="./public/spread/gc.spread.sheets.tablesheet.min.js"></script><scriptasyncsrc="./public/spread/gc.spread.sheets.ganttsheet.min.js"></script><scriptasyncsrc="./public/spread/gc.spread.report.reportsheet.min.js"></script><scriptasyncsrc="./public/spread/gc.spread.sheets.formulapanel.min.js"></script><script async src="./public/spread/gc.spread.excelio.min.js"></script><script async src="./public/spread/gc.spread.sheets.io.min.js"></script><scriptasyncsrc="./public/spread/gc.spread.sheets.resources.zh.min.js"></script><scriptasyncsrc="./public/spread/gc.spread.sheets.designer.resource.cn.17.0.2.min.js"></script><scriptasyncsrc="./public/spread/gc.spread.sheets.designer.all.17.0.2.min.js"></script><script type="text/javascript">window.onload = function () {//Apply License//GC.Spread.Sheets.LicenseKey = 'sjs-distribution-key';//GC.Spread.Sheets.Designer.LicenseKey = 'designer-component-distribution-key';var config = GC.Spread.Sheets.Designer.DefaultConfigconfig.commandMap = {Welcome: {title: 'Welcome',text: 'Welcome',iconClass: 'ribbon-button-welcome',bigButton: 'true',commandName: 'Welcome',execute: function (context, propertyName, fontItalicChecked) {alert('Welcome to new designer.')},},}config.ribbon[0].buttonGroups.unshift({label: 'NewDesigner',thumbnailClass: 'welcome',commandGroup: {children: [{direction: 'vertical',commands: ['Welcome'],},],},})var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById('gc-designer-container'),config)}</script></body>
</html>

index.html:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" href="/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite App</title><linkhref="/spread/gc.spread.sheets.excel2013white.css"rel="stylesheet"type="text/css"/><linkhref="/spread/gc.spread.sheets.designer.17.0.2.min.css"rel="stylesheet"type="text/css"/></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script><script src="/spread/gc.spread.sheets.all.min.js"></script><script src="/spread/gc.spread.sheets.shapes.min.js"></script><script src="/spread/gc.spread.sheets.charts.min.js"></script><script src="/spread/gc.spread.sheets.slicers.min.js"></script><script src="/spread/gc.spread.sheets.print.min.js"></script><script src="/spread/gc.spread.sheets.barcode.min.js"></script><script src="/spread/gc.spread.sheets.pdf.min.js"></script><script src="/spread/gc.spread.pivot.pivottables.min.js"></script><script src="/spread/gc.spread.sheets.tablesheet.min.js"></script><script src="/spread/gc.spread.sheets.ganttsheet.min.js"></script><script src="/spread/gc.spread.report.reportsheet.min.js"></script><script src="/spread/gc.spread.sheets.formulapanel.min.js"></script><script src="/spread/gc.spread.excelio.min.js"></script><script src="/spread/gc.spread.sheets.io.min.js"></script><script src="/spread/gc.spread.sheets.resources.zh.min.js"></script><script src="/spread/gc.spread.sheets.designer.resource.cn.17.0.2.min.js"></script><script src="/spread/gc.spread.sheets.designer.all.17.0.2.min.js"></script></body>
</html>

designer/Index.vue:

<template><div id="gc-designer-container" style="height: 600px"></div>
</template><script setup lang="ts">
import { onMounted } from 'vue'const init = () => {//Apply License//GC.Spread.Sheets.LicenseKey = 'sjs-distribution-key';//GC.Spread.Sheets.Designer.LicenseKey = 'designer-component-distribution-key';//@ts-ignorelet config = GC.Spread.Sheets.Designer.DefaultConfigconfig.commandMap = {Welcome: {title: 'Welcome',text: 'Welcome',iconClass: 'ribbon-button-welcome',bigButton: 'true',commandName: 'Welcome',// @ts-ignoreexecute: function (context, propertyName, fontItalicChecked) {alert('Welcome to new designer.')},},}config.ribbon[0].buttonGroups.unshift({label: 'NewDesigner',thumbnailClass: 'welcome',commandGroup: {children: [{direction: 'vertical',commands: ['Welcome'],},],},})//@ts-ignorelet designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById('gc-designer-container'),config)let sheet = designer.Spread.getActiveSheet()sheet.getCell(0, 0)//@ts-ignore.vAlign(GC.Spread.Sheets.VerticalAlign.center).value('Hello')console.log('success')
}onMounted(() => {init()
})
</script>

sheet/Index.vue:

<template><div id="gc-sheet-container" style="height: 600px"></div>
</template><script setup lang="ts">
import { onMounted } from 'vue'const init = () => {//Apply License//GC.Spread.Sheets.LicenseKey = 'sjs-distribution-key';//GC.Spread.Sheets.Designer.LicenseKey = 'designer-component-distribution-key';//@ts-ignorelet spread = new GC.Spread.Sheets.Workbook(document.getElementById('gc-sheet-container'),{ sheetCount: 1 })let sheet = spread.getSheet(0)sheet.setText(0, 0, 'hello')console.log('success')
}onMounted(() => {init()
})
</script>

package.json:

{"name": "m-spread","version": "0.0.0","private": true,"type": "module","scripts": {"dev": "vite","build": "run-p type-check \"build-only {@}\" --","build1": "node --max-old-space-size=8096 ./node_modules/vite/bin/vite.js build","preview": "vite preview","build-only": "vite build","type-check": "vue-tsc --build --force","lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"},"dependencies": {"pinia": "^2.1.7","rollup-plugin-visualizer": "^5.12.0","vue": "^3.4.29","vue-router": "^4.3.3"},"devDependencies": {"@rushstack/eslint-patch": "^1.8.0","@tsconfig/node20": "^20.1.4","@types/node": "^20.14.5","@vitejs/plugin-vue": "^5.0.5","@vue/eslint-config-typescript": "^13.0.0","@vue/tsconfig": "^0.5.1","eslint": "^8.57.0","eslint-plugin-vue": "^9.23.0","npm-run-all2": "^6.2.0","typescript": "~5.4.0","vite": "^5.3.1","vite-plugin-vue-devtools": "^7.3.1","vue-tsc": "^2.0.21"}
}

vite.config.js:

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import { visualizer } from 'rollup-plugin-visualizer'// https://vitejs.dev/config/
export default defineConfig({server: {port: 3006},plugins: [vue(),vueDevTools(),visualizer()],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})