vef-ui

vefUI组件库

使用组件库

• 安装组件库

    npm install vef-ui --save
  

• 全局导入

    import vefUI from 'vef-ui'
    import 'vef-ui/lib/vefui.css'
    Vue.use(vefUI)
  

组件库封装

• 目录调整

  根目录创建两个文件夹packages和examples

    packages: 用于存放所有的组件
    examples: 用于进行测试
  

• vue.config.js配置

    const path = require('path')
    module.exports = {
        pages: {
            index: {
            entry: 'examples/main.js',
            template: 'public/index.html',
            filename: 'index.html'
            }
        },
        // 扩展 webpack 配置，使 packages 加入编译
        chainWebpack: config => {
            config.module
            .rule('js')
            .include.add(path.resolve(__dirname, 'packages')).end()
            .use('babel')
            .loader('babel-loader')
            .tap(options => {
                // 修改它的选项...
                return options
            })
        }
    }
  

• 统一导出packages中所有的组件

    // 统一导出
    import Button from './button'
    import Dialog from './dialog'
    import Input from './input'
    import Checkbox from './checkbox'
    import Radio from './radio'
    import RadioGroup from './radio-group'
    import Switch from './switch'
    import CheckboxGroup from './checkbox-group'
    import Form from './form'
    import FormItem from './form-item'
    import './fonts/font.scss'
  
    // 存储组件列表
    const components = [
        Button,
        Dialog,
        Input,
        Checkbox,
        Radio,
        RadioGroup,
        Switch,
        CheckboxGroup,
        Form,
        FormItem
    ]
  
    // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
    const install = function (Vue) {
        // 遍历注册全局组件
        components.forEach(component => {
            Vue.component(component.name, component)
        })
    }
  
    // 判断是否是直接引入文件,如果是，就不用调用 Vue.use()
    if (typeof window !== 'undefined' && window.Vue) {
        install(window.Vue)
    }
  
    // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
    export default {
        install
    }
  

• 修改package.json文件

    "private": false,
    "main": "lib/vefui.umd.min.js"
    在scripts中新增一条打包命令:"lib": "vue-cli-service build --target lib --name vefui --dest lib packages/index.js"
  

• 增加 `.npmignore文件

    # 忽略目录
    examples/
    packages/
    public/
  
    # 忽略指定文件
    vue.config.js
    babel.config.js
    *.map
  

• 发布到npm

    npm login
    npm publish