只需3 分钟,就能创建 一个SpreadJS 的 Vue 项目

概述

SpreadJS纯前端表格控件 V11.2(SP2)版本已经全面支持了Vue拓展,下面我们看下如何配合VUE CLI,只需3分钟快速构建一个SpreadJS Vue工程。

安装vue-cli(耗时30S)

通过命令```npm install -g @vue/cli ```安装(cli.vuejs.org/)

创建vue-spreadjs工程(耗时1Min)

请根据项目需求配置工程选项:

通过npm install 或者在package.json中添加引用的方式安装spread.sheets(耗时20S)

"@grapecity/spread-excelio": "^11.2.3",
"@grapecity/spread-sheets": "^11.2.3",
"@grapecity/spread-sheets-print": "^11.2.3",
"@grapecity/spread-sheets-resources-zh": "^11.2.3",
"@grapecity/spread-sheets-vue": "^11.2.3",
复制代码

修改router/index.js为spreadJS页面添加router(耗时30S)

routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/spreadjs',
name: 'spreadJS',
component: SpreadJS
}
]
复制代码

新建SpreadJS Component(耗时30S)

请在 components 下添加SpreadJS.vue文件

template 内容:


复制代码

Style内容:


复制代码

Script内容:


复制代码

workbookInitialized是spread初始化完成后的回调事件,我们可以在事件中得到初始化好的workbook对象。

部署授权需要同时给Sheets和ExcelIO同时添加,部署授权可以在全局config中配置。

运行项目(耗时10S)

创建 npm install 依赖后,即可通过npm start启动项目

浏览器访问 http://localhost:8081/#/spreadjs 查看效果。

只需3分钟,一个SpreadJS 的Vue项目就创建完成了,当然纯前端表格控件SpreadJS的强大不仅于此,去实际试用感受一下吧

扩展阅读

这篇文章,讲述的是《3分钟创建 SpreadJS 的 React 项目》,需要的同学请深入了解。

纯前端表格控件SpreadJS,是市面上布局与功能都与 Excel 高度类似的一款表格控件,全中文操作界面,适用于.NET、Java、移动端等多个平台的类 Excel 数据开发,备受华为、海信、立信、中国平安、中国能建、中通快递、金麒麟和北京神软等客户青睐。

关于葡萄城

赋能开发者!葡萄城公司成立于 1980 年,是全球领先的集开发工具、商业智能解决方案、管理系统设计工具于一身的软件和服务提供商。西安葡萄城是其在中国的分支机构,面向全球市场提供软件研发服务,并为中国企业的信息化提供国际先进的开发工具、软件和研发咨询服务。葡萄城的控件和软件产品在国内外屡获殊荣,在全球被数十万家企业、学校和政府机构广泛应用。​


你可能感兴趣的:(只需3 分钟,就能创建 一个SpreadJS 的 Vue 项目)