Vue 组件上传 npm 流程

在做 Vue 项目过程中，封装了一个通用组件，想将其上传至 npm 方便后续直接使用。（该组件存在于项目中 src/components/module 目录下，名称为 CitySelect ）

上传流程

第一步

src 中新建文件夹，命名为组件名，其中新建文件 index.js 用于 vue 插件模式。

vue 插件模式
vue 的插件模式中必须提供一个公开方法 install 。该方法会在使用 Vue.use(Plugin) 时被调用。

• index.js

import CitySelect from '../components/module/CitySelect.vue'

// Vue 插件模式需暴露 install 方法

CitySelect.install = function (Vue) {
  Vue.component(CitySelect.name, CitySelect)
}

export default CitySelect

第二步

在根目录 package.json 中配置打包信息

"script": {
	...
	"city-select": "vue-cli-service build --target lib ./src/city-select/index.js --dest city-select --name city-select"
}

target lib - 关键字 指定打包的目录
name - 打包后的文件名称
dest - 打包后的文件夹名称

第三步

项目根目录上打开终端，执行 npm run city-select 开始打包
根目录生成组件文件夹

第四步

在项目根目录新建文件夹 packages 并将文件 city-select.umd.min.js 复制到该文件夹
将 city-select.css 文件复制到 packages 文件夹下 style 子文件夹内

第五步

在 packages 文件夹中打开终端，执行命令 npm init -y 初始化 package.json 文件

第六步

修改 package.json 中对应内容

{
  "name": "m-city-select", 组件名
  "version": "1.0.0",
  "description": "",
  "main": "index.js", 对应打包后的组件js文件名(此处统一修改为了 index.js)
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": ["vue", "js", "css", "form"], 关键字
  "author": "xxx", 作者
  "license": "ISC"
}

第七步

切换为 npm 官方源 nrm use npm (nrm ls 查看当前源)
执行 npm login 登录账户

第八步

执行 npm publish 发布包到 npm

发布完成

使用流程

执行 npm i m-city-select
在需要引入组件的位置进行引入

import CitySelect from 'm-city-select'
import 'm-city-select/style/city-select.css'
export default {
  name: 'xxx',
  components: {
    CitySelect,
  },
}

<city-select></city-select>

更新方法

修改版本号、说明，执行 npm publish