fdp-ui v0.1.10

fdp-ui 基于vue-cli(3.x)手脚架搭建个人vue组件库框架，支持组件按需加载和全量加载

项目引入

npm i fdp-ui -S

yarn i fdp-ui -S

<!-- 引入样式 -->
<link rel="stylesheet" href="./fdp-ui.css">
<!-- 引入组件库 -->
<script src="./fdp-ui.umd.js"></script>

全量加载

在项目入口文件引入全量模块和全局样式表使用（与element-ui组件用法一致）

import fdpUi from 'fdp-ui'

import 'fdp-ui/lib/fdp-ui.css'

Vue.use(fdpUi)

按需加载

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目提及的目的（与element-ui组件按需加载用法一致）

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

(vue-cli2.X) 然后，将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

(vue-cli3.X) 或者，将 babel.config.js 修改为：

module.exports = {
    presets: [
        '@vue/app',
    ],
    plugins: [
        ["component", {
            "libraryName": "fdp-ui",
            "libDir": "packages",
            "style": false
            }
        ]
    ]
}

在项目入口文件引入单独模块使用（与element-ui组件按需加载用法一致）

接下来，如果你只希望引入部分组件，那么需要在 main.js 中写入以下内容('fdpUi1','fdpUi2'...为组件模块名)：

import {fdpUi1,fdpUi2,...} from 'fdp-ui'

Vue.use(fdpUi1)
Vue.use(fdpUi2)
...

###在.vue模版中使用即可

<fdp-ui1></fdp-ui1>
<fdp-ui2></fdp-ui2>
...

全局配置

暂时没有完善，可根据需求在packages/index.js中去设置