在VUE 3中使用SpreadJS（一）
本帖最后由 dexteryao 于 2021-11-12 12:15 编辑SpreadJS V14.2 已正式支持Vue3，去体验新版本吧
最近VUE 3的热度持续走高，已经有人询问SpriedJS是否支持VUE 3了。SpreadJS作为一款原生JavaScript控件，并且符合UMD规范，所以任何框架和场景下都可以使用。目前SpreadJS针对VUE 2提供了组件封装，在VUE3正式发布前，我们先自己实现一个封装SpreadJS的组件。
关于在VUE 3中使用SpreadJS，将通过两篇文章说明，首先完成第一步创建VUE 3项目和SpreadJS组件，下一篇讲介绍通过Composition API的方式使用SpreadJS功能。
直接开始创建项目
一．使用vite创建VUE 3项目
vite是专门针对于开发VUE 3项目的开发工具，关于vite的更多信息可以参考github - https://github.com/vitejs/vite。
1. 安装vite
npm install -g vite2. 创建VUE 3项目
npm init vite-app first-spreadjs-vue3vite 已经自带了VUE 3.0 bate版，无需安装vue@next直接安装运行即可。
cd first-spreadjs-vue3
npm install
npm run dev
vite 无需编译，瞬间就启动好了，不用担心频发保存编译浪费时间
浏览器进入http://localhost:3000/ 效果如下，点击按钮计数
二．创建SpreadJS组件
创建一个SpreadSheets组件，方便在其他页面中引用
1. src/components文件夹下创建 SpreadSheets.vue,参考HelloWorld添加template和script。template中写入SpreadJS作为示例
<template>
<div>
SpreadJS
</div>
</template>
<script>
export default {
name: 'SpreadSheets',
props: {
}
}
</script>2. App页面引用SpreadSheets组件
同样参考HelloWorld，引入SpreadSheets。刷新页面显示SpreadJS
<template>
<div>
<!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
<HelloWorld msg="Hello Vue 3.0 + Vite" />
<SpreadSheets></SpreadSheets>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import SpreadSheets from './components/SpreadSheets.vue'
export default {
name: 'App',
components: {
HelloWorld,
SpreadSheets
}
}
</script>3. 安装SpreadJS
停止项目运行，安装SpreadJS后重新运行
npm install --save @grapecity/spread-sheets4. 在SpreadSheets.vue组件中初始化SpreadJS
通过ref获取SpreadJS host对象，并且在页面Mounted之后初始化SpreadJS
<template>
<div>
SpreadJS
<div ref="ssHost" style="height:500px;width:100%;text-align: left;"></div>
</div>
</template>
<script>
import { onMounted, ref} from "vue";
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
import GC from "@grapecity/spread-sheets"
export default {
name: 'SpreadSheets',
props: {
},
setup(props) {
const ssHost = ref(null);
onMounted(() => {
var workbook = new GC.Spread.Sheets.Workbook(ssHost.value);
});
return {
ssHost
};
}
}
</script>
效果如图，下一篇将通过Events实现合并拆分单元格的功能
为什么我打开Network的链接，显示未注册啊，明明已经注册了的 sunnyLee 发表于 2021-11-12 10:37
为什么我打开Network的链接，显示未注册啊，明明已经注册了的
出现这个问题是因为没有添加授权，在没有授权的情况下，只能通过localhost本地访问。
页:
[1]