data-view-component

基于 vue 的数据组件库

安装

npm install --save data-view-component

引入组件

完整引入

在 main.js 中写入以下内容 :

import Vue from 'vue'
import DataView from 'data-view-component'
 
Vue.use(DataView)

按需引入

借助 babel-plugin-import，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先安装 babel-plugin-import :

npm install --dev babel-plugin-component

然后修改 .babelrc 为 :

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "not ie <= 8"
          ]
        }
      }
    ],
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    [
      "import",
      {
        "libraryName": "data-view",
        "style": false,
        "libraryDirectory": "packages/components",
        "camel2DashComponentName": false
      }
    ]
  ]
}

由于内部使用时，默认在项目下都使用 less 作为预编译器，组件库则直接使用了 .less 文件，所以如需按需加载的话，需先安装好less

npm install --dev less less-loader

接下来，即可只引入自己所要使用的组件了

import Vue from 'vue'
import {DataHeader, DataFooter} from 'data-view-component'
 
Vue.use(DataHeader)
Vue.use(DataFooter)