vue实现公用组件打包
Vue 公用组件打包实现方法
创建独立的 Vue 组件项目
新建一个专门用于存放公用组件的 Vue 项目，使用 Vue CLI 初始化项目。确保项目结构清晰，组件分类明确。
vue create shared-components配置组件入口文件
在项目根目录下创建 index.js 文件，作为组件库的入口文件。在此文件中全局注册所有公用组件。
import Button from './components/Button.vue'
import Modal from './components/Modal.vue'
const components = {
Button,
Modal
}
const install = function(Vue) {
Object.keys(components).forEach(key => {
Vue.component(key, components[key])
})
}
export default {
install,
...components
}修改 package.json 配置
调整 package.json 文件，指定正确的入口文件和打包配置。
{
"name": "shared-components",
"version": "1.0.0",
"main": "dist/shared-components.umd.js",
"files": ["dist"],
"scripts": {
"build": "vue-cli-service build --target lib --name shared-components src/index.js"
}
}执行组件打包
运行打包命令生成组件库文件，打包后的文件会输出到 dist 目录。
npm run build发布到 npm 仓库
登录 npm 账号并发布组件库，其他项目可通过 npm 安装使用。
npm login
npm publish在其他项目中引用
安装发布的组件库后，在项目的 main.js 中全局引入或按需引入组件。
// 全局引入
import SharedComponents from 'shared-components'
Vue.use(SharedComponents)
// 按需引入
import { Button } from 'shared-components'
Vue.component('Button', Button)组件开发规范
确保每个组件都有明确的 props 定义和事件说明，编写详细的组件文档。使用 slot 机制提高组件灵活性，考虑添加样式隔离方案。
版本管理策略
遵循语义化版本控制，主版本号.次版本号.修订号。重大更新递增主版本号，新增功能递增次版本号，问题修复递增修订号。
持续集成配置
设置 CI/CD 流程，在代码提交时自动运行测试和构建。配置自动化发布流程，确保组件库的稳定性和可靠性。
