Npm 發(fā)布 Vue 組件教程

Coder編程 2020-03-01

展開全文

1 前言

平時我們在開發(fā)的時候經常使用 npm 安裝各種組件。

今天我們就來嘗試下制作一個自己的組件發(fā)布到 npm 上。

這里我以自己剛發(fā)布的一個 Vue 組件來介紹。感興趣的可以來下載玩玩。

k-progress

安裝

npm install -S k-progress

使用

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

2 開發(fā)

2.1 新建項目

新建一個 Vue ，熟悉的可以直接略過哈。

這里我使用的是 @vue/cli。

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

執(zhí)行該命令，可檢查是否安裝成功。

vue --version

我經常使用 vue ui 來新建項目，這個命令會生成一個可視化操作頁面，特別方便。

我的項目用到了 scss，新建的時候勾選上。

至此項目新建完成。

2.2 開發(fā)功能

默認新建的項目有個 HelloWorld.vue 的例子，我們可以在這個頁面，引用我們的組件來檢測開發(fā)效果。

在 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 : 發(fā)布保留的文件；
private : 這里要改成 false ;
scripts : 執(zhí)行命令；