开发
Vue/cli3开发插件
创建项目并新增目录结构
编写index.js并导出
import vueDialogservice from './dialog/dialog.vue'
export default {
install: function (Vue) {
const vueDialogserviceInstance = Vue.extend(vueDialogservice)
let vueDialogserviceInit;
const initInstance = () => {
// 实例化vue实例
vueDialogserviceInit = new vueDialogserviceInstance();
let vueDialogserviceEl = vueDialogserviceInit.$mount().$el;
document.body.appendChild(vueDialogserviceEl);
};
// 在Vue的原型上添加实例方法,以全局调用
Vue.prototype.$Dialog = {
showDialog(options) {
//打开弹出框
if (!vueDialogserviceInit) {
initInstance();
}
vueDialogserviceInit.showDialog(options)
}
}
}
}
配置
package.js配置
"name": "vdialogservice",
"version": "0.1.1",
"author": "whiteGG",
"main": "lib/vdialogservice.umd.min.js",
"private": false,
name为组件名,这个必须是唯一的,npm上必须不存在重复的,所以起名字之前先去npm上搜索搜索,以防有相同的,后面发布会报错
private设置为false。
main:入口文件,编译后的包文件
version:修改重新发布时要更改版本否则报错
新增vue-cli3 库模式打包命令,详解
"lib": "vue-cli-service build --target lib --name vdialogservice --dest lib packages/index.js"
执行打包
npm run lib
生成lib包
发布
npm无账号先行注册账号。不过一般在国内我们都是使用的镜像,所以注册账号的时候要注意别注册错误了。
所以这个时候可以安装一个nrm来管理切换不同的源
全局安装nrm
npm install -g nrm
查看源列表
nrm ls
查看当前源地址
nrm current
当前使用淘宝镜像
’
切换源
nrm use npm
上述已经切换到npm上了,当然如果不想使用nrm切换,可以在使用npm命令的时候加 -registry=https://registry.npmjs.org/
例如发布npm publish -registry=https://registry.npmjs.org/
,或者直接set npm自己的源,不过这样到时候要用淘宝源又得重新设置,很不好,所以最好的是使用nrm来管理不同的源
1.注册npm账号
npm adduser
2.登录npm
npm login
输入相关信息
3.发布
npm publish
遇到的错误
错误一: 401 Unauthorized - PUT
https://registry.npmjs.org/vue-dialog-service --You must be logged in
to publish packages解决:要执行登录
npm login
错误二: 403 Forbidden - PUT https://registry.npmjs.org/vue-dialog-service - You do not have permission to publish “vue-dialog-service”. Are you logged in as the correct user?
解决:npm上有存在和你相同的name,请修改package.js中的name
错误三:403 Forbidden - PUT https://registry.npmjs.org/vdialogservice - you must verify your email before publishing a new package: https://www.npmjs.com/email-edit
解决:邮件激活,如果没有激活忘记,可以登录npm再次去激活一次
错误四:403 Forbidden - PUT https://registry.npmjs.org/vdialogservice - You cannot publish over the previously published versions: 0.1.0.
解决:重新发布,package.js中的version要增加
地址-> vDialogService
聊聊代码地址:vue-dialog-service
后记:
在引用的已经上传的插件还需要在main.js引入样式,很麻烦。
import 'vdialogservice/lib/vdialogservice.css'
按照Vue中方式修订
module.exports = {
css: {
extract: false
}
}
然后重新发布测试
果然很奏效~
平常心~