如何从0撸出一个vue组件库并发布到npm？下面本篇文章手把手带大家从0开发一个vue组件库，看看怎么发布到npm，希望对大家有所帮助。
1、新建文件夹在终端打开执行 npm init -y
生成package.json如下,注意如果要发布到npm,name不能有下划线,大写字母等
- { "name": "vuecomponentdi", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC"}
登录后复制
2、建立目录结构
目录结构如下
立即学习“前端免费学习笔记（深入）”；
- -- vueComponentDi -- packages -- button -- index.js -- index.vue -- toast -- index.js -- index.vue -- index.js -- package.json
登录后复制
3、本地调试
vueComponentDi/index.js
- export default function(){ console.log('本地调试')}
登录后复制新建一个vue项目
- vue create testvue
登录后复制
在testvue下的package.json下的测试依赖devDependencies添加vueComponentDi/index.js绝对地址
- "devDependencies": { ... "vuecomponentdi": "F:/vueComponent@Di/vueComponentDi",//根据自己实际项目地址填写 ... }
登录后复制执行npm link
在testvue执行npm link将vuecomponentdi软链接到node_modules中
vuecomponentdi安装Eslint
由于testvue引入组件会进行Eslint检测,不安装会报错(testvue关闭Eslint可省略这一步)
安装方法:
- npm install eslint@6.7.2 --save-dev ./node_modules/.bin/eslint --init
登录后复制在testvue使用vuecomponentdi
import test from “vuecomponentdi”
登录后复制
控制台打印>本地调试
4、开发一个button组件
button模块:进入vueComponentDi/packages/button/index.vue
type只支持传入primary属性,v-on=”listeners”表示包含了父作用域中的(不含.native修饰器的)v−on事件监听器。它可以通过v−on=”listeners”表示包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=”listeners”表示包含了父作用域中的(不含.native修饰器的)v−on事件监听器。它可以通过v−on=”listeners” 传入内部组件
登录后复制button模块导出:进入vueComponentDi/packages/button/index.js
如果导出一个带有install函数的对象,则在Vue2中可以直接使用Vue.use(xx)调用此函数,既执行 Vue.component(name,option)创建了一个组件
- import button from "./index.vue"button.install=(Vue)=>{ Vue.component(button.name,button)}export default button
登录后复制聚合导出button:进入vueComponentDi/index.js
因为开发的组件不止一个,所以需要在入口文件统一导出
- import diButton from "./packages/button"export { diButton}
登录后复制在testvue使用
登录后复制
5、开发一个toast弹窗
toast模块:vueComponentDi/packages/toast/index.vue
type只支持warning和success
登录后复制toast模块导出:vueComponentDi/packages/toast/index.js
因为toast弹窗需要在vue中支持this.$toast调用,所以用了Vue.extend方法,这个 API 在日常开发中很少使用,一般在开发组件的时候它才能派上用场,官方定义:使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象
- import toast from './index.vue'toast.install = (Vue) => { const toastConstructor = Vue.extend(toast);//使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。 let $vm = new toastConstructor();//将这个子类实例化 let $el = $vm.$mount().$el;//$vm执行$mount()手动挂载会返回一个带有$el的对象,$el就是一个dom对象 document.querySelector("body").appendChild($el);//将这个dom对象添加到body中 //在Vue原型上注入$toast方法 Vue.prototype.$toast = (option) => { $vm.show = true if (!(option instanceof Object)) { //如果传的不是对象直接弹出 $vm.message = option } else { $vm.message = option.message $vm.type = option.type } setTimeout(() => { $vm.show = false }, 2000) }}export default toast
登录后复制聚合导出:vueComponentDi/index.js
- import diButton from "./packages/button" import toast from "./packages/toast" export { diButton, toast}
登录后复制vuetest中使用toast
登录后复制
6、发布到npm
公有配置
组件开发完成需要发布到npm以便于别人使用;因为发布的是公有包,所以需要在vueComponentDi/package.json中配置
- "publishConfig": { "access": "public" },
登录后复制
完整package.json:
- { "name": "vuecomponentdi", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "eslint": "^6.7.2", "eslint-plugin-vue": "^8.2.0" }, "publishConfig": { "access": "public" }}
登录后复制发布
npm发布很简单,只需要两个命令:
- npm loginnpm publish
登录后复制
执行npm login需要你有npm账号，可以到 npm官网 注册
npm官网地址：https://www.npmjs.com/
发布完成之后就可以在任何一个vue2项目中安装使用了:
- npm install vuecomponentdi
登录后复制
git地址: vue组件开发（https://gitee.com/geeksdidi/vue-component-di）
【相关推荐：vue.js教程】
以上就是如何从0撸出一个Vue组件库并发布到npm的详细内容，更多请关注【创想鸟】其它相关文章！
