vue封装的组件发布到npm，超详细及问题解决

1. 创建一个新的vue项目

vue create base-page 创建一个新的项目，npm run serve 之后删掉多余的代码

2. 将自己的组件代码移入项目中

增加一个新的packages文件夹（组件文件夹），examples文件夹（组件示例文件夹），很多的开源组件库的源码都喜欢这样做。
将自己封装的组件移入packages文件夹中。examples文件夹中放自己使用组件的示例。

记得要将自己组件的依赖下载

3. 项目配置

1. 因为我组件里面有jsx文件，所以要安装

@vue/babel-helper-vue-jsx-merge-props @vue/babel-helper-vue-jsx-merge-props

然后在根目录下添加.babelrc.js进行配置

2. 因为我使用了<a-icon :component='xx'></a-icon>ant-design的自定义图标，所以要webpack,在vue.config.js文件中配置，use()中对应的依赖也要安装，注意下载的版本。

3. 因为我使用less处理css样式，但是打包之后引用的组件中并没有样式。将打包之后的css文件强制打包到js中，就生效了,也是在vue.config.js中配置

// 默认的的主题颜色，全局可统一配置
const theme = require('./src/theme/default.json')
const path = require('path')
module.exports = {
  /*
  *  扩展 webpack 配置
  */
  chainWebpack: config => {
    // @ 默认指向 src 目录，这里要改成 examples
    // 另外也可以新增一个 ~ 指向 packages
    config.resolve.alias
      .set('@', path.resolve('examples'))
      .set('~', path.resolve('packages'))
    // 把 packages 和 examples 加入编译，因为新增的文件默认是不被 webpack 处理的
    config.module
      .rule('js')
      .include.add(/packages/)
      .end()
      .include.add(/examples/)
      .end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        // 修改它的选项...
        return options
      })
    /*
     *   处理<a-icon :component='xx'></a-icon>自定义图标问题
     */  
    const svgRule = config.module.rule('svg')
    // 清除已有的所有 loader,如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear()
    // 清除已有的所有 loader。
    // 因为是vue-cli5所以要加这两个delete.
    svgRule.delete('generator')
    svgRule.delete('type')
    // 添加要替换的 loader
    svgRule
      .oneOf('inline')
      .resourceQuery(/inline/)
      .use('vue-svg-icon-loader')
      .loader('vue-svg-icon-loader')
      .end()
      .end()
      .oneOf('external')
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: 'assets/[name].[hash:8].[ext]'
    })
  },
  css: {
    // 强制将样式打到js里
    extract: false,
    loaderOptions: {
      less: {
        modifyVars: theme,
        javascriptEnabled: true
      }
    }
  }
}

4. 组件打包

package.json 文件配置

name: 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。
version: 版本号，每次发布至 npm 需要修改版本号，不能和历史版本号相同。
private：是否私有，需要修改为 false 才能发布到 npm
description: 描述。
keywords：关键字，以空格分离希望用户最终搜索的词。
author：作者
main: 入口文件，该字段需指向我们最终编译后的包文件。

npm run build:npm 命令

--target      app | lib | wc | wc-async (默认值：app) 默认打包的项目，lib打包是组件库

--dest        指定输出目录 (默认值：dist)

最后面的src/packages/basePage/index.js 是入口文件 默认为 src/App.vue。这里指定为我们的组件入口

然后执行打包命令 npm run build:npm

5. 上传到npm

1. 添加.npmignore文件

这个和.gitignore文件效果一样，忽略不需要上传的文件，上传到npm我们只需要上传打包之后的lib及相关文件就可以。

2. 登录npm官网

• 注册一个npm账号

• 如果配置了淘宝镜像或者使用公司自己的，需要切换成npm官方镜像
  在控台输入 npm config set registry http://registry.npmjs.org 切换源
  或者使用 nrm工具 nrm use npm 没有安装的可以 npm install nrm -g

• 控制台登录npm login

• 然后最后一步npm publish,每次发布的版本要不一样，如果遇到了重名的需要改一下自己发布的名字。

最后我们可以到npm官网查看自己发布的npm包

6. 组件库使用

下载 npm i base-page-table

与普通的组件库一样引用import basePage from 'base-page-table'

配置好参数之后的实际效果

在本地开发npm模块的时候，我们可以使用npm link命令，将npm 模块链接到对应的运行项目中去，这样项目就可以连接本地npm库，进行调试开发。

在npm项目库控制台中npm link

然后到项目中npm link +库名这样连接的就是本地库了