boyaui1 v0.1.0

boya-ui

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

效果演示

• 初始化vue项目

vue create demo

• 安装组件库

yarn add boya-ui

• 全局导入

import boyaui1 from 'boya-ui'
import 'boya-ui/dist/boya-ui.css'

Vue.use(boyaui1)

• 使用组件

<template>
  <div id="app">
    <boya-button type="success" @click="visible=true">显示登录框</boya-button>
    <boya-dialog title="用户登录" :visible.sync="visible" width="30%">
      <boya-form :model="model" label-width="80px">
        <boya-form-item label="用户名">
          <boya-input v-model="model.username" placeholder="请输入用户名" clearable></boya-input>
        </boya-form-item>
        <boya-form-item label="用户密码">
          <boya-input v-model="model.password" placeholder="请输入用户密码" show-password></boya-input>
        </boya-form-item>
        <boya-form-item label="即时配送">
          <boya-switch v-model="model.soon" active-color="green" inactive-color="red"></boya-switch>
        </boya-form-item>
        <boya-form-item label="爱好">
          <boya-checkbox-group v-model="model.hobby">
            <boya-checkbox label="篮球"></boya-checkbox>
            <boya-checkbox label="足球"></boya-checkbox>
            <boya-checkbox label="乒乓球"></boya-checkbox>
          </boya-checkbox-group>
        </boya-form-item>
        <boya-form-item label="性别">
          <boya-radio-group v-model="model.gender">
            <boya-radio label="1">男</boya-radio>
            <boya-radio label="0">女</boya-radio>
          </boya-radio-group>
        </boya-form-item>
      </boya-form>
      <template v-slot:footer>
        <boya-button type="primary" @click="login">登录</boya-button>
        <boya-button @click="visible=false">取消</boya-button>
      </template>
    </boya-dialog>
  </div>
</template>

常见组件封装

项目初始化

使用vue-cli脚手架快速搭建一个vue项目

// 选择scss babel
vue create vue-ui

启动项目

cd vue-ui
yarn serve/npm run serve

button组件

参数支持

事件支持

icon的支持

在main.js中引入字体图标文件

import './assets/fonts/iconfont.scss'

dialog组件

参数支持

事件支持

插槽说明

input组件

参数支持

事件支持

v-model语法糖

• v-model语法糖

给表单元素使用v-model，实质上相当于给组件传递了value属性以及监听了input事件
<input type="text" v-model="value">
<input v-bind:value="value" v-on:input="value= $event.target.value"/>

• clearable与show-password处理

如果给input组件传入clearable属性，会显示一个清空的按钮，如果传入show-password，则会显示一个用于切换密码显示的处理

其他常见事件的支持

    handleFocus (e) {
      this.$emit('focus', e)
    },
    handleBlur (e) {
      this.$emit('blur', e)
    },
    handleChange (e) {
      this.$emit('change', e.target.value)
    }

switch组件

参数支持

事件支持

name属性支持

用户在使用switch组件的时候，实质上是当成表单元素来使用的。因此可能会用到组件的name属性。因此需要在switch组件中添加一个checkbox，并且当值改变的时候，也需要设置checkbox的value值

radio组件

参数支持

radio-group组件

使用radio组件的缺点，需要给每个组件都绑定v-mode,可以使用radio-group包裹

checkbox组件、checkbox-group组件

使用checkbox-group组件包裹checkbox

封装成UI组件库

目录调整

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

packages: 用于存放所有的组件
examples: 用于进行测试,把src改成examples

• 把components中所有的组件放入到packages中

• 把fonts放到packages中

• 删除原来的src目录

vue.config.js配置

新增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
}

测试

在examples中的main.js中进行导入测试

import Vue from 'vue'
import App from './App.vue'

import HeimaUI from '../packages'

Vue.use(HeimaUI)

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

发布到npm与github

发布到github

发布到npm

https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93

• 在scripts中新增一条 打包命令

"lib": "vue-cli-service build --target lib packages/index.js"

• 发布到npm

修改package.json文件

"private": false,
"main": "dist/vue-ui.umd.min.js",
"author": {
  "name": "博雅正链"
},

增加 .npmignore`文件

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

• npm发布

npm login
npm publish