資訊專欄INFORMATION COLUMN
摘要：前言這里是發(fā)布包的具體步驟，手把手教會，相關(guān)原理在其他文章下面有原理好文章指路分鐘教你快速開發(fā)一個插件并發(fā)布手把手教你封裝一個發(fā)布之前，需要注冊一個賬號這里注冊具體步驟新建項目如需安裝代碼下面新建一個文件夾。
前言
這里是發(fā)布npm包的具體步驟，手把手教會，相關(guān)原理在其他文章下面有
原理好文章指路
10分鐘教你快速開發(fā)一個vue插件并發(fā)布npm
手把手教你封裝一個 vue component
發(fā)布之前，需要注冊一個npm賬號
https://www.npmjs.com/ 這里注冊
1.新建項目
$ npm install -g vue-cli
$ vue init webpack-simple my-project
$ cd my-project
$ npm install
$ npm run dev
如需安裝less
$ npm install less less-loader --save-dev
2.代碼
src 下面新建一個components文件夾。里面放各種組件文件夾。
例如新建input文件夾 里面有index.js 和Input.vue文件
// input.js
import Input from "./Input.vue"
export default Input
// Input.vue
export default {
name: "ui-input", // 這是注冊組件的名字。也是要使用這個npm包的標簽名字
props: {
},
data () {
return {
}
},
mounted () {
},
}
// main.js
import uiInput from "./components/input"
const jovoUI = {
uiInput,
uixxx // 其余vue組件
}
if (typeof window !== "undefined" && window.Vue) {
window.Vue.use(jovoUI)
}
jovoUI.install = function (Vue, options) {
Vue.component(uiInput.name, uiInput)
}
export default jovoUI
// 跑項目的時候測試用,在本地測試的時候，就把組件注冊在本地，app.vue里面引用組件調(diào)試
// Vue.component("ui-input", uiInput)
// new Vue({
// el: "#app",
// render: h => h(App)
// })
需要在本地測試的時候,解開上面的注釋，在app.vue或者其他vue文件里測試
// app.vue
3.發(fā)布準備
1. .gitignore文件 刪掉dist忽略
2.
// webpack.config.js
之前是
output: {
path: path.resolve(__dirname, "./dist"),
publicPath: "/dist/",
filename: "build.js"
}
改為
output: {
path: path.resolve(__dirname, "./dist"),
publicPath: "/dist/",
// filename: "build.js" 這是原來的
filename: "jovoui.js", // 打包后js的名字，自己取,本地調(diào)試時，新加的這些東西都要注釋掉，解開filename: "build.js注釋
library: "jovoui", // 使用require引用時的名字
libraryTarget: "umd", // 指定你的模塊輸出類型，可以是commonjs,AMD,script形式,UMD模式
umdNamedDefine: true
}
3. // package.json文件
// 文件第一行的 name 是包的名字，不能和已有的npm包重名，否則npm publish時會提示你是否登錄，其實你已經(jīng)登陸了 例如"name": "jovocom",
private改為false
"main": "dist/jovoui.js" 這條是新增的，是打包文件入口，之前是build.js,參考第二條取得打包名字
4. // index.html
// 本地調(diào)試時，需要把第一行解開,以及main.js的注釋解開
注釋
4.注意事項
1.每次發(fā)布之前，要在package.json改版本號
2.npm run build, // 會在生成一個dist文件，里面有jovoui.js和jovoui.map
3.npm publish，// 若有錯執(zhí)行第5條，判斷是否登錄，未登錄執(zhí)行第四條
4.npm login your account your password [email protected]
5.npm whoami // 判斷是否登錄
6.每次發(fā)布完npm包再本地調(diào)試npm時，需要解開以下注釋
(1)index.html 改為 // 本地調(diào)試時
(2)webpack.config.js 里面的注釋切換成build那個 新增的注釋掉
(3)main.js 本地注冊的部分解開注釋
(4)npm run build 打包一次
7.更新記一次坑，有一次不知道怎么的切換了淘寶源，npm login一直登不上，報錯conflict什么的。要切換到npm官方倉庫上，這個時候npm login就能登上了。最后發(fā)布npm是發(fā)布到官方npm上，不是cnpm,所以要是只能有npm才能下載
$ npm install -g nrm
$ nrm use taobao
$ nrm use npm // 用這句使用npm
8.npm publish出錯，說包的名字跟已有的包太相似了，叫換一個，然后換了一個，就成功publish了，所以取名字還是要獨特一點，符合這個組件特性一點
使用npm發(fā)布成功使用。
$ npm install xx // 這是發(fā)布的包的名字，就是package.json里面的name
每次包更新之后再次安裝可以 $ npm install xx@latest
// main.js
import xx from "包名"
Vue.use(xx)
// 某個vue文件
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98823.html
摘要：命令行工具，即。我們在寫命令行工具的時候，需要指定一個可執(zhí)行文件?；蛘咚恼{(diào)試我們?nèi)职惭b一個包后，可以全局調(diào)用這個命令行工具。 命令行工具，即 Cli(command-line interface)。是在圖形用戶界面得到普及之前使用最為廣泛的用戶界面，它通常不支持鼠標，用戶通過鍵盤輸入指令，計算機接收到指令后，予以執(zhí)行。在學習這篇教程之前，你需要先了解NodeJs,NPM和一些常用的...
摘要：下面我就以最近開發(fā)的數(shù)字鍵盤為例，一一列出具體步驟寫基礎(chǔ)模塊代碼注冊賬號配置配置添加單元測試完善發(fā)布足可以完成一個，是為了開發(fā)一個高質(zhì)量的?；照路謩e表示是否構(gòu)建成功代碼測試覆蓋率版本號下載量開源證書，看起來逼格滿滿有木有。 寫在前面 沒有發(fā)布過npm包的同學，可能會對NPM對開發(fā)有一種蜜汁敬畏，覺得這是一個很高大上的東西。甚至有次面試，面試官問我有沒有發(fā)過npm包，當時只用過還沒寫過，...
摘要：這個由提供的工具。在轉(zhuǎn)換步驟是異步時，你可以這樣告訴本次轉(zhuǎn)換是異步的，會在中回調(diào)結(jié)果通過返回異步執(zhí)行后的結(jié)果參考編寫一個 本文示例源代碼請戳github博客，建議大家動手敲敲代碼。 本文不會介紹loader的一些使用方法，不熟悉的同學請自行查看Webpack loader 1、背景 首先我們來看一下為什么需要loader，以及他能干什么?webpack 只能理解 JavaScript...
摘要：請注意，在版本號之前有個字符。理論上，次版本號的變化并不會影響向后兼容性。雖然可以通過命令關(guān)閉在版本號前面使用的默認行為，但這個只會影響頂級依賴關(guān)系。 本文作者對比了當前主流的包管理工具npm、yarn、pnpm之間的區(qū)別，并提出了合適的使用建議，以下為譯文： NPM npm是Node.js能夠如此成功的主要原因之一。npm團隊做了很多的工作，以確保npm保持向后兼容，并在不同的環(huán)境中...
閱讀 1342·2021-11-24 10:24
閱讀 4223·2021-11-22 15:29
閱讀 1119·2019-08-30 15:53
閱讀 2829·2019-08-30 10:54
閱讀 2017·2019-08-29 17:26
閱讀 1314·2019-08-29 17:08
閱讀 633·2019-08-28 17:55
閱讀 1624·2019-08-26 14:01
