# RAYS-Admin

**Repository Path**: ray01yang/rays-admin

## Basic Information

- **Project Name**: RAYS-Admin
- **Description**: 封装组件库
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-15
- **Last Updated**: 2025-01-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 开始初始化

npm install -g pnpm
pnpm init

把 package.json 中的 name 属性删掉，并且添加一个 “private”: true 属性，因为它是不需要发布的。

```js
  {
    "private": true,
    "scripts": {},
    "peerDependencies": {
      "vue": "^3.2.0"
    },

  }

```

### pnpm-workspace.yaml

pnpm-workspace.yaml 文件是用来配置 pnpm 工作区（monorepo）的核心文件。它指定了哪些目录包含项目（也就是子包）

在根目录下创建 pnpm-workspace.yaml 文件，声明想要在全局使用的模块。

- packages/\_ ：核心组件功能模块。包括 packages 目录下的 components （组件源码）、constants (全局常量）、directives (组件自定义指令）、 hooks (全局 hooks) 、local (组件全局语言）、test-utils (测试工具函数）、 theme-chalk (组件全局样式）、 utils (全局工具函数）。packages 目录下所有的文件夹对应的都是一个独立的模块。
- docs : Element Plus 的官方文档模块，它由 vitepress 构建的。
- play : Element Plus 组件的运行文件，创建的组件在这个文件下运行，由 vite --template vue-ts 构建的单独项目。
- internal/\_ :组件的内置文件，组件的 eslint 的配置文件和 dist 打包文件目录。
- examples : 组件的运行文件，创建的组件在这个文件下运行，由 vite --template vue-ts 构建的单独项目。
- tests : 组件的测试文件，使用 jest 进行单元测试。

```yaml
packages:
  - packages/*
  - docs
  - examples
  - tests
  - play
  - internal/*
```

## 在根目录下安装

在根目录下安装 vue 和 typesrcipt ,在根目录下需要用 -w 表示是在根目录下安装依赖。否则提示以下错误。
![](https://i-blog.csdnimg.cn/direct/4b794b37e0b640fd841e14d2179cfa05.png#pic_center)

```js

pnpm i vue typescript -w

```

在根目录下初始化 typescript 类型声明，执行 pnpm tsc --init 命令，初始化后进行以下基础配置。

```js

{
  "compilerOptions": {
    "module": "ESNext", // 打包模块类型 ESNext
    "declaration": false, // 默认不要声明文件
    "noImplicitAny": true, // 支持类型不标注可以默认any
    "removeComments": true, // 删除注释
    "moduleResolution": "node", // 安装node 模块来解析
    "esModuleInterop": true, // 支持es6, commonjs 模块
    "jsx": "preserve", // jsx 不转
    // "noLib": true, // 不处理类库
    "target": "ES6", // 遵循ES6
    "sourceMap": true, //
    "lib": ["ESNext", "DOM"], // 编译时用的库
    "allowSyntheticDefaultImports": true, // 允许没有导出的模块中导出
    "experimentalDecorators": true, // 装饰语法
    "forceConsistentCasingInFileNames": true, // 强制区分大小写
    "resolveJsonModule": true, // 解析 json 模块
    "strict": true, // 是否启用严格模式
    "skipLibCheck": true // 跳过类库检测
  },
  "exclude": [
    // 排除掉哪些类库
    "node_modules",
  ]
}


```

### 配置 .npmrc 文件

使安装在根目录下的依赖全部提升到根级别上，防止出现依赖树混乱和其他潜在的版本问题。以下配置就能够解决这个问题,这个问题也被称为幽灵依赖。

```js
shamefully-hoist=true

```

### 安装依赖

```js

pnpm i @Rays-admin/components @Rays-admin/core @Rays-admin/hooks @Rays-admin/share @Rays-admin/utils -w

```

### 安装 VuePress

```js

# 安装 vuepress 和 vue
pnpm add -D vuepress@next vue -w
# 安装打包工具和主题
pnpm add -D @vuepress/bundler-vite@next @vuepress/theme-default@next -w

```

## 目录结构

```js

.
├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│
└── package.json



docs/.vuepress: 用于存放全局的配置、组件、静态资源等。
docs/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。
docs/.vuepress/theme: 用于存放本地主题。
docs/.vuepress/styles: 用于存放样式相关的文件。
docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级。
docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量，或者设置新的 stylus 颜色常量。
docs/.vuepress/public: 静态资源目录。
docs/.vuepress/templates: 存储 HTML 模板文件。
docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。
docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。
docs/.vuepress/config.js: 配置文件的入口文件，也可以是 YML 或 toml。
docs/.vuepress/enhanceApp.js: 客户端应用的增强。

```

## 参考

vuepress 使用简介及个人博客搭建
https://blog.csdn.net/weixin_54546701/article/details/140067564

Vue3.2 + Element-Plus 二次封装 el-table
https://zhuanlan.zhihu.com/p/614523789

搭建 vue3 组件库(一): Monorepo 架构搭建
https://blog.csdn.net/weixin_43805439/article/details/138224273

从零搭建 pnpm + monorepo + vuepress2.x + vue3 的组件库（一）
https://juejin.cn/post/7187678666019569725

从零搭建 pnpm + monorepo + vuepress2.x + vue3 的组件库（二）
https://juejin.cn/post/7202149834362519609

从零搭建 pnpm + monorepo + vuepress2.x + vue3 的组件库（三）之使用 rollup 打包组件库
https://juejin.cn/post/7202785660665675837

从零搭建 pnpm + monorepo + vuepress2.x + vue3 的组件库（四）
https://juejin.cn/post/7366966322473189417