vue自定义组件库

现在vue的UI框架已经很丰富了，为什么还要封装一套自己的UI框架呢？

vue的UI框架已经有很多（ElementUI，iView 等等），而且组件都很丰富，大体上可以满足我们的需求，不用重复造轮子，但是需求是不定的，在项目中有时候仅凭这些也实现不了，这时我们需要封装自己的组件或者对一些已经存在的组件进行二次封装。

接下来我们就来看看如何自定义自己的组件并使用

一：创建项目

# 创建目录
mkdir tanrj-ui
# cd到目录中
cd tanri-ui
# 初始化项目
vue create .

如下图为项目结构

二：调整项目目录

|-- 重命名src为examples（参考ElementUI），用于测试组件
|-- 新建packages，定义上传的组件库
|-- 新建vue.config.js

调整之后的项目结构

编写vue.config.js

const path = require('path')
const { config } = require('process')

const resolve = dir => path.join(__dirname, dir)

module.exports = {
  pages: {
    index: {
      entry: 'examples/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },

  chainWebpack: config => {
    config.module
    .rule('js')
    .include
      .add(resolve('packages'))
      .end()
    .use('babel')
      .loader('babel-loader')
      .tap(option => {
        return option
      })
  }
}

三：定义组件

在packages下新建组件（如图）

文件路径：tanrj-ui\packages\date-picker\src\date-picker.vue

<template>
  <div>这是一个datePicker组件</div>
</template>

<script>
export default {
  name: 'datePicker',
};
</script>

<style lang="scss">

</style>

文件路径：tanrj-ui\packages\date-picker\index.js

import datePicker from './src/date-picker.vue'

datePicker.install = function(Vue) {
  Vue.component(datePicker.name, datePicker)
}

export default datePicker

• theme-color组件同上

四：注册组件

import datePicker from './date-picker/index'
import themeColor from './theme-color/index'

const components = [
  datePicker,
  themeColor
]

const install = function(Vue) {
  components.forEach(component => {
    Vue.component(component.name, component)
  })
}

if(typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export {
  install,
  datePicker,
  themeColor
}

五：本地测试

我们可以在main.js中全局注册，也可以在页面中直接引入
文件路径：tanrj-ui\examples\main.js

import Vue from 'vue'
import App from './App.vue'

import { datePicker, themeColor } from '../packages/index'

Vue.use(datePicker)
Vue.use(themeColor)
// 或者
// Vue.component(datePicker.name, datePicker)
// Vue.component(themeColor.name, themeColor)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

接着在页面中使用上即可
文件路径：tanrj-ui\examples\App.vue

<template>
  <div id="app">
    <datePicker/>
    <themeColor/>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>

</style>

运行看效果：

六：打包文件

本地测试没问题之后，接着就是上传到npm中
在package.json文件中脚本添加

"script": {
    "build-lib": "vue-cli-service build --target lib --name tanrj-ui --dest lib packages/index.js",
}

执行命令

npm run build-lib

注意：每次定义好组件或添加了新的组件之后都需要上传

此时我们看看项目结构

七：发布到npm

• 修改packages.json中配置

"private": false,
"main": "lib/tanrj-ui.umd.min.js",
// 可自行决定是否修改
"version": "0.1.3",
"keywords": ["tanrj", "tanrj-ui"],

• 根目录下添加.npmignore文件

# 忽略目录
examples/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map

• 发布npm

# 设置为默认的官方镜像
npm config set registry https://registry.npmjs.org/
# 登录（未注册去npm.js.com或者通过npm adduser注册一个账户）
npm login
# 发布
npm publish

之后我们便可在npm官方网站看到