清新UI组件库——开发组件库准备

清新组件库:http://ifresh-ui.yating.online/

源码地址:https://github.com/Chenyating/iFresh-ui

清新UI组件库——开发组件库准备_第1张图片

开发组件库准备

准备

  1. vscode
  2. 语言框架:vue,vuepress,vue-cli3,less
  3. 参考框架: iview-ui,element-ui

开发定位

  1. 风格:小清醒,简洁
  2. 颜色:主打绿,底白色
  3. 字体:oppo字体免费商用

新建项目

  1. 全局安装
npm install -g @vue/cli 或 yarn global add @vue/cli
  1. 创建项目
vue create fresh-project

改变目录结构

  1. src 改为packages:存放组件。index.js内容如下
import '../public/assets/style/base/fontFamly.css' //全局导入字体
import Button from './Button'

// 组件列表
const components = [
    Button
]

// 定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,那么所有的组件都会被注册
const install = function(Vue) {
    // 判断是否安装
    if (install.installed) return
        // 遍历注册全局组件
    components.map(component => Vue.component(component.name, component))
}

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}

export default {
    // 导出的对象必须具有 install,才能被 Vue.use() 方法安装
    install,
    // 以下是具体的组件列表
    Button
}
  1. 新建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('/packages')
            .end()
            .use('babel')
            .loader('babel-loader')
            .end()
    },
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [path.resolve(__dirname, "./public/assets/style/index.less")] // 引入全局样式变量
        }
    }
}
  1. 新建examples以vuepress目录结构创建:展示组件

.vuepress目录下新建enhanceApp.js,引入开发的组件库

import ifresh from '../../packages/index.js'
// 注册组件库

export default ({
    Vue, // VuePress 正在使用的 Vue 构造函数
    options, // 附加到根实例的一些选项
    router, // 当前应用的路由实例
    siteData // 站点元数据
}) => {
    Vue.use(ifresh)
}

单个组件demo

.vue文件要去name名字!

js导出

// 导入组件,组件必须声明 name
import btn from './src'

// 为组件提供 install 安装方法,供按需引入
btn.install = function(Vue) {
    Vue.component(btn.name, btn)
}

// 导出组件
export var Button = btn;

你可能感兴趣的:(UI组件开发,vue)