Npm 發布 Vue 元件教程

平時我們在開發的時候經常使用npm安裝各種元件。

今天我們就來嘗試下製作乙個自己的元件發布到npm上。

k-progress

npm install -s k-progress

// main.js

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

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

npm install -g @vue/cli

# or
yarn global add @vue/cli

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

vue --version

我經常使用vue ui來新建專案，這個命令會生成乙個視覺化操作頁面，特別方便。

我的專案用到了scss，新建的時候勾選上。

至此專案新建完成。

預設新建的專案有個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 = ;
object.keys(components).foreach(name => );
export default components;

同時我們可以在helloworld.vue檔案中來呼叫我們的元件檢視效果。

構建主要是對package.json檔案進行更改。以我的為例。

"name": "k-progress",

"version": "1.0.0",
"main": "./dist/k-progress.common.js",
"files": [
"dist"
],"private": false,
"scripts": ,

npm在自己的專案中，執行npm login，會提示讓你輸入npm賬號密碼。

可以通過npm whoami來檢查自己是否登入成功。

npm publish

這裡列出可能出現的 2 個錯誤。

"private": true會報錯

version：publish過一次後，相同版本的無法再次發布

感謝支援。

如果覺得不錯，記得 點讚，謝謝大家 ʚ?ɞ

歡迎關注。

封裝vue元件庫，發布npm

元件庫的開發和平時專案中元件的開發過程是一樣的，不同的是元件庫作為乙個外掛程式使用，使用vue.use 註冊外掛程式。vue.use方法可以接收乙個函式，如果是函式會直接呼叫這個函式 可以傳入物件，傳入物件，會呼叫這個物件的install方法。vue規定外掛程式應該暴露乙個install方法。這個方...

npm發布元件

vue cli建立vue專案以及配置檔案梳理 一 vue打包後靜態資源路徑 設定config index.js檔案裡build部分的assetspublicpath 二 vue打包後部分路徑不對 設定build utils.js檔案裡cssloaders部分的publicpath 1.註冊npm賬號...

vue元件發布到npm，類似element ui

1.建立webpack 類專案 vue init webpack demo 2.目錄 3.編寫元件 packages timer就是編寫的元件，跟普通元件無差別，這裡只是用於測試 4.修改package.json 畫紅線部分即是需要修改或新增的內容 5.修改webpack.config.js 畫橢圓...