paowx-ui

自定义UI组件库

创建vue3.0项目

vue create paowx-ui

目录调整

packages -- 用于存放所有的组件
examples -- 用于进行测试,把src改成examples

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 配置，使 packages 加入编译
  chainWebpack: config => {
    config.module
      .rule('js')
      .include.add(path.resolve(__dirname, 'packages')).end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        // 修改它的选项...
        return options
      })
  }
}

统一导出packages中所有的组件

在packages中新建index.js，用于导出所有组件

import Button from './button.vue'
// 存储组件列表
const components = [
    Button
]
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function(Vue){
    // 遍历注册全局组件
    components.forEach((item) =>{
        Vue.component(item.name, item)
    })
}
// 判断是否是直接引入文件,如果是，就不用调用 Vue.use()
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
  }
  
// 导出的对象必须具有 install，才能被 Vue.use() 方法安装
export default {
    install
}

发布到npm

1、在package.json的script中新增一条打包命令
    "lib": "vue-cli-service build --target lib packages/index.js"

2、发布到npm
修改package.json文件
    "private": false,
    "main": "dist/paowx-ui.umd.min.js",
    "author":{
    "name": "paowx"
    },

3、增加.npmignore文件
    # 忽略目录
    examples/
    packages/
    public/
        
    # 忽略指定文件
    vue.config.js
    babel.config.js
    *.map

4、npm发布
    npm login
    npm publish

    https://www.npmjs.com/package/paowx-ui