vue目录没有build文件如何添加_Vue多组件仓库搭建

关注【搜狐技术产品】公众号，第一时间获取技术干货

导读

组件化是目前前端最为流行的代码复用方式，无论是React还是Vue也都是以组件为单元进行开发的。 在我们的工作过程中，随着业务的增长，积累下来的组件也越来越多。这时候，如何高效的组织我们的组件就成了一个需要解决的问题。

代码存放

在项目创建之前，我们比较了现在主流的两种代码仓库存储方式——单代码仓库（mono-repo）和多代码仓库（multi-repo）。

多代码仓库中，我们以前端打包工具rollup为例，完整的项目应该是包括rollup主仓库，以及rollup-plugin-alias、rollup-plugin-buble、rollup-starter-lib等很多相关仓库。 按多代码仓库方式组织代码会有下面一些问题：

1. issue管理混乱。用户在使用过程中遇到问题，常常会直接在主仓库下提问，而这些问题很多是属于其他模块的，应该放在其他仓库中。
2. 版本更新麻烦。被依赖的仓库代码变更之后，需要同步到所有依赖方的代码仓库中。
3. 版本日志维护麻烦。和版本更新后修改依赖一样，版本日志也需要更新到每个代码仓库中。

单代码仓库中，以JavaScript编译工具babel为例，项目中在packages文件夹下有babel-cli、babel-core、babel-helper-*、babel-plugin-*等模块。 按单代码仓库方式组织代码面临的问题包括：

1. 代码仓库会很大，可能会带来版本控制的问题。
2. 对构建工具要求较高，需要构建工具可以构建packages下的所有模块。

比较过后，我们选择了按单代码仓库的方式来存放我们的组件。主要有两方面的原因，一方面是这些组件存在依赖的情况，并且可能变动会比较频繁，另一方面是目前我们统一了开发库为vue，构建工具本身就是统一的。

项目创建

项目的创建主要使用了@vue/cli，它是官方提供的基于Vue.js进行快速开发的完整的脚手架、工具链系统。

创建时，cli的交互式配置省去了对webpack以及各种loader的繁杂编写。 开发过程中，cli基于webpack-dev-server提供了支持模块热重载的开发服务器。 完成后，cli的构建功能提供了“应用、库、Web组件”等多种构建目标选择。 这些可以很好的满足我们组件库的需求。

组件的存放

在使用@vue/cli搭建起项目脚手架后，参照babel、Element等单代码仓库，在项目根目录下创建packages文件夹。该文件夹下每个组件对应一个目录，在目录下存放package.json、README.md、CHANGELOG.md等文件，以及src、dist、node_module等目录。

├── packages
│   ├── error-pa