Vue 组件库开发

快速原型开发

VueCli提供了一个插件可以进行原型快速开发，需要先全局安装@vue/cli-service-global插件，然后再通过VueCli创建项目。开发时可以使用vue serve 快速查看组件的运行效果

• vue serve 如果不指定参数默认会在当前目录下寻找一些入口文件：main.js、index.js、App.vue、app.vue。
• 可以传入参数指定要加载的组件 vue serve ./src/post.vue

结合Element-ui进行快速的原型开发

1. 使用命令行vue add element 来添加 elementUI插件
2. 然后加载ElementUI，使用Vue.use()安装插件
3. Element-ui就是使用Async-validator进行表单验证的，组件库开发时可以考虑使用它来完成表单验证。

组件的管理

使用时可以按需加载所需的组件的实现方式：
1、Multirepo(Multiple Repository)：每一个组件对应一个项目
2、Monorepo（Monolithic Repository)：一个项目仓库管理多个组件，组件可以按需加载

使用Monorepo管理组件库

使用Monorepo管理组件库需要遵循以下规范：

1. 组件所在的包都存放在一个文件夹package中
2. 组件内部的文件结构类似，方便管理。

Storybook

Storybook是一个可视化组件的展示平台，在隔离的开发环境中，以交互式的方式展示组件。
支持多种框架：

storybook的安装

在已有组件库项目中执行命令行 npx sb init --type vue，其中type是用来指定框架的，如果没有指定会开启命令行交互，让用户选择框架。

init命令会执行下列操作：

1. 安装依赖

2. 在package.json中设置storybook启动命令
   

3. 添加storybook默认配置
   

4. 生成示例story
   

执行完init命令之后，运行yarn storybook命令启动storybook。

yarn 工作区（yarn workspace）

开启yarn工作区要在项目根目录下package.json中新增如下配置

开启工作区之后，会自动将公共的依赖存放到工作区所在的根目录下。
“private”: true 表示提交到github或发布到npm时禁止提交根目录下的文件
“workspaces”: [ “packages/*” ] 表示要管理的所有包的路径。

• 给工作区根目录安装开发依赖

  yarn add jest -D -W
  

• 给指定工作区的包安装依赖

  yarn workspace lg-button add lodash@4
  

  lg-button是包的名字，文件夹中package.json中的name

• 给工作区的所有包安装依赖

  yarn init
  

Lerna

Lerna是一个优化使用git和npm管理多包仓库的工作流工具，babel就是用它来管理代码仓库的。用于管理具有多个包的javascript项目，可以一键把代码提交到git和npm仓库。

lerna和yarn workspace一般组合在一起使用，yarn workspace管理包的依赖，lerna管理代码仓库的发布

Lerna的使用

1. 全局安装 lerna：npm i lerna -g
2. 初始化: 在项目根目录下运行命令 lerna init。
   如果当前项目没有使用git，会进行git的初始化。
3. 发布：运行lerna publish会将packages中的包发布到npm仓库
   执行lerna publish发布之前，要确定以下是否已经完成以下操作：
   1. 代码是否提交到GitHub仓库
   2. 是否登录npm，使用npm whoami查询当前登录npm的用户，如果未登录，则执行npm login进行登录操作。
   3. 确保当前的镜像源是https://reigstry.npmjs.org/ ，使用npm config get registry查看镜像源配置。如果不是则使用命令修改镜像源。npm config set registry https://registry.npmjs.org/

Vue组件的单元测试

使用Jest插件来完成测试。

Jest集成与配置

1. 安装依赖：在工作区所在根目录下安装依赖

   yar