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. version ：publish 過一次後，相同版本的沒法再次發佈

5 後 記

感謝支持。

若不足之處，歡迎你們指出，共勉。

若是以爲不錯，記得 點贊，謝謝你們 ʚ💖ɞ

歡迎關注。

• GitHub
• 掘 金
• 簡 書