# vue3-component

**Repository Path**: zhangBo11/vue3-component

## Basic Information

- **Project Name**: vue3-component
- **Description**: pnpm+vue3+vite 企业级组件库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-06-19
- **Last Updated**: 2024-07-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 第一天
```
npm install pnpm -g # 全局安装pnpm
pnpm init  # 创建项目，初始化package.json配置文件 私有库
```
## shamefully-hoist = true //羞耻提升
pnpm直接下载vue和ts模块，默认node_modules下只有vue和ts模块，其他模块都在.pnpm下，我们为了让vue依赖的模块提升到node_modules下，创建.npmrc文件，配置后，重新pnpm install ,幽灵模块就下载到node_modules下了
```
pnpm install vue typescript -D # 全局下添加依赖

```
## package.json设置私用仓库
private:true
## 初始化ts文件
更好的typescript提示
pnpm tsc --init
## 项目下管理多个仓库 实现menorepo
创建pnpm-workspace.yaml
## 每个文件夹下创建package.json文件
packages/component/package.json ...
/play/package.json
## 如何让packages下每个包都可以互相引用,下载全局包 加 -w参数
在根目录下下载 就等于下载全局依赖，但是此时我的还没发布(实际并不是没发布的问题，pnpm8确实这样用，也就是把本地的包关联到package.json的依赖上)
pnpm install @bo/components -w
pnpm install @bo/utils -w
pnpm install @bo/theme-chalk -w
报错：@z-bo/components is not in the npm registry, or you have no permission to fetch it. 
第二种 网上查资料通过pnpm add 在components下添加utils，在utils下添加components
都不行
解决方案：加上--workspace，https://juejin.cn/post/7361700765763387427
pnpm --filter @bangzho/components i -S @bangzho/utils --workspace
pnpm 8 升级9后，出现的问题好像时官方没有设置，以前直接在项目的workspace下，现在找到了npm上

全局安装pnpm install @bangzho/components -w --workspace 需要加-w 会下载到dependencies下
# 第二天
## play文件夹 
play模块主要是一个vite创建的vue项目，主要用来引入开发的组件在本地测试使用
```
pnpm create vite play --template vue-ts
cd play
pnpm install
```

play文件夹不需要独立发布，本地测试用的

视频中有/play/src/env.d.ts文件，里面有对.vue文件的ts声明 作用：实现对vue文件的代码提示 ，姜文创建/typings/vue-shim.d.ts 把声明复制过去，供全局使用
我使用vite创建的play项目下没有env.d.ts,但是后来引用.vue是报错了，复制了姜文文档上的内容，用在了/typings/vue-shim.d.ts中

将play项目的启动在根目录下配置一份
vue3-component/package.json

```
script:{
    dev: 'pnpm -C play dev' // 执行play目录下的dev命令
}
```

## BEM规范
BEM规范是一种css命名的规范
```
每个组件规范的css命名规则如下

// block 代码块 element 元素 modifier 装饰  还可以加state 状态
// z-button 代码块
// z-button_element 元素
// z-button_element--disabled 装饰
// is-checked is-enabeld 状态
```
/packages/utils/create.ts中
## 给.vue文件添加声明类型
/typings/vue.shim.d.ts，不然在components/icon/index.ts中
import _Icon from "./src/icon.vue"; 会报错


## 实现icon组件
packages/components/icon/src
packages/components/icon/index.ts  给组件注册install方法
src/icon.ts 使用ts定义组件的属性
src/icon.vue 组件的内容


```
这部分内容应该写错了，目前并没有创建packages/components/index.ts，而是在创建了packages/components/icon/index.ts。
在icon/index.ts中，做了下面描述的事情
packages/component/index.t
统一整合所有组件
引入所有组件，给组件添加install方法，然后导出该组件，使其可通过import使用，也可以通过app.use注册使用
vue中通过app.component注册组件实际就是调用组件的install方法
导入所有组件中定义的ts属性方法，供用户使用
```

对于组件的属性和功能，可以参考成熟组件库，看他们预留了哪些属性和功能
defineOptions 可以定义组件name，不用在写一个script标签，通过选项式写name了

姜文在icon/index.ts中定义icon的类型声明为了在使用组件是有 提示 比如属性 类型验证，我写的时候不用加，就有提示
```
declare module 'vue'{
    export interface GlobalComponents{
        ZIcon: typeof Icon
    }
}
```
## 测试 
全局下载 pnpm install @bangzho/components -w --workspace 
我试着在全局直接把packages下的模块下载了比较方便，不用在components下 下载@bangzho/utils了，不过现在看着只用components中使用了，目前还行
在/play/main.ts中注册icon组件，在app.vue中使用,可查看效果
## 遗留问题
在main.ts中注册组件，app.use(Icon)，使用时直接z-icon就行但是看结果也能使用ZIcon，是因为组件的name定义的叫ZIcon吗

# 第四天
## 完善icon组件
添加了使用时通过传入svg就能显示，通过在/package
增加显示svg图片的功能，在package/theme-chalk/ 下，创建公共的scss方法，创建icon组件的icon.scss样式
如果需要单独看
## eslint和prettier配置
在项目根目录下安装
eslint 校验组件库代码规范，prettier格式化代码的风格
需要了在看
## vitePress组件库文档搭建
主要功能把markdown转成网页
使用vitePress好处就是项目也是vite创建的，以前听过vuePress应该时webpack创建的
学习vitePress怎么配置，怎么呈现出element-plus官网的效果，有需要详细看vitePress文档，我之后会复制姜文的，今天不做了

# 第五天
打包和发布
珠峰用的gulp打包组件库，网上也有直接创建项目时就是用vite创建一个components项目，直接在components里用vite的方式打包
element-plus中用的也是glup打包，分别将packages下的scss  ts  组件 分别配置不同的打包流程
最终是在dist目录中，将项目发布到npm上