打造基于VueCli3.0以及Less的私人UI库

时间 2019-11-16

标签打造基于 vuecli3.0 vuecli 以及私人繁體版

原文原文链接

本章意在适用vue/cli以及less预编译器打造属于本身的UI私人库，初步学习从安装vue/cli构建项目到封装组件，到最终的发布到npm上css

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

开源项目目前还在持续更新组件中，各位小伙伴喜欢的话，give me a star ！！！！vue

起步

· 安装

npm、node的安装就很少说了，咱们直接开始安装vue/clinode

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

> 我的不喜欢全局去安装，由于不少状况上下，你的项目不会所有都是用最新的脚手架去搭建
> 全局去安装的话，极可能会形成污染

> 所以我的建议本地安装  →  npm install -D @vue/cli （目前最新版以及是4.0了，无伤大雅）
复制代码

· 初始化项目

vue/cli脚手架建立项目与平时的 vue init webpack projectname 不一样webpack

vue create projectname      # 建立项目命令 若是是本地安装，则开头需加上 npx
复制代码

接下来选择初始化的配置，根据本身的须要去选择（本人这里选择Less，是由于我的的UI库我选择less做为预编译器git

接下来就会生成由vue/cli脚手架搭建的项目，看看目录github

注意，咱们须要手动生成vue.config.js配置文件 web

· 私人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()vue-cli

// 首先咱们建立一个组件文件，本文以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库作好了准备，接下来咱们就能够开始开发本身的组件了npm

第一个组件（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