在VUE 3中使用SpreadJS（一）

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

1. npm install -g vite

复制代码

2.        创建VUE 3项目

1. npm init vite-app first-spreadjs-vue3

复制代码

vite 已经自带了VUE 3.0 bate版，无需安装vue@next直接安装运行即可。

1. cd first-spreadjs-vue3
   
2. npm install
   
3. npm run dev
   

复制代码

vite 无需编译，瞬间就启动好了，不用担心频发保存编译浪费时间
浏览器进入http://localhost:3000/ 效果如下，点击按钮计数


二．创建SpreadJS组件
创建一个SpreadSheets组件，方便在其他页面中引用
1.        src/components文件夹下创建 SpreadSheets.vue,参考HelloWorld添加template和script。template中写入SpreadJS作为示例

1. <template>
   
2.   <div>
   
3.       SpreadJS
   
4.   </div>
   
5. </template>
   
6. 
   
7. <script>
   
8. export default {
   
9.   name: 'SpreadSheets',
   
10.   props: {
    
11.   }
    
12. }
    
13. </script>

复制代码

2.        App页面引用SpreadSheets组件
同样参考HelloWorld，引入SpreadSheets。刷新页面显示SpreadJS

1. <template>
   
2. <div>
   
3.   <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
   
4.   <HelloWorld msg="Hello Vue 3.0 + Vite" />
   
5.   <SpreadSheets></SpreadSheets>
   
6. </div>
   
7. </template>
   
8. 
   
9. <script>
   
10. import HelloWorld from './components/HelloWorld.vue'
    
11. import SpreadSheets from './components/SpreadSheets.vue'
    
12. 
    
13. export default {
    
14.   name: 'App',
    
15.   components: {
    
16.     HelloWorld,
    
17.     SpreadSheets
    
18.   }
    
19. }
    
20. </script>

复制代码

3.        安装SpreadJS
停止项目运行，安装SpreadJS后重新运行

1. npm install --save @grapecity/spread-sheets

复制代码

4.        在SpreadSheets.vue组件中初始化SpreadJS
通过ref获取SpreadJS host对象，并且在页面Mounted之后初始化SpreadJS

1. <template>
   
2.   <div>
   
3.       SpreadJS
   
4.     <div ref="ssHost" style="height:500px;width:100%;text-align: left;"></div>
   
5.   </div>
   
6. </template>
   
7. 
   
8. <script>
   
9. 
   
10. import { onMounted, ref} from "vue";
    
11. import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
    
12. import GC from "@grapecity/spread-sheets"
    
13. export default {
    
14.   name: 'SpreadSheets',
    
15.   props: {
    
16.   },
    
17.   setup(props) {
    
18.     const ssHost = ref(null);
    
19.     onMounted(() => {
    
20.       var workbook = new GC.Spread.Sheets.Workbook(ssHost.value);
    
21.     });
    
22.     return {
    
23.       ssHost
    
24.     };
    
25.   }
    
26. }
    
27. </script>

复制代码

效果如图，下一篇将通过Events实现合并拆分单元格的功能

为什么我打开Network的链接，显示未注册啊，明明已经注册了的

sunnyLee 发表于 2021-11-12 10:37
为什么我打开Network的链接，显示未注册啊，明明已经注册了的

出现这个问题是因为没有添加授权，在没有授权的情况下，只能通过localhost本地访问。