封装elementUI组件并发布npm包

发包流程：

1、本地新建项目，并将组件代码写入

2、在package.json文件中配置包信息以及打包操作，并运行打包程序

3、注册npm账号

4、npm addUser或npm login 登录npm账号、npm publish 发布npm包（zhulei_npm）

1、本地新建项目，并将组件代码写入

• 新建项目

npm install @vue/cli -g
vue create common-page-npm

• 将组件代码写入，并在组件文件夹下新建index.js文件

• index.js

import CommonPage from "./CommonPage/index.vue";
const install = function (Vue) {
  Vue.component(CommonPage.name, CommonPage);

  if (typeof window !== "undefined" && window.Vue) {
    install(window.Vue);
  }
};
export default install;

2、在package.json文件中配置包信息以及打包操作

• 配置包信息

--dest : 输出目录，默认 dist 。这里我们改成 lib 打包后的文件夹的名称

--target：lib 关键字 指定打包的目录

--name：打包后的文件名字

• 添加.npmignore 文件，设置忽略发布文件

我们发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。

和 .gitignore 的语法一样，具体需要提交什么文件，看各自的实际情况。

在这里我，没有创建.npmignore文件来忽略所不需要的文件，我在package.json文件中设置了files也是一样的，配置files的意思就是表示要显示的文件，其他的文件就相当于忽略了，和创建.npmignore文件进行忽略，效果是一样的。

3、注册npm账号

官网地址：npm

4、npm addUser或npm login 登录账号、npm publish 发布npm包

• npm addUser或npm login 登录账号（两者作用完全一致，login是addUser的别名）

注意：1、输入密码时，控制台是不会显示密码的，直接输入即可

            2、登录时会向你的邮箱里发送一个一次性密码，填入即可

• npm publish 发布npm包（每次发包时版本都要变化，不然发不上去）

用包流程：

                        1、本地项目安装依赖 npm install 包名

                        2、在项目入口文件main.js中引入并注册

                        3、项目中直接使用

1、本地项目安装依赖 npm install 包名

npm install common-page-npm

2、在项目入口文件main.js中引入并注册

import CommonPage from "common-page-npm/lib/common-page-npm.umd.js";
Vue.use(CommonPage);

3、项目中直接使用