vue-cafeui

安装

npm install vue-cafeui --save

使用

按需引入

import {CafeButton} from 'vue-cafeui'

全局注册

import vueCafeui from 'vue-cafeui'
Vue.use(vueCafeui)

npm包发布流程

1. 执行打包命令输出库umd文件

npm run lib

2. git提交代码
3. 使用npm version命令来更新版本号，并提供更新信息。

npm version patch -m "Fix a bug"

4. 发布

npm publish

vue组件项目搭建

1. 使用vue-cli快速搭建一个vue2.x项目。
2. 修改vue.config.js文件配置。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  productionSourceMap: false,
  configureWebpack: {
    output: {
      library: 'vue-cafeui', // 这里是你的组件库名称
      libraryTarget: 'umd',
      libraryExport: 'default',
    },
  },
  css: {
    extract: false // 禁用样式提取, 否则打包完组件以后会自动分离出css文件需要再引入一个css文件，大项目适合分离，这里是个demo就不分离了
  }
})

3. 创建一个lib文件夹用来存放打包后的js文件。
4. 修改package.json文件设置入口文件为打包后的js文件。

{ 
    "main": "lib/vue-cafeui.umd.min.js",
}

5. package.json里增加一个打包指令：

 "lib": "vue-cli-service build --target lib --name vue-cafeui --dest lib src/packages/index.js"

6. 创建打包入口文件src/packages/index.js。

import CafeButton from '@/components/CafeButton.vue';
import CafeTitle from '@/components/CafeTitle.vue';

export const components = [
    CafeButton,
    CafeTitle
]

const install = (Vue) => {
    Object.values(components).forEach((component) => {
        Vue.component(component.name, component);
    });
}

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
}

export default {
    install,
    CafeButton,
    CafeTitle
}

额外说明

1. package.json中的运行时依赖这里我全部去掉了，因为使用的是打包后的umd.js文件。把原本有的vue和core-js依赖放到了devDependencies中。
2. 有关依赖可以看看peerDependencies