VUE组件库打包、发布、安装使用

1、打包

1.1、组件导出文件编写。

           对于所要导出的组件，编写导出配置文件index.js(文件名不固定，和后面使用时保持一致即可)，该文件主要作用是将所要导出的组件import进来，然后批量模块化导出。如下：

1.1.1、import

1.1.2、合并、批量导出

1.2、编写打包配置文件。

1.2.1、build/目录下新增两个配置文件：webpack.cx.conf.js 和 build-cx.js (文件名不固定，使用时匹配即可)，两个配置文件的信息如下：

1.2.1.1、webpack.cx.conf.js

1.2.1.2、build-cx.js

1.2.2、package.json配置文件编写。

    在项目根目录的package.json配置文件的scripts中新增一行命令，执行刚刚配置好的build-cx.js文件。如下：

1.3、执行打包命令。

    在集成终端输入打包命令：npm run build-cx，即可开始执行打包操作。

    打包成功

打包成功后进入刚刚配置的打包输出目录 dist/ 下查看，看看到打包后的文件已经成功生成。

2、发布到npm。

2.1、打包目录下增加配置文件index.js。

        在项目目录下增加index.js配置文件（文件名不固定，路径也不固定，我这里是放在了打包目录dist/下。），文件里主要编写文件引入的配置。比如我这里要发布的是whzbcx_code_cx.js文件，我想用户npm安装后直接加载这个文件,就可以在index.js里如下编写：

2.2、package.js文件配置发布信息。

    发布前要在package.js中配置发布的信息，这里主要配置项目名、版本号、发布的文件目录、首要加载文件、是否私有。如下：

name: 要发布的项目名称，不能和npm上已有的项目名重复。

version: 发布的项目版本号，不能和之前的版本号重复。

private: 需要为false才能npm发布。

main: 别人npm安装该组件库后首要加载的文件。我这里配置的是刚刚在dist目录下新增的index.js文件

files: 要发布的文件目录，我这里只发布了dist目录下的文件。

2.3、命令行中登录npm账号、发布。

2.3.1、登入npm

    打开命令窗口，输入 npm login ,回车，会提示输入用户名、密码、邮箱，三者全部验证通过即可登录成功。

2.3.2、登录成功后，打开package.json所在的目录下，然后运行 npm publish。

    如下图所示，即发布成功，最新版本号为 1.0.4.

发布成功

3、安装使用。

3.1、在所要使用的项目目录下npm安装。

        打开命令窗口，在所要引用的项目目录下，运行 npm install whzbcx_code_cx ，等待安装成功。

        如下，可看到已经安装成功。

安装成功

3.2、配置项目的main.js文件。

    将组件模块安装到项目中后，就要在src/main.js文件中来配置使用该组件库了。

配置如下：

上面的配置中，有三部分：引入css文件、引入js文件、循环遍历注册全局组件。

        其中是否引入css文件 取决于我们第一步打包时是否将css样式分离出来单独打包成.css文件。

        循环遍历注册组件 是因为我们第一步打包时是将多个组件存在一个对象里打包出来的，所以这里需要遍历对象，将里面每一个组件单独进行注册。

至此，我们的打包、发布、安装使用就全部完成了。