# longrise-lib
> > 版本：node@16.14.0 ， npm@7.14.0（npm建议可以升级到8.x.x）
Latest version **1.0.0** (published 2023-12-11) · ISC license · 0 weekly downloads
## Install
```sh
npm install longrise-lib
pnpm add longrise-lib
yarn add longrise-lib
bun add longrise-lib
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-12-11 |
| First published | 2023-12-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 14 |
| Unpacked size | 852.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | menglijiao_m |
## Links
- npm: https://www.npmjs.com/package/longrise-lib
- npm.io page: https://npm.io/package/longrise-lib
## Dependencies (14)
- [vue](https://npm.io/package/vue.md) ^3.3.4
- [vuex](https://npm.io/package/vuex.md) ^4.1.0
- [axios](https://npm.io/package/axios.md) ^1.3.4
- [core-js](https://npm.io/package/core-js.md) ^3.8.3
- [v-viewer](https://npm.io/package/v-viewer.md) ^3.0.11
- [js-base64](https://npm.io/package/js-base64.md) ^3.7.5
- [nprogress](https://npm.io/package/nprogress.md) ^0.2.0
- [@longrise/store](https://npm.io/package/@longrise/store.md) workspace:^
- [@longrise/utils](https://npm.io/package/@longrise/utils.md) workspace:^
- [path-browserify](https://npm.io/package/path-browserify.md) ^1.0.1
- [@longrise/resource](https://npm.io/package/@longrise/resource.md) workspace:^
- [@longrise/components](https://npm.io/package/@longrise/components.md) workspace:^
- [@vue/babel-preset-jsx](https://npm.io/package/@vue/babel-preset-jsx.md) ^1.4.0
- [@vue/babel-helper-vue-jsx-merge-props](https://npm.io/package/@vue/babel-helper-vue-jsx-merge-props.md) ^1.4.0
## Recent versions
- 1.0.0 (latest) — 2023-12-11
## README
# pnpm管理的多项目组件库架构
# 基本信息
> 版本：node@16.14.0 ， npm@7.14.0（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图片以及对应的图片名称。
```
## 编写md文件
> 可参考`com-svgIcon.md`，文档编写较为完整
md文件全部**扁平**放在`components`文件里。**md文件只能在二级目录下，放在第三级目录就报错找不到**。
**调用vue文件**：推荐用这种方式，`path`是vue文件的路径，指向`examples`文件夹里的vue文件
```
```
## 编写vue组件
在`examples`文件夹里放置vue文件，上面的` `一次调用一个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里引入注册
```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
```
```
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打包，应该就可以了。但我还没来得及尝试。
---
_Source: https://npm.io/package/longrise-lib · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._