npm(Node Package Manager)是一种用于管理和共享Node.js模块的包管理工具。它是随同Node.js一起安装的默认包管理器。它简化了Node.js项目中的依赖管理、包安装和版本控制。通过npm,开发者可以轻松地使用和共享各种Node.js模块。既然npm如此好用,如何在NPM上发布自己的第一个包呢,。本文主要讲解如何在vue2项目中创建一个Button组件,并发布到npm上,希望对你有所帮助。
1.创建项目
使用Vue-CLI3
的命令创建一个名为study-package-publish的项目,项目名称可以自定义。
vue create study-package-publish
创建好项目后,将src目录改名为preview,然后重新创建一个src文件夹,在src文件夹下新建index.js和components文件夹,在components文件夹下创建button.vue文件。
现在目录结构是这样的
因为我们修改了src文件夹的名字,所以我们需要修改webpack打包的入口文件。在vue.config.js中添加如下代码
chainWebpack:options => {
options.when(process.env.NODE_ENV==='development', config=>{
config.entry('app').clear().add('./preview/main.js')
})
},
css: { extract:false }, // 强制内联css
此时项目可以正常运行
2.编写组件代码
button.vue
<template>
<button :class="[
`btn`, `btn-${type}`,
{
[`btn-${shape}`]: shape,
[`btn-ghost`]: ghost,
[`btn-long`]: long,
[`btn-${size}`]: size
}
]" :type="htmlType" :disabled="disabled" @click="handClick">
<slot></slot>
</button>
</template>
<script>
export default {
props: {
type: {
validator (value) {
return ['default', 'primary', 'dashed', 'text', 'info', 'success', 'warning', 'error'].includes(value);
},
},
htmlType: {
validator (value) {
return ['button', 'submit', 'reset'].includes(value);
},
},
shape: {
validator (value) {
return ['circle'].includes(value);
},
},
size: {
validator (value) {
return ['default', 'small', 'large'].includes(value);
},
},
disabled: Boolean,
ghost: Boolean,
long: Boolean,
},
methods: {
handClick(e) {
this.disabled || this.$emit("click", e);
}
}
}
</script>
<style scoped lang='scss'>
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
color: #515a6e;
background-color: #fff;
border: 1px solid #dcdee2;
height: 32px;
padding: 0 15px;
border-radius: 4px;
color: #515a6e;
cursor: pointer;
transition: color .2s linear, background-color .2s linear, border .2s linear, box-shadow .2s linear, -webkit-box-shadow .2s linear;
&-circle {
border-radius: 32px !important;
}
&-long {
width: 100%;
}
&-small {
height: 24px;
padding: 0 7px;
font-size: 14px;
border-radius: 3px;
}
&-large {
height: 40px;
padding: 0 15px;
font-size: 16px;
border-radius: 4px;
}
&-default {
background-color: #fff;
&:hover {
color: #57a3f3;
border-color: #57a3f3;
}
&.btn-ghost {
border-color: #fff;
background-color: transparent;
color: #fff;
&:hover {
color: #57a3f3;
border-color: #57a3f3;
}
}
}
&-primary {
background-color: #2d8cf0;
border-color: #2d8cf0;
color: #fff;
&:hover {
background-color: #57a3f3;
border-color: #57a3f3;
}
&.btn-ghost {
background-color: transparent;
color: #2d8cf0;
&:hover {
background: rgba(245, 249, 254, .5);
}
}
}
&-dashed {
border-style: dashed;
background-color: #fff;
&:hover {
color: #57a3f3;
border-color: #57a3f3;
}
&.btn-ghost {
border-color: #fff;
background-color: transparent;
color: #fff;
&:hover {
color: #57a3f3;
border-color: #57a3f3;
}
}
}
&-text {
border: 0;
background-color: #fff;
&:hover {
color: #57a3f3;
}
&.btn-ghost {
border-color: #fff;
background-color: transparent;
color: #fff;
&:hover {
color: #57a3f3;
border-color: #57a3f3;
}
}
}
&-info {
background-color: #2db7f5;
border-color: #2db7f5;
color: #fff;
&:hover {
background-color: #57c5f7;
border-color: #57c5f7;
}
&.btn-ghost {
background-color: transparent;
color: #2db7f5;
&:hover {
background: rgba(245, 251, 254, .5);
}
}
}
&-success {
background-color: #19be6b;
border-color: #19be6b;
color: #fff;
&:hover {
background-color: #47cb89;
border-color: #47cb89;
}
&.btn-ghost {
background-color: transparent;
color: #19be6b;
&:hover {
background: rgba(244, 252, 248, .5);
}
}
}
&-warning {
background-color: #f90;
border-color: #f90;
color: #fff;
&:hover {
background-color: #ffad33;
border-color: #ffad33;
}
&.btn-ghost {
background-color: transparent;
color: #f90;
&:hover {
background: rgba(255, 250, 242, .5);
color: #ffad33;
}
}
}
&-error {
background-color: #ed4014;
border-color: #ed4014;
color: #fff;
&:hover {
background-color: #f16643;
border-color: #f16643;
}
&.btn-ghost {
background-color: transparent;
color: #ed4014;
&:hover {
color: #f16643;
background: rgba(254, 245, 243, .5);
}
}
}
&[disabled],
&.btn-ghost[disabled] {
color: rgba(0, 0, 0, .25);
border-color: #dcdee2;
background-color: transparent;
cursor: not-allowed;
}
}</style>
因为在代码中使用到了sass, 所以需要安装sass和sass-loader
因为sass和sass-loader是我们写代码时用到的包, 别人使用我们发布的包时并不会用到,所以在安装时加上-D添加到devDependencies中
npm i sass sass-loader -D
index.js
import Button from "./components/button.vue";
const components = { Button }
const install = Vue => {
for(let item in components) {
Vue.component(item, components[item]);
}
}
export default { install };
3.配置发布文件
3.1在package.json的script命令中新增一条编译组件库的命令
"lib": "vue-cli-service build --target lib --name study-package-publish --dest lib src/index.js"
这个命令中可以修改的地方只有这三个
study-package-publish: 编译完成后生成的文件的名字
lib: 编译完成后生成文件夹的名字
src/index.js: 编译的入口文件
3.2 执行编译命令——npm run lib。
编译成功后,会得到一个lib文件夹,如下图。
3.3 配置package.json
"name": "study-package-publish", // 包名称
"version": "1.0.0", // 包版本号
"description": "" // ,包描述
"main": "lib/study-package-publish.umd.min.js", // 包的入口文件,指向最终编译后的包文件
"private": false, // 是否私有,需要修改为 false 才能发布到 npm
3.4 添加 .npmignore 文件
我们发布到 npm 中,有些文件是不需要被发布的。所以我们需要添加 .npmignore 文件,设置忽略目录和文件。
# 忽略目录
preview/
public/
# 忽略指定文件
vue.config.js
babel.config.js
*.map
4.发布到NPM
首先需要到 npm (https://www.npmjs.com)上注册一个账号。
登陆之前需要将镜像源切换回原镜像
npm config set registry https://registry.npmjs.org
然后在终端执行登录命令,输入用户名、密码、邮箱即可登录。
npm login
登录成功后,输入命令,发布组件。
发布时确保你的包名,也就是package.json中的name与其他包名不同
npm publish
此时自己的npm包就发布成功了
5. 使用
发布成功后,我们就可以在别的项目中下载并使用我们创建的npm包了。
npm i study-package-publish
然后在src/main.js中引入组件库。
import myPackage from "study-package-publish"
Vue.use(myPackage)
最后在vue文件中直接使用Button组件,运行项目。
以上就是本文的全部内容了,快去自己尝试一下吧。如果你有什么疑问或者建议,欢迎你随时留言,互相讨论。