清新UI組件庫——開發組件庫準備

清新組件庫：http://ifresh-ui.yating.online/

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

開發組件庫準備

準備

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

2. 創建項目

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
}

2. 新建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")] // 引入全局樣式變量
        }
    }
}

3. 新建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;