开发自定义组件脚手架

开发流程

一、创建一个 vue2 的组件开发项目

# "my-component-app"新建的项目名称
npm create custom-component my-component-app

二、切换到项目根目录安装依赖

"my-component-app"新建的项目名称

cd my-component-app
npm install

三、生成组件

npm run new

通过交互式命令行，输入要生成的组件名称，会在 packages 目录下自动生成新的组件

三、本地开发调试

# 开发本地调试组件
npm run dev 

如果要本地调试打包组件，可以执行npm run build --watch， 配合 dev 启动的静态服务器，通过 http://localhost:5173/dist/index.umd.js 访问产物，修改组件代码时将会重新打包

四、打包

npm run build

build 命令会遍历packages下所有组件，选择要打包的组件即可

五、上传

将打包后的 index.umd.js 上传到cdn，将 cdn 地址更新到对应项目配置（前期通过项目写死，后期走 apollo 配置）

开发规范

1. 所有组件的 style 必须加 scoped，以防污染全局样式
2. 如果项目有引用其他库，例如 axios，可以与稿定侧开发沟通，如果主项目也有这个依赖，可以在 vite.config.js 里的 build.rollupOptions.external 里加上 axios，将 axios 移除打包
3. 有需要引用主项目的某些组件，可以与稿定侧开发沟通，主项目将需要使用的组件通过 props 传入，自定义组件通过动态组件 <component :is="propComp"/> 加载
4. props约定：使用方在开发自定义组件时，说明需要哪些属性、方法，稿定开发与其对接后，输出标准的对接文档
5. 开发文档里不支持的组件，需要稿定提供支持的，使用方根据业务说明需要哪些属性、方法，稿定开发与其对接后，输出标准的对接文档（props、on），在开发文档里补充