打造基於VueCli3.0以及Less的私人UI庫

本章意在適用vue/cli以及less預編譯器打造屬於本身的UI私人庫，初步學習從安裝vue/cli構建項目到封裝組件，到最終的發佈到npm上

附上git地址：github.com/Jason9708/C…

開源項目目前還在持續更新組件中，各位小夥伴喜歡的話，give me a star ！！！！

---

起步

· 安裝

npm、node的安裝就很少說了，咱們直接開始安裝vue/cli

npm install -g @vue/cli     #全局安裝
vue -v      #檢查版本

> 我的不喜歡全局去安裝，由於不少狀況上下，你的項目不會所有都是用最新的腳手架去搭建
> 全局去安裝的話，極可能會形成污染

> 所以我的建議本地安裝  →  npm install -D @vue/cli （目前最新版以及是4.0了，無傷大雅）
複製代碼

· 初始化項目

vue/cli腳手架建立項目與平時的 vue init webpack projectname 不一樣

vue create projectname      # 建立項目命令 若是是本地安裝，則開頭需加上 npx
複製代碼

接下來選擇初始化的配置，根據本身的須要去選擇（本人這裏選擇Less，是由於我的的UI庫我選擇less做爲預編譯器

接下來就會生成由vue/cli腳手架搭建的項目，看看目錄

注意，咱們須要手動生成vue.config.js配置文件

· 私人UI庫目錄結構

> 目錄解析 

-   example   # 原src 用於測試咱們的組件
-   packages    # 存放組件
    - 組件文件      # 存放每個組件的文件夾
        - component
            - index.vue     # 組件vue文件
            - index.less    # 組件樣式表（less）
        - index.js      # 該組件配置
-   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配置
    chainWebpack:config => {
        // 配置別名
        config.resolve.alias
            .set('@',path.resolve('examples'))
            .set('~',path.resolve('packages'))
        config.module
            .rule('js')
            .include.add(/packages/).end()
            .include.add(/examples/).end()
            .use('babel')
            .loader('babel-loader')
            .tap(options => {
                return options
            })
    }
}
複製代碼

· install() & Vue.use()

想必用過UI庫的夥伴們都知道這些UI庫引入的方式，以及按需引入都是使用Vue.use(...)的方式，但大部分人並不會去思考是怎麼引入的，下來就一塊兒來實現Vue.use()

// 首先咱們建立一個組件文件，本文以Button爲例子
// 在packages中建立一個Button文件夾，並在裏面建立component文件夾和index.js
// component文件夾用於存放組件的vue文件和less樣式表，而index.js就是咱們這個Button組件的配置

// Button/index.js

/**
 * 暴露組件
 */
import Button from './component/index.vue'      // 引入組件vue文件

// 定義install方法
Button.install = Vue => {
    // 定義組件
    Vue.component(Button.name,Button) // 這裏Button.name就是實例的name屬性
}

export default Button
複製代碼

// 其次在packages文件夾下新建index.js 用於管理咱們全部組件

// packages/index.js

/**
 * 處理全部組件全局install
 */
import Button from './Button'

const components = {
    Button
}
// 定義install方法，接受一個vue參數
const install = (Vue) => {
    // 判斷這個組件是否是已經安裝了，若是安裝了就return
    if(install.installed) return
    install.installed = true
    
    // 遍歷全部組件
    components.map(component => {
        Vue.use(component)
    })
    
    // 檢測到Vue纔會執行
    if(typeof window !== 'undefined' && window.Vue){
        install(window.Vue)
    }
}

export default{
    install,
    // 全部的組件，都必需要有install方法，纔可使用Vue.use()
    ...components
}
複製代碼

// 最後引入須要修改咱們用於測試組件的examples文件夾下的main.js

// examples/main.js
import UI from './../packages'

Vue.use(UI)     // 執行了UI中的install方法
複製代碼

以上操做爲了咱們開發私人UI庫作好了準備，接下來咱們就能夠開始開發本身的組件了

---

第一個組件（Button）

由於組件都是根據每一個人的喜愛，打造本身喜歡的樣式，因此這裏我就簡單地完成一個實現

// packages/Button/component/index.vue
<template>
    <div>
        <!--帶邊框背景-->
        <button class='Button' :class="[ Type ]"  @click='handleClike' :disabled='disabled'>
            <slot></slot>
        </button>
    </div>
</template>

