vfan-ui

learning for element

Usage no npm install needed!

<script type="module">
  import vfanUi from 'https://cdn.skypack.dev/vfan-ui';
</script>

README

vfan-ui

起源

vfan-ui 是一套基于Vue开发UI 组件库。开发这个组件库的目的在于:

  1. 扩展Element-UI中没有的组件,和扩展Element-UI组件中的一些组件功能。
  2. 对工作中的常用的基于业务场景的组件的开发,方便在业务中使用。

说明

  • 组件库的依赖情况:
  1. 一部分是基于Element-UI中的组件进行开发,减少没必要的组件封装,如单选、复选、表单等,减少没必要的代码冗余。
  2. 还有一部分是不依赖于Element-UI,可以独立出来的组件。

优点

  1. 代码精简,组件的复用性和扩展性强。
  2. 直接引入和按需引入,可以根据需要灵活选择。
  3. 组件的延伸性强,不强依赖于某个组件库,可以根据项目中不同的组件库(如:Element-UIiViewant-design等)轻松植入。

npm 安装

npm i vfan-ui

使用说明

你可以引入整个 vfan-ui,也可进行按需加载组件

  1. 完整引入 在 main.js 中写入以下内容:
import Vue from 'vue';
import  vfanUi from 'vfan-ui';
import "vfan-ui/dist/vfan-ui.css";
import App from './App.vue';

Vue.use(vfanUi);

new Vue({
  el: '#app',
  render: h => h(App)
});
  1. 按需引入 借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。

    然后,将 .babelrc 修改为:

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "vfan-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

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

import Vue from 'vue';
import {Button} from 'vfan-ui';
import App from './App.vue';

Vue.use(Button);

new Vue({
  el: '#app',
  render: h => h(App)
});