前言
这篇文章是准备不写的,因为之前写过uniapp插件上传npm,然后加上在手写VUE步骤条组件这篇文章中有提到后期会将这个步骤条组件上传到npm仓库,然后我就用上传uniapp插件的方式试着上传VUE这个插件,上传是能上传,结果在VUE项目中npm安装的这个插件的时候就无法安装,于是我就再思考,哦原来这个uniapp插件上传和VUE插件上传还不一样,于是就有了这篇文章!
开干
1.创建一个空VUE项目
之前创建VUE项目的时候,应该用的是下面这个命令
vue init webpack you-project
但是我们现在不是开发项目,而是一个插件,所以不用创建完整的VUE环境,使用如下命令创建即可
vue init webpack-simple you-project
两者的差异
这里基本上无需更改什么信息,我这个步骤条的插件需要使用到sass依赖,所以正好可以在此将环境安装好!完整项目结构如下!
2.启动项目
先执行下面命令
npm install
这里install的耗时较长,请不用使用cnpm淘宝镜像,因为如果在这里更改为淘宝镜像后,后期推送npm插件的时候有需要更换回来,环境依赖安装完后,启动项目
npm run dev
启动成功!
3.删除一些没必要的文件
这一步可做可不做,主要就是让使用我们插件的同行,看插件依赖时不这么懵逼!对比两张图就清楚明白这步的意义了!
这是没有做删除的插件
这是做了删除的插件
关于这个dist大家先不用管,后面会讲到这个,
将assets目录删除了,这个目录就是存放资源的,如果插件中没有什么静态资源可以干掉,其他的就不用动了!
4.编写插件
如果插件工程量比较大的话可以创建目录分开,我这个插件就比较简单,所以就不搞这么大的架子,结构如下图
simple-step-bar.vue,这个就是步骤条组件代码,index.js就是对外暴露我们组件的文件,此处需要注意的是 install。 Vue的插件必须提供一个公开方法 install,该方法会在你使用该插件,也就是 Vue.use(yourPlugin)时被调用。这样也就给 Vue全局注入了你的所有的组件。
5.修改配置项 webpack.config.js
entry: './src/plugin/index.js',//指定插件的对外暴露文件
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',//build后项目生成目录
filename: 'simple-step-bar.js',//build后的文件名
library: 'simple-step-bar', // 指定的就是你使用require时的模块名
libraryTarget: 'umd', // 指定输出格式
umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
},
- library:指定的就是你使用require时的模块名
- libraryTarget:为了支持多种使用场景,我们需要选择合适的打包格式。常见的打包格式有 CMD、AMD、UMD,CMD只能在 Node 环境执行,AMD 只能在浏览器端执行,UMD 同时支持两种执行环境。显而易见,我们应该选择 UMD 格式。
- umdNamedDefine:会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
有时我们想开发一个库,如lodash,underscore这些工具库,这些库既可以用commonjs和amd方式使用也可以用script方式引入。
这时候我们需要借助library和libraryTarget,我们只需要用ES6来编写代码,编译成通用的UMD就交给webpack了
6.编译插件
npm run build
7.修改package.json 文件
发布开源因此需要将这个字段改为 false
“private”: false,
这个指 import simple-step-bar 的时候它会去检索的路径
“main”: “dist/simple-step-bar.js”,
注意这里如果不指定这个文件会导致引用组件是找不到这个组件
8.编写README.md文件
这步操作如果你想让使用者猜你写的插件的话就没必要做了,如果不想那就在这个README.md文件中详细的编写这个插件怎么使用!
插件上传npm后别人进入插件后这个文件就会给使用者做引导!如下图
9.本地登录npm
npm login
没有npm账号的去官网注册一个完事了npm官网,这里还要注意邮箱验证的问题,不然无法上传插件。uniapp插件上传npm这篇文章中有描述
10.插件推送npm
npm publish
推送成功后控制台如上,然后绑定的邮箱中就会送到通知,无需查看!
然后npm仓库后台就会改变插件数量!
这是我们推送的simple-step-bar这个插件不会立马显示,只是改变仓库插件的数量,大概等个2分钟才会显示!
那么到这里npm上传VUE插件就完成了!
11.npm下载插件测试
npm i super-step-bar
安装成功后再node_modules中会有当前插件
12.项目使用simple-step-bar插件
import simpleStepBar from 'simple-step-bar'
Vue.use(simpleStepBar);
vue界面中使用
测试代码
<template>
<div id="app">
<div class="description-div">默认</div>
<simple-step-bar></simple-step-bar>
<div class="description-div">rem单位</div>
<div>
<button @click="less(1)">后退</button>
<button @click="plus(1)">前进</button>
</div>
<simple-step-bar
:totalWidth='80' :totalHeight='3' :unit='"rem"'
:stepList="stepList1" :currentStep="currentStep1"
:itemWidth='40' :lienWidth='0.1'
></simple-step-bar>
<div class="description-div">px单位</div>
<div>
<button @click="less(2)">后退</button>
<button @click="plus(2)">前进</button>
</div>
<simple-step-bar
:totalWidth='720' :totalHeight='48' :unit='"px"'
:stepList="stepList2" :currentStep="currentStep2"
:itemWidth='240' :lienWidth='2'
></simple-step-bar>
<div class="description-div">个性化样式</div>
<div>
<button @click="less(3)">后退</button>
<button @click="plus(3)">前进</button>
</div>
<simple-step-bar
:totalWidth='80' :totalHeight='3'
:unit='"rem"' :stepBackground='"#FFFFFF"'
:stepList="stepList3" :currentStep="currentStep3"
:itemWidth='20' :lienWidth='0.1' :lienColor='"red"'
:processingFontColor='"#ffffff"' :processingFontColorN='"#FF0005"'
:processingBackground='"#ef5e41"' :stepBorderColor='"#FF0005"'
></simple-step-bar>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
stepList1:["步骤a","步骤b"],
stepList2:["步骤1","步骤2","步骤3"],
stepList3:["步骤一","步骤二","步骤三","步骤四"],
currentStep1:1,
currentStep2:2,
currentStep3:3,
}
},
methods:{
plus(type){
switch (type) {
case 1:
this.currentStep1++;
break;
case 2:
this.currentStep2++;
break;
case 3:
this.currentStep3++;
break;
}
},
less(type){
switch (type) {
case 1:
this.currentStep1--;
break;
case 2:
this.currentStep2--;
break;
case 3:
this.currentStep3--;
break;
}
}
}
}
</script>
<style lang="scss">
#app {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.description-div{
margin-top: 2rem;
height: 2rem;
}
</style>
关于该组件详细使用情况手写VUE步骤条组件,害,本来只想写一个步骤条的功能的,结果硬是写成了插件,还既然开源挂载npm上了服了!
npm:simple-step-bar
gitee:simple-step-bar
其他
npm上传插件名不能和其他人的插件重名
版本不能重,所以每次更改后需要修改一下版本
npm version 1.1.0
每次上传新的版本是需要从新build一下,然后才能推送上去
npm run build
如果自己仓库已经存在插件,那么删除24小时后才能从新使用删除的名字!
npm unpublish guitest@1.0.1 //指定版本号
另外主要是处于安全性考虑,在Azer NPM 撤包事件后,npm公布了一版新的规则,如下
- 版本更新少于24小时的包允许下架;
- 超过24小时的包的下架需要联系npm维护者;
- 如果有npm维护者参与,npm将检查是否有其他包依赖该包,如果有则不允下架;
- 如果某个包的所有版本都被移除,npm会上传一个空的占位包,以防后来的使用者不小心引用怀有恶意的替代者。