<script>
export default {
    name:'Button',
    props:{
        type:{}, // primary | success | error
        disabled:{ // 默認爲false
            type:Boolean,
            default:false
        }
    },
    data(){
        return{
        }
    },
    computed:{
        Type:function(){
            if(this.type){
                if(this.type === 'primary'){
                    return 'Button-primary'
                }else if(this.type === 'success'){
                    return 'Button-success'
                }else if(this.type === 'error'){
                    return 'Button-error'
                }else{
                    return ''
                }
            }
            return ''
        },
        Disabled:function(){
            if(this.disabled){
                if(this.disabled === true){
                    return true
                }else{
                    return false
                }
            }
            return false
        }
    },
    methods:{
        handleClike:function(){
            this.$emit('click')
        }
    }
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>

複製代碼

// packages/Button/component/index.less


/** 基礎樣式 **/
.Button{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:12px;
    font-weight: 500;
    width:auto;
    padding:5px 15px;
    background: #FFFFFF;
    color:#888888;
    border:1px solid #E6E6E6;
    cursor:pointer;
    transition:.2s linear;
    outline:none;
}
.Button:hover{
    color: #409eff;
    border-color: #c6e2ff;
    background: #ecf5ff;
}
.Button:focus{
    color: #409eff;
    border-color: #c6e2ff;
    background: #ecf5ff;
}

/** 禁用樣式 **/
.Button[disabled]{
    color:#888888;
    background: #ecf0f1;
    border-color:#E6E6E6;
    cursor: not-allowed;
}
.Button[disabled]:hover{
    color:#888888;
    background: #ecf0f1;
    border-color:#E6E6E6;
    cursor: not-allowed;
}

/** primary樣式 **/
.Button-primary{
    color: #fff;
    border-color: #199EF8;
    background: #199EF8;
}
.Button-primary:hover{
    color: #fff;
    border-color: #6CD0E8;
    background: #6CD0E8;
}
.Button-primary:focus{
    color: #fff;
    border-color: #6CD0E8;
    background: #6CD0E8;
}

/** success樣式 **/
.Button-success{
    color: #fff;
    border-color: #20bf6b;
    background: #20bf6b;
}
.Button-success:hover{
    color: #fff;
    border-color: #26de81;
    background: #26de81;
}
.Button-success:focus{
    color: #fff;
    border-color: #26de81;
    background: #26de81;
}


/** error樣式 **/
.Button-error{
    color: #fff;
    border-color: #ff5e57;
    background: #ff5e57;
}
.Button-error:hover{
    color: #fff;
    border-color: #e77f67;
    background: #e77f67;
}
.Button-error:focus{
    color: #fff;
    border-color: #e77f67;
    background: #e77f67;
}
複製代碼

因爲咱們在examples的main.js中已經use了這個組件，所以能夠直接使用

<Button @click='handleClick'>默認按鈕</Button>
<Button type='primary' @click='handleClick'>主要按鈕</Button>
<Button type='success' @click='handleClick'>成功按鈕</Button>
<Button type='error' @click='handleClick'>錯誤按鈕</Button>
複製代碼

Result：

---

發佈到npm上

以庫模式打包(本地安裝的vue/cli需加上npx)
vue-cli-service build --target lib --name chicagoUI --dest lib packages/index.js

在lib下建立package.json
{
    "name": "xxx-ui",
    "version": "0.1.0",
    "main": "xxx.umd.js"   // xxx根據實際目錄下的
}

> 在保證本身當前的包管理是npm後，cd到lib文件夾下，執行 npm publish
> 這裏若是報錯401
> Code 401
Unauthorized - PUT http://registry.npmjs.org/zr_test_demo - You must be logged in to publish packages.
> 則執行 npm login 並輸入你的npm帳號密碼
> 登陸以後執行 npm publish
複製代碼

如今咱們的包已經發布到npm上了，已經能夠下載了（這裏chicago-ui的命名就是package.json中的name

使用npm包

新建一個帶有less預編譯器的新的vue/cli項目,並執行npm install --save chicago-ui

// 在src/main.js中引入這個chicago-ui
import ChicagoUi from 'chicago-ui'
import 'chicago-ui/chicagoUI.css'   // 記得引入樣式表，能夠去node_modules中找個包的文件

Vue.use(ChicagoUi)
複製代碼

在組件中直接使用

Result：

---

總結思路

• 搭建vue/cli項目
• 實現install、use方法
• 組件開發
• 庫模式打包發佈到npm

開發本身的UI庫是模塊化開發，組件封裝，css嗅覺，以及Vue的總體運用很好的一個結合項目，對提高本身的實踐能力，讓本身靈活運用技術有極大的幫助（出門外在，沒個私人UI庫可low了）

---

喜歡這篇文章的，麻煩github上給個star咯！本人本身的UI庫也會持續的更新，但願夥伴們也來一塊兒學習！提高本身的能力

github: github.com/Jason9708

微信公衆號: THROWERROR