发布自己的npm包，vue组件模块化

创建npm账号

要先在 npm官网 上注册一个账号。如果已经有账号了可以忽略这一步。

创建项目

本地先创建一个项目vue create ranking

然后在src的同级目录，新建一个packages目录，作为组件库

配置vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    devtool: 'source-map'
  },
  // 强制内联CSS
  css: {
    extract: false
  },
  // 扩展 webpack 配置，使 components 加入编译
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
      .add('/packages')//刚才新建的目录
      .end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        // 修改它的选项...
        return options
      })
  },

})

编辑组件

在packages目录下增加index.js和自定义的组件目录
然后下面再新建index.js和src目录，放同名组件的vue文件（别忘了给组件加name）

编辑chart-ranking/index.js

import ChartRanking from './src/chart-ranking'

// 为组件提供 install 安装方法，供按需引入
ChartRanking.install = Vue => {
  Vue.component(ChartRanking.name, ChartRanking)
}

// 默认导出组件
export default ChartRanking

编写packages/index.js，导出组件库

import ChartRanking from './chart-ranking/index'
const components = [
  ChartRanking
]
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = Vue => {
  // 判断是否可以安装
  if (install.installed) return
  // 遍历注册全局组件
  components.map(component => Vue.component(component.name, component))
}
// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}
export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  // 以下是具体的组件列表
  ChartRanking
}

本地测试引用

import Vue from 'vue'
import App from './App.vue'

// 导入组件
import packages from '../packages/index'

Vue.config.productionTip = false

Vue.use(packages);

new Vue({
  render: h => h(App)
}).$mount('#app')

app.vue里可以直接调用，不需要重新引入

<template>
  <div id="app">
    <chartRanking
      class="wrap-chart"
      :data="data"
      :option="option"
      :barStyle="barStyle"
    ></chartRanking>
  </div>
</template>

npm run serve运行查看能否运行成功
如果没问题，就可以发布npm了

发布的相关配置

package.json的scripts里新增一项

"lib": "vue-cli-service build --target lib --name ranking-components --dest lib packages/index.js"

执行编译命令 — npm run lib
编译成功后，会得到一个lib文件夹

配置npm发布项
配置package.json文件

  "name": "ranking-baiyikai",
  "version": "0.1.1",
  "private": false,
  "main": "lib/ranking-components.umd.min.js",
  "description": "大屏排行榜组件",
  "keywords": [
    "ranking",
    "screen",
    "baiyikai"
  ],
  "author": {
    "name": "baiyikai"
  },

添加.npmignore文件
发布npm包的时候忽略不必要的文件上传

# 忽略目录
src
packages
node_modules
public
# 忽略指定文件
vue.config.js
babel.config.js
*.map
jsconfig.json


#需要编译上传的只有lib文件夹，package.json,README.md这三个。其他的都可以忽略

发布npm

运行npm login，输入用户名密码等
如果发布失败可以试一下把npm更换成官方源

npm config set registry https://registry.npmjs.org

登录后运行npm publish发布
如果发布失败报错npm ERR! code E403
那可能是组件名字重复了
package.json文件 name 字段 重新改一下
（如果不是第一次发布，还有可能是版本号重复了，每次发布需要更新版本号）

到此就已经发好一个npm包了，可以再另一个项目下载使用一下

npm install ranking-baiyikai

main.js引入

import Vue from 'vue'
import App from './App.vue'
import rankingBaiyikai from "ranking-baiyikai"

Vue.config.productionTip = false
Vue.use(rankingBaiyikai);

new Vue({
  render: h => h(App)
}).$mount('#app')

在vue文件直接使用组件
注意，标签调用的是给组件起的name，vue文件里的那个

<template>
  <div id="app">
    <chartRanking
      class="wrap-chart"
      :data="data"
      :option="option"
      :barStyle="barStyle"
    ></chartRanking>
  </div>
</template>

完成