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

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

开发组件库准备

准备

vscode语言框架：vue，vuepress，vue-cli3，less参考框架： iview-ui，element-ui

开发定位

风格：小清醒，简洁颜色：主打绿，底白色字体：oppo字体免费商用

新建项目

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

改变目录结构

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 } 新建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")] // 引入全局样式变量 } } } 新建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;