yh-ui

组件列表

• Button ✔️
• Checkbox️️✔️
• CheckboxList✔️
• DatePicker✔️
• Dialog✔️
• Icon✔️
• Loading ✔️
• LoadingBar ✔️
• Message ✔️
• Pagination ✔️
• Select ✔️
• Skeleton ✔️
• Swiper ✔️
• Switch ✔️
• Table✔️
• Transfer✔️
• Tree✔️

安装

npm

快速开始

CSS样式分离

大家应该可以看到像elementUI,iView这些比较优秀的UI库都是进行了样式分离的,这样也非常的有利于日后样式的管理和维护.

比如yh-ui,是在packages下新建了yh-styles目录,下边的src目录来专门存放我的所有的css文件.

这里我们使用市场上欢呼度最高最流行的BEM写法来写,也有一些别的文章记录过BEM和vue-cli的项目进行集成的,但是这里使用了最新的vue-cli3后,还是略有一些不同的,坑我都已经替大家踩过了

npm i postcss-salad precss -D

安装完成之后,vue-cli3 的项目需要在项目根目录的package.json中进行配置,新增:

"postcss": {
        "plugins": {
            "autoprefixer": {},
            "postcss-salad": {
                "browsers": [
                    "ie > 8",
                    "last 2 versions"
                ],
                "features": {
                    "bem": {
                        "shortcuts": {
                            "component": "b",
                            "descendent": "e",
                            "modifier": "m"
                        },
                        "separators": {
                          	// 这里的符号需要与你的css语法进行对应,
                            "descendent": "__
                            "modifier": "_"
                        }
                    }
                }
            }
        }
    },

上边的符号需要与你的css语法进行对应:

比如:

.yh-button__input_active

@b yh-button{
  @e input{
    @m active{
      
    }
  }
}

这样才是对应的,BEM语法只有class!现在就可以完全对BEM语法进行解析了,

发布到npm.js

去npm先注册一个账号吧,有邮箱认证的,邮箱被填错

然后回到项目,在package.json下新增:

 "main": "lib/yh-ui.umd.min.js",

这个的目的是为了指定你的UI库的入口,然后就是:

npm login //回车输入用户名和密码
npm publish // 每次publish的版本号都要比上一次高

贡献代码

开源协议