Vuetable-2 开源项目教程

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

Vuetable-2 是一个用于 Vue 2.x 的数据表格组件。以下是其基本的目录结构：

vuetable-2/
├── dist/
│   ├── vuetable-2.js
│   └── vuetable-2.min.js
├── src/
│   ├── components/
│   │   ├── Vuetable.vue
│   │   ├── VuetablePagination.vue
│   │   └── VuetablePaginationInfo.vue
│   ├── mixins/
│   │   └── VuetableMixin.js
│   ├── utils/
│   │   └── index.js
│   └── index.js
├── examples/
│   ├── basic/
│   ├── bootstrap/
│   └── semantic-ui/
├── package.json
├── README.md
└── webpack.config.js

目录结构介绍

• dist/: 包含编译后的文件，如 vuetable-2.js 和 vuetable-2.min.js。
• src/: 源代码目录，包含组件、混入和工具函数。
  • components/: 包含主要的 Vue 组件，如 Vuetable.vue、VuetablePagination.vue 和 VuetablePaginationInfo.vue。
  • mixins/: 包含混入文件，如 VuetableMixin.js。
  • utils/: 包含工具函数。
  • index.js: 项目的入口文件。
• examples/: 包含示例项目，如 basic/、bootstrap/ 和 semantic-ui/。
• package.json: 项目的配置文件，包含依赖和脚本。
• README.md: 项目的说明文档。
• webpack.config.js: Webpack 配置文件。

2. 项目的启动文件介绍

Vuetable-2 的启动文件是 src/index.js。这个文件负责注册和导出 Vuetable-2 组件。

import Vuetable from './components/Vuetable.vue'
import VuetablePagination from './components/VuetablePagination.vue'
import VuetablePaginationInfo from './components/VuetablePaginationInfo.vue'

function install(Vue) {
  Vue.component('vuetable', Vuetable)
  Vue.component('vuetable-pagination', VuetablePagination)
  Vue.component('vuetable-pagination-info', VuetablePaginationInfo)
}

export default {
  install,
  Vuetable,
  VuetablePagination,
  VuetablePaginationInfo
}

启动文件介绍

• 导入组件: 导入主要的 Vue 组件。
• 安装函数: 定义 install 函数，用于全局注册组件。
• 导出: 导出安装函数和组件，以便在其他项目中使用。

3. 项目的配置文件介绍

Vuetable-2 的配置文件主要包括 package.json 和 webpack.config.js。

package.json

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

{
  "name": "vuetable-2",
  "version": "1.6.0",
  "description": "data table simplify -- datatable component for Vue 2.x",
  "main": "dist/vuetable-2.js",
  "scripts": {
    "dev": "webpack --watch",
    "build": "webpack"
  },
  "dependencies": {
    "vue": "^2.2.6",
    "axios": "^0.16.1"
  },
  "devDependencies": {
    "webpack": "^2.2.1"
  }
}

webpack.config.js

webpack.config.js 文件包含了 Webpack 的配置信息，用于打包和编译项目。

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'vuetable-2.js',
    libraryTarget: 'umd'
  },
  module: