Npm 发布 Vue 组件教程

1 前 言

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

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

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

k-progress

安 装

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

4.2 登 录

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

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

4.3 发 布

npm publish

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

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

5 后 记

感谢支持。

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

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

欢迎关注。

https://juejin.im/post/5df301db6fb9a0165a7d439b

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论