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. version ：publish 过一次后，相同版本的无法再次发布

5 后 记

感谢支持。

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

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

欢迎关注。

• GitHub (opens new window)
• 掘 金 (opens new window)
• 简 书 (opens new window)

5.1 原文地址

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