创建存储多组件的npm包

       继前几篇关于npm私服和组件封装上传后，既然有了私服后，何不尝试像element和uni一样建立一个自己的npm包，将大部分基础组件全放入这个包中呢？

一、注册npm账号并搭建npm私服

       前面我们已经注册了自己的npm账号并搭建了私服，今天的内容基于这两点之上（未建私服也可以，只不过包是放在npm官服上的），没有的请参考：
       自定义npm组件
       npm私服搭建

二、创建项目包

vue create my-project创建一个项目，my-project为你的npm包名。直接回车选择默认模板即可，当然你也可以自定义模板。（vue create和vue init都可创建vue项目，vue init是老版本，区别在于vue cli的版本）
此处有坑，详情请看webpack-simple项目运行失败

项目目录结构如下：

三、创建组件
       如图下图所示，在src的components目录下创建组件目录，每一个组件都创建一个文件夹，文件夹包含组件和一个index.js（当然，你也可以随便建，但为了规范性和升级维护，我建议还是像我一样用文件夹区分一下）。

index.js（将组件抛出）文件内容：

import testCom1 from './test-com1';

testCom1.install = function(Vue) {
  Vue.component(testCom1.name, testCom1);
};

export default testCom1;

四、抛出包
1、在main.js同级目录下，新建index.js用于汇总全部组件 ，index.js文件内容：

import testCom1 from './components/test-com1/index';
import testCom2 from './components/test-com2/index';
import testCom3 from './components/test-com3/index';

const components = [
    testCom1,
    testCom2,
    testCom3,
];

//script标签方式映入
const install = function(Vue, opts = {}) {
  components.forEach(component => {
    Vue.component(component.name, component);
  });
}

//支持使用标签方式引入
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}


export default {
  //总体
  install,
  //支持按需引入
  testCom1,
  testCom2,
  testCom3,
}

2、修改package.json

3、在public目录下index.html中引入总入口文件

注意上图中的三个属性：
private：是否私有，默认值为true，改为false，否则无法上传。
main：默认为空，需自行添加，指定入口文件，使包上传后，组件可被调用。
files：默认为空，需自行添加，指定要上传的文件，也可不设置（若有自定义文件，后修改了目录结构，我建议添加，防止打包漏项）。

  "private": false, 
  "main": "./src/index.js",   
  "files": ["dist/*","src/*","*.json", "*.js"],    

五、上传npm包
1、npm run build
       上传前必先打包

2、若要上传私服
       npm config set registry=http://xxx.xxx.xx，指定私服地址

3、npm login（输入npm用户名，密码，绑定邮箱）

4、npm publish

常见问题记录

1、build打包并发布到私有库一切正常，神奇的是我在新启动一个项目之后，npm下载包也是正常的，但是在项目man.js中引入包时（import myTestUni from ‘my-test-uni’），报了如下错误：

在package.json中browserslist是vue-cli脚手架控制浏览器兼容的，默认是兼容所有最新浏览器的，但我使用的是>vue-cli3.0的版本，项目创建时已配的值，于是，我把它删掉就可以了