第八章 工程化 - 实例体验 - 基于 vue框架 开发一个完整的组件库 二

基础 Monorepo 环境建设

包名选择与注册

1、给 组件库 命名 => 最终会发布到 npm.js 仓库
 
2、查看 组件库 的命名是否可注册方法
 
  npm view package-name version
 
  如：
 
    npm view caix version => 返回 code E404 【 未被注册 】 可注册
 
    npm view big.js version => 返回 6.2.1  【 已被注册 】 不能注册

基础目录架构生成配置

1、创建文件夹 brain-ui
 
2、执行 npm init 
 
   生成 package.json 文件 并对其进行配置修改
 
3、在根目录下创建一个配置 .npmrc 文件
 
   在配置中添加  shamefully-hoist = true
   
4、下载最基础需要用到的 vue3 本地开发依赖 typescript   
 
   pnpm install vue@next typescript -D
   
5、在根目录执行  npx tsc --init
 
   这样就可以生成一份 ts 的基础配置文件, 需要对其调整为需要的配置
   
6、开始创建子项目 
 
   在 pnpm 当中，创建 Monorepo 结构 需要依赖于一个配置文件 pnpm-workspace.yaml
   
   在根目录下创建  pnpm-workspace.yaml  并做相关配置  

本地开发调试预览项目开发

1、cd 到 example 项目
 
2、初始化操作 pnpm init 
 
3、同理并修改掉其 name 名称，为其添加命名空间
 
4、进行组件运行配置及代码编写开发
 
  因为是使用 Vite 进行开发，需要安装 Vite 以及 Vue 的相关插件，然后启动

子项目之间的互相引用

1、我们在不同项目里都进行了 pnpm init，所以我们知道他们都可以理解为单独的项目，
 
2、为了实现其相互引用，我们将其安装到根目录当中去，正常情况我们这样就可以安装一个包了
 
  pnpm install @brain-ui/components => 报错
  
  pnpm install @brain-ui/components @brain-ui/theme-chalk @brain-ui/utils -w => 正确
  
  安装包到根目录下，安装的时候就必须在参数后面添加 -w 表示同意安装到根目录