pnpm管理的多项目组件库架构

基本信息

版本：[email protected] ， [email protected]（npm建议可以升级到8.x.x）

下载依赖，在根目录运行:

pnpm install -w

组件库目录介绍：

• docs：组件库开发文档
• packages：源代码目录
  • components：vue组件
  • resource：放置不打包的资源，比如svg图片，403页面，store（该项目不打包，直接作为一个组件库上传发布）
  • utils：公共js函数
  • longrise-lib：组件库入口

docs开发文档

启动项目

进入docs文件夹，运行以下命令启动开发文档

pnpm run dev

导航配置

• 在.vitepress/config配置文件里，nav数组是右上角菜单，sidebar配置左侧菜单（右上角菜单的二级菜单）
• 注意，nav和sidebar里的link字段指的是md文件路径，注意不要带后缀。

注册组件

• 在.vitepress/theme/index.js配置文件，可以当做vue项目的main.js来使用，enhanceApp函数的参数，就是vue实例，在里面可以引入组件进行注册等
• 自定义vue组件放在.vitepress/components文件夹里，在enhanceApp函数里注册后可以直接在md文件里直接调用。例如:

<!--md文件-->

# svg图标集合
svg图片以及对应的图片名称。
<svg-list/>

编写md文件

可参考com-svgIcon.md，文档编写较为完整

md文件全部扁平放在components文件里。md文件只能在二级目录下，放在第三级目录就报错找不到。

调用vue文件：推荐用这种方式，path是vue文件的路径，指向examples文件夹里的vue文件

<preview path="../examples/components-ex/svgIcon/online-svg.vue" title="" description=""></preview>

编写vue组件

在examples文件夹里放置vue文件，上面的<preview path="xxxx"></preview> 一次调用一个vue组件，展示vue源代码和vue文件呈现出的效果。

打包发布

打包：

进入入口文件packages/longrise-lib文件夹，可以看到里面默认导出了install函数，还扁平导出了utils里的所有函数，components里的所有组件，以及resource里的部分资源。接下来就要将longrise-lib打包，打包配置在vite.config.ts里。

打包命令：

pnpm build

打包后的文件夹为根目录的lib。回到根目录，运行以下发布命令，把打包后的lib文件夹发布到公司私服上：

pnpm publish --no-git-checks

下载使用组件库

然后再其他的项目里，就可以直接下载该组件库

npm install longrise-lib  

在main.js里引入注册

import LongriseLib from 'longrise-lib';
import 'longrise-lib/lib/style.css';

window.$vueApp.use(LongriseLib);

使用函数：

import { request } from 'longrise-lib';

@longrise/resource说明

注意，该子项目@longrise/resource需要单独发布，因为其他项目使用时有路径指向里面的文件。比如：

.add(resolve('node_modules/@longrise/resource/assets/svg'))

进入resource目录，直接发布即可

pnpm publish --no-git-checks

项目中在main.js里下载引入

npm install @longrise/resource  

<!--main.js-->
import Resource, { store } from '@longrise/resource';

window.$vueApp.use(store);
window.$vueApp.use(Resource);

未解决的bug

目前对longrise-lib的打包有bug还未解决。打包是使用vite打包的，但是longrise-layout-vue3是vue/cli创建的基于webpack的项目。在webpack项目里使用vite打包的组件库，组件可以使用，但是组件的样式失效。导致页面的图标很大。

原因：样式打包没问题，样式引入也没问题。是在使用组件时，组件的html节点没有添加它自己的data-v-xxxx属性。我耗了一天也没解决这个问题。

解决方案：改成不用vite打包，换成vue/cli打包，应该就可以了。但我还没来得及尝试。