【亲测免费】 Vue Handsontable 官方教程

1. 项目的目录结构及介绍

Vue Handsontable 项目的目录结构如下：

vue-handsontable-official/
├── babelrc
├── codesandbox
├── config
├── CONTRIBUTING.md
├── github
├── gitignore
├── LICENSE
├── npmignore
├── package-lock.json
├── package.json
├── README.md
├── release.json
├── rollup.config.js
├── src
│   ├── components
│   ├── handsontable.vue
│   ├── index.js
│   ├── mixins
│   ├── plugins
│   ├── settings.js
│   ├── utils
│   └── wrappers
├── test
│   ├── e2e
│   ├── unit
│   └── test-tsconfig.json
├── travis.yml
└── tsconfig.json

目录介绍

• babelrc: Babel 配置文件。
• codesandbox: CodeSandbox 配置文件。
• config: 项目配置文件。
• CONTRIBUTING.md: 贡献指南。
• github: GitHub 相关文件。
• gitignore: Git 忽略文件配置。
• LICENSE: 项目许可证。
• npmignore: npm 忽略文件配置。
• package-lock.json: npm 锁定文件。
• package.json: 项目依赖和脚本配置。
• README.md: 项目说明文档。
• release.json: 发布配置文件。
• rollup.config.js: Rollup 打包配置文件。
• src: 源代码目录。
  • components: Vue 组件。
  • handsontable.vue: 主要组件。
  • index.js: 入口文件。
  • mixins: 混入文件。
  • plugins: 插件文件。
  • settings.js: 设置文件。
  • utils: 工具函数。
  • wrappers: 包装器文件。
• test: 测试目录。
  • e2e: 端到端测试。
  • unit: 单元测试。
  • test-tsconfig.json: 测试 TypeScript 配置文件。
• travis.yml: Travis CI 配置文件。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.js，它是整个项目的入口文件。该文件主要负责导出 Vue Handsontable 组件，使其可以在其他项目中使用。

// src/index.js
import Handsontable from './handsontable.vue';

Handsontable.install = function(Vue) {
  Vue.component(Handsontable.name, Handsontable);
};

export default Handsontable;

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。以下是一些关键部分：

{
  "name": "vue-handsontable-official",
  "version": "5.0.0",
  "description": "Vue Data Grid with Spreadsheet Look & Feel. Official Vue wrapper for Handsontable.",
  "main": "dist/vue-handsontable.min.js",
  "scripts": {
    "build": "rollup -c",
    "test": "npm run test:unit && npm run test:e2e",
    "test:unit": "jest --config test/unit/jest.config.js",
    "test:e2e": "cypress run"
  },
  "dependencies": {
    "handsontable": "^8.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "jest": "^24.9.0",
    "rollup": "^1.27.8",
    "vue": "^2.6.10"
  }
}

rollup.config.js

rollup.config.js 文件是 Rollup 的打包配置文件，用于将项目打包成最终的 JavaScript 文件。

// rollup.config.js
import vue from 'rollup-plugin-vue';
import