精细结构

目录

打包组件为通用包给其他项目使用

现状

自己写了一些组件，觉得挺好用的，准备自己以后的代码这些组件也可以拿来通用。

组件代码就是普通的 vue 代码。

<template>
	<div>这里是我实现的组件功能</div>
</template>
<script>
export default {
	name: "MyComponent1"
}
</script>

方案

查询了一番后，发现要做两件事

1. 修改 package.json ，添加 main 文件
2. 在 main 文件中导出 我自己写的组件

于是，说干就干。 pakcage.json 的处理比较简单

{
  "name": "my-component-pkg",
  "version": "0.1.0",
  "private": true,
  "main": "src/index.js", // 注意这里
  // ...
}

index 文件的内容如下：

import Vue from "vue";

import MyComponent1 from "./views/mine/component1";
import MyComponent2 from "./views/mine/component2";

Vue.component("MyComponent1", MyComponent1);
Vue.component("MyComponent2", MyComponent2);

这里注意，Vue.component 的处理必须要，不然到了其他项目中，就无法引入组件了。

引用

然后就可以把 my-component-pkg 这个包发布到 npm 上去了，然后从 npm 上引用。

或者直接引用 github 的地址

  "dependencies": {
    "my-component-pkg": "git+https://github.com/yourname/my-component-pkg#master"
  }

然后在目标vue项目的 main.js 中 import 一下就可以了。

import "my-component-pkg";

在这个时候，自己写的代码里，就可以直接使用 MyComponent1 这个组件了。
就像平时使用 element-ui 、 vant 、这样的通用框架。

缺点

1. 似乎 router.js 中无法直接引用，不知道是本身就不支持还是什么其他原因。
2. 不知道 Vue3 是否支持