浅谈Vue CLI 3结合Lerna进行UI框架设计

一、Vue CLI 3是什么

Vue CLI 3 是 Vue.js 官方的一个脚手架工具，用于快速创建 Vue 项目，包含了项目的初始化、配置管理、插件功能和构建打包等基础功能。Vue CLI 3 结合了现代前端工程的最佳实践和工具，是一个非常方便和高效的前端开发工具。

二、Lerna是什么

Lerna 是一个面向git仓库的多包管理器，用于管理包含多个包的JavaScript项目。Lerna 在包含多个模块或者包的项目中发挥了重要作用。

三、结合Vue CLI 3和Lerna进行UI框架设计的攻略

1. 创建核心 UI 库，在核心 UI 库里面编写和维护一些通用样式、通用组件和公用函数等，以保证不同业务需求重复性的代码和样式可以被复用。

2. 创建业务项目，在业务项目中引用核心 UI 库，可以直接使用核心 UI 库中的通用样式、通用组件和公用函数等，并可以根据实际业务定制需要的组件和样式。业务项目中代码的管理和维护，也能遵循标准化、统一化的开发模式。

3. 通过 Vue CLI 3 创建所有项目

   vue create core-ui-library
vue create business-project-1
vue create business-project-2

4. 通过 Lerna 管理所有项目的 package

   lerna init
lerna create @ui-library/component-A
lerna create @ui-library/component-B
lerna create @business-project-1/module-C
lerna create @business-project-2/module-C

5. 安装所有依赖

   npm install && lerna bootstrap

6. 集成打包构建

7. 发布

   lerna publish // 进行版本发布

四、示例说明

下面以核心 UI 库的组件开发为例，演示 Vue CLI 3 和 Lerna 分别是如何管理和维护这些组件的。

首先，在核心 UI 库里面创建一个名为 my-component 的组件

lerna create my-component

接着，将该组件添加到 package.json 的 devDependencies 和 peerDependencies 里面，然后安装依赖：

lerna bootstrap

在 my-component 中编写代码，然后在 index.js 中导入该组件，并且导出，以供其他项目使用。最后，更新版本并提交：

lerna version
git add .
git commit -m "Add my-component"
git push

在业务项目中，通过以下命令将核心 UI 库作为依赖进行引用：

yarn add @my-lib/components

最后，在需要使用的页面中，按照业务需求，引入 my-component 组件，并编写代码即可：

<template>
  <div>
    <MyComponent />
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import MyComponent from '@my-lib/components'

  export default defineComponent({
    name: 'my-page',
    components: {
      MyComponent,
    },
  })
</script>

通过以上示例可以看到，在使用 Vue CLI 3 和 Lerna 进行 UI 框架设计时，管理和维护组件非常方便和高效。既可以满足业务需求，又可以节省大量重复劳动力。同时，也可以避免了代码量过大、难以调试的问题。