vue 元件發布為 npm 包,分為如下三個步驟

在官網給了乙個最基礎的 npm 包的 package.json 配置檔案如下

,

"repository": ,
"keywords": , //關鍵字,方便別人搜尋
"author": "", //作者自己的名字
"license": "isc",
"bugs": ,
"homepage": "" //可以指向自己的github位址
}

2.1 在上邊 package.json 的基礎上我們需要新增devdependencies欄位和 dependencies字段,用來新增專案開發依賴和專案依賴

,

"author": "heyushuo",
"license": "isc",
"repository": ,
"devdependencies": ,
"dependencies": 
}

2.2 此時我們需要安裝依賴包

npm install

2.3 根目錄下新增 webpack.config.js 檔案,並新增配置

const path = require("path");

const webpack = require("webpack");
const uglify = require("uglifyjs-webpack-plugin");
module.exports = ,
//這裡我們可以剔除掉一些通用包,自己的包不打包這些類庫,需要使用者環境來提供
externals: ,
module: ,,,
]},,}
]},
plugins: [
//壓縮js**
new webpack.optimize.uglifyjsplugin(,
//輸出去掉注釋
output: 
})]};

2.4 開始開發自己的元件了

在 index.js 檔案引入寫好的元件,並匯出元件

import toast from "./component/index.vue";

export default toast;

npm run build

//這裡打包後的檔案與package.json檔案內的main欄位相對應

"main": "dist/toast.min.js",

接下來就是最重要的一步註冊 npm 包,發布自己的包

首先需要在 npm 建立乙個賬號

在終端執行 npm login 輸入你註冊的 npm 的賬號和密碼

發布你的包

這裡需要注意:一定要確保本地映象為 npm,不然無法提交成功

// 1.查詢當前配置的映象

npm get registry
//// 設定成**映象
npm config set registry 
// 換成原來的
npm config set registry 

npm login           //登入npm

npm publish //發布包
npm unpublish //刪除包

.*

/node_modules
/src
package-lock.json
webpack.config.js

以上就完成了發布自己的包

Npm 發布 Vue 元件教程

平時我們在開發的時候經常使用npm安裝各種元件。今天我們就來嘗試下製作乙個自己的元件發布到npm上。k progress npm install s k progress main.js import k progress import k progress dist k progress.css ...

封裝vue元件庫，發布npm

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

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

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