Vue多组件仓库开发与发布详解-创新互联

在开发组件时，我们可能会期望一类组件放在同一个代码仓库下，就像element那样，我们可以使用element提供的脚手架，也可以使用vue cli 3创建一个更‘新'的项目。

项目创建

通过vue cli 3创建项目，创建文件夹packages用于存放组件。

单个组件目录

在packages下就是每一个组件，每个组件和单独项目一样，会有package.json、README.md、src、dist等文件及目录。

如何演示/调试组件

在组件开发过称中，我们需要对组件进行展示，所以创建了examples文件夹，用于存放每个组件示例。

通过一个列表展示出所有的组件，点击选择当前开发的组件，进入对应的example。

路由的根就是一个导航列表，然后每个组件对应一个路由，通过一个配置文件的components.js来生成这个路由。

// 路由
import Navigation from "./Navigation";
import components from "./components";

let routes = components.map(component => ({
 path: `/${component.name}`,
 component: () => import(`../examples/${component.name}`)
}));

routes.unshift({
 path: "",
 component: Navigation
});

export default routes;