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

开发组件库准备

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

源码地址：https://github.com/Chenyating...

准备

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;