阅读 572

打造基于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

关注下面的标签,发现更多相似文章
评论