0.1.6 • Published 8 months ago
vue-cafeui v0.1.6
vue-cafeui
安装
npm install vue-cafeui --save
使用
按需引入
import {CafeButton} from 'vue-cafeui'
全局注册
import vueCafeui from 'vue-cafeui'
Vue.use(vueCafeui)
npm包发布流程
- 执行打包命令输出库umd文件
npm run lib
- git提交代码
- 使用npm version命令来更新版本号,并提供更新信息。
npm version patch -m "Fix a bug"
- 发布
npm publish
vue组件项目搭建
- 使用vue-cli快速搭建一个vue2.x项目。
- 修改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就不分离了
}
})
- 创建一个lib文件夹用来存放打包后的js文件。
- 修改package.json文件设置入口文件为打包后的js文件。
{
"main": "lib/vue-cafeui.umd.min.js",
}
- package.json里增加一个打包指令:
"lib": "vue-cli-service build --target lib --name vue-cafeui --dest lib src/packages/index.js"
- 创建打包入口文件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
}
额外说明
- package.json中的运行时依赖这里我全部去掉了,因为使用的是打包后的umd.js文件。把原本有的vue和core-js依赖放到了devDependencies中。
- 有关依赖可以看看peerDependencies