# 13. Npm 发布 Vue 组件教程

# 1 前 言

平时我们在开发的时候经常使用 npm 安装各种组件。

今天我们就来尝试下制作一个自己的组件发布到 npm 上。

这里我以自己刚发布的一个 Vue 组件来介绍。感兴趣的可以来下载玩玩。

k-progress (opens new window)

# 安 装

npm install -S k-progress

# 使 用

// main.js
import 'k-progress';
import 'k-progress/dist/k-progress.css';

# 2 开 发

# 2.1 新建项目

新建一个 Vue ,熟悉的可以直接略过哈。

这里我使用的是 @vue/cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

执行该命令,可检查是否安装成功。

vue --version

我经常使用 vue ui 来新建项目,这个命令会生成一个可视化操作页面,特别方便。

我的项目用到了 scss,新建的时候勾选上。

至此项目新建完成。

# 2.2 开发功能

默认新建的项目有个 HelloWorld.vue 的例子,我们可以在这个页面,引用我们的组件来检测开发效果。

src/components 中,我们新建一个 progress.vue,该文件名称随意。

具体的插件功能在此页面编写。

在同级目录下新建一个 index.scss 文件用来保存插件使用的样式文件。

在同级目录下新建一个 index.js 文件来注册 Vue 组件。

这里以我为例。

import Vue from 'vue';
import kProgress from './progress.vue';
import './index.scss';

const Components = {
    kProgress
};

Object.keys(Components).forEach(name => {
    Vue.component(name, Components[name]);
});

export default Components;

同时我们可以在 HelloWorld.vue 文件中来调用我们的组件查看效果。

# 3 构 建

构建主要是对 package.json 文件进行更改。以我的为例。

"name": "k-progress",
"version": "1.0.0",
"main": "./dist/k-progress.common.js",
"files": [
    "dist"
],
"private": false,
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "package": "vue-cli-service build --target lib --k-progress main ./src/components/index.js"
},
  • name : 插件名称;
  • version : 版本号,每次 npm publish 都需要进行更改;
  • main : 插件的主文件路径;
  • files : 发布保留的文件;
  • private : 这里要改成 false ;
  • scripts : 执行命令;

执行 yarn package 进行构建命令,不熟悉 yarn 的可以执行 npm run package,不过真心推荐 yarn

# 4 发 布

# 4.1 注册账号

NPM (opens new window)

# 4.2 登 录

在自己的项目中,执行 npm login,会提示让你输入 npm 账号密码。

可以通过 npm whoami 来检查自己是否登录成功。

# 4.3 发 布

npm publish

这里列出可能出现的 2 个错误。

  1. "private": true 会报错
  2. versionpublish 过一次后,相同版本的无法再次发布

# 5 后 记

感谢支持。

若不足之处,欢迎大家指出,共勉。

如果觉得不错,记得 点赞,谢谢大家 ʚ💖ɞ

欢迎关注。

# 5.1 原文地址

https://xrkffgg.github.io/Knotes/blog/13.html (opens new window)

上次更新: 5/26/2020, 10:01:47 AM