本章意在适用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包
新建一个带有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)
在组件中直接使用
总结思路
- 搭建vue/cli项目
- 实现install、use方法
- 组件开发
- 库模式打包发布到npm
开发自己的UI库是模块化开发，组件封装，css嗅觉，以及Vue的整体运用很好的一个结合项目，对提升自己的实践能力，让自己灵活运用技术有极大的帮助（出门外在，没个私人UI库可low了）
喜欢这篇文章的，麻烦github上给个star咯！本人自己的UI库也会持续的更新，希望伙伴们也来一起学习！提升自己的能力
github: github.com/Jason9708
微信公众号: THROWERROR
