软件之家从零开始在NPM上发布一个Vue组件的方法步骤_vue.js_脚本之家

登记NPM账号并创办协会

其他,若是设置了npx的话,还足以很便利地由此npx
vue这一主意落到实处免安装使用。

├── demo.html├── my-banner.common.js├── my-banner.common.js.map├── my-banner.css├── my-banner.umd.js├── my-banner.umd.js.map├── my-banner.umd.min.js└── my-banner.umd.min.js.map

作者们将Banner.vue置于src/components目录下,同期在该目录下新建叁个index.js文件,用来注册Vue组件。

vue create my-banner

给你的构件库命名

增添Banner后的页面效果

接下去,要求将package.json中的main字段指向刚刚生成的库文件。这里以commonjs为例:

{ "main": "./dist/my-banner.common.js"}
yarn add @abc/my-banner 

@vue/cli会提醒您选拔二个预置的配置,这里我们直接选择“default”就能够,之后@vue/cli会自动调用yarn或npm来进行依赖的下载。下载完成后就可以步向项目目录了:

如此这般就可以打包阶段就是是瓜熟蒂落了。

yarn serve
// src/components/index.jsimport Vue from "vue";import Banner from "./Banner.vue";const Components = { Banner};Object.keys.forEach(name => { Vue.component(name, Components[name]);});export default Components;

接下来实践yarn package,会在dist目录下生成下列文件:

接下去,我们须求对这些组件实行包装。这里大家能够使用@vue/cli
3.0自带的打包成效。展开package.json文件,在scripts中加进一项:

在这里之后,你能够新建四个项目,然后

{ "name": "@abc/my-banner"}
{ "scripts": { "package": "vue-cli-service build --target lib --name my-banner ./src/components/index.js" }}

接下去就足以创建项目了,这里大家创立二个my-banner项目,里面将会含有三个Banner组件:

制造项目

总结

cd my-banner

├── README.md├── babel.config.js├── node_modules├── package.json├── public│ ├── favicon.ico│ └── index.html├── src│ ├── App.vue│ ├── assets│ ├── components│ └── main.js└── yarn.lock

How to create and publish your own VueJS Component library on NPM using
@vue/cli 3.0

   This is a banner! {{ msg }}  For a guide and recipes on how to configure / customize this project,
 check out the vue-cli documentation.    &lt;!-- &#30465;&#30053;&#26377;&#20851;&#20869;&#23481; --&gt; <!-- 省略有关内容 -->
# 如果喜欢npmnpm i -g @vue/cli# 如果喜欢yarnyarn global add @vue/cli
npm publish --access public

参照文章

@vue/cli 3.0自动生成的暗中认可首页

能够看看,大家编辑的Banner组件已经打响在页面上渲染出来了。

您须要给您的这几个组件库起二个名字,这里运用的是package.json中的name字段。注意@后的名目就填写您刚刚成立的公司的名号。

就足以在localhost:8080看来效用了:

纠正一下类其余主入口main.js

接下去大家修正一下@vue/cli自动生成的src/components/HelloWorld.vue文件,引用一下大家适逢其会编写的Banner组件:

笔者们前天开头编写制定一个特别轻便的Banner组件。

npm ERR! This package has been marked as privatenpm ERR! Remove the
‘private’ field from the package.json to publish it.

TL;DCR-V本文细致讲授了在NPM上公布二个Vue组件的全经过,蕴涵创造项目、编写组件、打包和文告两个环节。

{ "files": [ "dist/*", "src/*", "public/*", "*.json", "*.js" ]}

顺手宣布后,就足以在您的团体页面见到刚刚公布的那么些包了。

来检查登录是或不是中标。就算成功的话,那条命令会回去您的顾客名。

   const defaultStyles = { left: 0, right: 0,};export default { props: { position: { type: String, default: 'top', validator { return ['top', 'bottom'].indexOf &gt; -1; }, }, styles: { type: Object, default: , }, }, data() { return { bannerStyles: { ...defaultStyles, ...this.styles, }, }; },};.banner { padding: 12px; background-color: #fcf6cd; color: #f6a623; text-align: left; position: fixed; z-index: 2;}.banner__top { top: 0;}.banner__bottom { bottom: 0;}

开垦localhost:8080,就能够看出默许的首页:

发布

// src/main.jsimport Vue from 'vue';import App from './App.vue';// 引用我们的自定义组件import "./components";Vue.config.productionTip = false;new Vue,}).$mount;

编写制定组件

打包

最后,使用yarn package重新塑造三遍这几个组件库,然后使用:

登陆账号,点击右上角的头像,选用“Create an
Organization”,就足以创制你本身的团伙了。

因为前边定义style时采纳了scss,所以还亟需设置多少个开拓景况注重项

来把你正好公布的那么些包增加为凭仗项。由于我们早前早就在src/components/index.js中对组件实行了全局注册,所以你今后得以平昔在template中调用。

聊到底步骤:再度营造与宣布

接下来,大家必要在package.json的files字段中注脚这几个组件库项目要求包蕴的公文:

如上,大家就从零带头达成了多少个Vue组件在npm上发表的流水生产线,是否相当轻松吗?那么,今后就开始颁发多少个你谐和的组件吧!希望对我们的就学抱有助于,也希望大家多都赐教脚本之家

上面运营开荒情形本地服务器:

挂号账号,都是常规操作,须求填写的有真名、邮箱、客户名和密码。之后邮箱会吸收接纳确认邮件,标题为“Verify
your npm email address”,发件人是“npm,
Inc.”,点击邮件中的链接就可以激活账户了。

地面命令行登入npm

介怀这里或然会报上边包车型客车不当

这里我们一向运用@vue/cli来生成项目。若无安装@vue/cli的话,能够动用以下格局开展设置:

成果

yarn add sass-loader node-sass -D

yarn serve

消除办法异常粗略,根据提醒删除package.json中的private字段,或将其设置为false都得以。

后来按提醒输入客商名和密码就能够。

npm whoami
npm login

团伙有三种选用,援助个体发表的内需上交每月7刀的“管理开支”,而大家将来只须要透露贰个集体的包,那就足以选取无需付费版本。

相关文章

发表评论