<commit_before># 快速上手
> 开始旅程

## 安装

```
npm install vue-data-tables
或
yarn install vue-data-tables
```

# 引入

## 引入 element-ui
正如[前文](/zh-cn/?id=vue-data-tables)中提到的，本库依赖于 [element-ui](http://element.eleme.io/) 的 [el-table](http://element.eleme.io/#/zh-CN/component/table), [el-table-column](http://element.eleme.io/#/zh-CN/component/table#table-column-attributes), [el-button](http://element.eleme.io/#/zh-CN/component/button) 和 [el-pagination](http://element.eleme.io/#/zh-CN/component/pagination) 组件，所以在引入 `vue-data-tables` 之前, 我们需要先完整的引入 `element-ui` 或者[按需引入](http://element.eleme.io/#/zh-CN/component/quickstart) `el-table`, `el-table-column`, `el-button` 和 `el-pagination` 这4个组件。

```
// entirely import
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
```

> 参考 [element-ui](http://element.eleme.io/#/en-US/component/quickstart) 文档去了解如果做按需引入。

`el-pagination` 这个组件涉及 L10N, 所以如果需要的话，可以参考[文档](http://element.eleme.io/#/en-US/component/i18n#internationalization)配置L10N

```
// 设置L10N语言为英语
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'

locale.use(lang)
```

## 引入 vue-data-tables

### 引入打包之后的 vue-data-tables (推荐, 简单)
```js
// 分别导入 DataTables 和 DataTablesServer
import { DataTables, DataTablesServer } from 'vue-data-tables'
Vue.use(DataTables)

// 同时使用 DataTables 和 DataTablesServer
import VueDataTables from 'vue-data-tables'
Vue.use(VueDataTables)
```

## 引入 vue-data-tables 源码
如果你对引入库的大小有苛刻的要求，可以通过引入本库源码的方式来，降低引入代码的体积。

> 引入源码的前提是你使用的 vue-loader 是 15+ 的版本。

1. 安装并配置本库的依赖 [lodash](https://lodash.com/) 和 babel 插件:
  * [babel-plugin-lodash](https://github.com/lodash/babel-plugin-lodash)
  * [babel-plugin-vue-jsx-sync](https://github.com/njleonzhang/babel-plugin-vue-jsx-sync)
  * [babel-plugin-jsx-v-model](https://github.com/nickmessing/babel-plugin-jsx-v-model)
  * [babel-plugin-transform-vue-jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx)

* 修改 webpack 配置，让 babel 去处理 vue-data-tables 的源码
```
  // webpack config
  {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: file => {
      return /node_modules/.test(file) &&
        (!/\.vue\.js/.test(file) &&<commit_msg>typo fix in cn doc<commit_after># 快速上手
> 开始旅程

## 安装

```
npm install vue-data-tables
或
yarn add vue-data-tables
```

# 引入

## 引入 element-ui
正如[前文](/zh-cn/?id=vue-data-tables)中提到的，本库依赖于 [element-ui](http://element.eleme.io/) 的 [el-table](http://element.eleme.io/#/zh-CN/component/table), [el-table-column](http://element.eleme.io/#/zh-CN/component/table#table-column-attributes), [el-button](http://element.eleme.io/#/zh-CN/component/button) 和 [el-pagination](http://element.eleme.io/#/zh-CN/component/pagination) 组件，所以在引入 `vue-data-tables` 之前, 我们需要先完整的引入 `element-ui` 或者[按需引入](http://element.eleme.io/#/zh-CN/component/quickstart) `el-table`, `el-table-column`, `el-button` 和 `el-pagination` 这4个组件。

```
// entirely import
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
```

> 参考 [element-ui](http://element.eleme.io/#/en-US/component/quickstart) 文档去了解如果做按需引入。

`el-pagination` 这个组件涉及 L10N, 所以如果需要的话，可以参考[文档](http://element.eleme.io/#/en-US/component/i18n#internationalization)配置L10N

```
// 设置L10N语言为英语
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'

locale.use(lang)
```

## 引入 vue-data-tables

### 引入打包之后的 vue-data-tables (推荐, 简单)
```js
// 分别导入 DataTables 和 DataTablesServer
import { DataTables, DataTablesServer } from 'vue-data-tables'
Vue.use(DataTables)
Vue.use(DataTablesServer)

// 同时使用 DataTables 和 DataTablesServer
import VueDataTables from 'vue-data-tables'
Vue.use(VueDataTables)
```

## 引入 vue-data-tables 源码
如果你对引入库的大小有苛刻的要求，可以通过引入本库源码的方式来，降低引入代码的体积。

> 引入源码的前提是你使用的 vue-loader 是 15+ 的版本。

1. 安装并配置本库的依赖 [lodash](https://lodash.com/) 和 babel 插件:
  * [babel-plugin-lodash](https://github.com/lodash/babel-plugin-lodash)
  * [babel-plugin-vue-jsx-sync](https://github.com/njleonzhang/babel-plugin-vue-jsx-sync)
  * [babel-plugin-jsx-v-model](https://github.com/nickmessing/babel-plugin-jsx-v-model)
  * [babel-plugin-transform-vue-jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx)

* 修改 webpack 配置，让 babel 去处理 vue-data-tables 的源码
```
  // webpack config
  {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: file => {
      return /node_modules/.test(file) &&
        (!/\.vue\.js/.test(file) &&
{'fraction_non_alphanumeric': 0.1888964116452268, 'fraction_numerical': 0.005416384563303994, 'mean_word_length': 4.282479141835519, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 11, 'https://': 10, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1647437', 'n_tokens_mistral': 2091, 'n_tokens_neox': 2080, 'n_words': 251}