封装vue组件并上传npm

最近自己对element组件进行了封装，然后想以后要用的时候通过npm进行引用，而不是每次都是把代码挪到项目里面去。

主要步骤：

1. 封装自己的组件（我是引入了element的组件并进行了封装。）

• 我的文件结构：我封装的组件都是在components文件里面
  

2. 将封装的组件挂载在vue中，并抛出到时候进行打包使用

   在src下面新建了一个index.js文件,用来写封装了一些组件并抛出。

import ADatePicker from '@/components/form/datePicker/ADatePicker.vue';
import ButtonList from '@/components/button/buttonList.vue';
import EmptyTable from '@/components/table/emptyTable.vue';
import SearchTable from '@/components/table/searchTable.vue';

const components = [
  ButtonList,
  EmptyTable,
  SearchInput,
  SearchTable
];

// vue里面通过install挂载组件
const install = function (Vue) {
  components.map((component) => {
    Vue.component(component.name, component);
  });
};
// 这是为了判断是否有vue的环境
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  SearchTable,
  ButtonList,
  EmptyTable,
  SearchInput
};

3. 新建npmignore文件
   因为npm发布的时候只需要打包的文件，其他的文件不需要上传
   
4. 第四步就是修改package.json文件，为打包做准备

  "name": "vue-common-com",  // 包名
  "version": "1.0.2",  // 发包的版本，每次发包建议都修改下版本
  "private": false,  // 这个要改成false
  "description": "element component",  // 包名的描述
  "main": "lib/vue-common-com.common.js", // 包名的入口文件

5. 进行打包
   在打包的时候我遇到了一些问题，他们都说修改webpack的配置，将入口和出口修改下进行打包，最后打包成一个lib文件就行了。但是我直接用build进行打包的时候，不管我怎么修改webpack都是打包成下面这种文件结构，这种其实不是我想要的。
   
   最后在vue官网找到了一个打包的方式：https://cli.vuejs.org/zh/guide/build-targets.html#web-components-；然后我在package.json加入了这句：

“lib”: “vue-cli-service build --target lib --name vue-common-com --dest lib src/index.js”

直接npm run lib打包，生成的文件结构如下(只生成js文件发布在npm上)：

6. 进行npm发布

• 先登录npm: npm login; 输入你的用户名和密码，邮箱，直到登陆成功。报错的话可以自行百度下
• 登陆成功后，npm publish进行发布。

7. 使用包
   通过npm i vue-common-com安装包，然后再main.js文件中进行引用。就可以使用封装的组件了。

欢迎下载插件vue-common-com使用哦，名称到时候修改下，里面不足的地方我会慢慢完善的。

参考文件：
https://www.cnblogs.com/xiaoxiaossrs/p/8664214.html
https://www.cnblogs.com/qianxiaox/p/13826344.html