vue组件库开发（npm包发布）

公共组件主要解决了多个应用直接组件的公用问题。
这里使用npm构建我们的组件库。

最终目录

使用vue-cli 搭建一个项目

vue create pubilc-compenent

将生成的项目的src文件夹改成examples (组件示例)

新建vue配置文件，更改入口地址，确保改名后的examples能运行。

新建packages文件夹，存放我们的组件

编写第一个组件,参考element-ui结构

datePicker.vue

<template><div>这是一个datePicker组件</div>
</template><script>
export default {name:'datePicker'
}
</script><style></style>

datePicker/index.js

import datePicker from './src/datePicker.vue'
datePicker.install = function(Vue){Vue.component(datePicker.name,datePicker)
}
export default datePicker

packages/index.js

import datePicker from './datePicker'const components = [datePicker
]const install = function(Vue){components.forEach(component => {Vue.component(component.name,component)});
}/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {install(window.Vue);
}export default {install,datePicker
}

配置vue.config.js

配置打包lib命令

package.json
使用lib(库模式)

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","lib": "vue-cli-service build --target lib --name datePicterqiu --dest lib packages/index.js"},

配置包的一些信息

发布npm

注册npm账号并验证邮箱

登录npm

npm login

输入对应的username、password、邮箱

###### 向npm推送
npm publish

结束。

这样我们就可以在其他应用像使用其他npm上的组件插件一样拉取我们的组件了

vue组件库开发（npm包发布）相关推荐

京东Vue组件库NutUI 2.0发布：将支持跨平台！
NutUI 是一套来自京东用户体验设计部(JDC)前端开发部的移动端 Vue 组件库,NutUI 1.0 版本于 2018 年发布.据不完全统计,目前在京东至少有30多个 web 项目正在使用 Nut ...
vue 组件库发布_如何创建和发布Vue组件库
vue 组件库发布 Component libraries are all the rage these days. They make it easy to maintain a consisten ...
vue插件开发、文档书写、github发布、npm包发布一波流
做vue开发,基本的操作会了之后是不是特想撸一撸vue的插件,让自己的代码可(骚)复(骚)用(的).别急,今天和你一起手摸手,哦呸,是手把手,一起撸一管,哦再呸,是封装一个基于vue的支付宝密码弹窗插 ...
前端组件库(Element UI)的实现原理：教你如何实现自定义组件库，并打包发布至npm
前端组件库实现原理前言 Demo地址一. 组件库开发流程 1)新建vue项目: 2)编写自定义组件,封装成插件: 3)修改配置项 webpack.config.js: pakage.json: 4 ...
Vant 1.0 发布：轻量、可靠的移动端 Vue 组件库
Vant 是有赞前端团队维护的移动端 Vue 组件库,提供了一整套 UI 基础组件和业务组件.通过 Vant 可以快速搭建出风格统一的页面,提升开发效率. Vant 一.关于 1.0 距离 Vant ...
Vuejs 使用 lib 库模式打包 umd 解决 NPM 包发布的问题
Vuejs 使用 lib 库模式打包 umd 解决 NPM 包发布的问题参考文章: (1)Vuejs 使用 lib 库模式打包 umd 解决 NPM 包发布的问题 (2)https://www.cn ...
少女风vue组件库制作全攻略~~
预览组件库官网 github地址如果喜欢各位小哥哥小姐姐给个小星星鼓励一下哈, 请勿在生产环境中使用,供学习&交流~~ 完整项目目录结构 git clone到本地安装依赖后,执行npm r ...
浅尝 | 从 0 到 1 Vue 组件库封装
写在前面对于目前框架为王的时代,前端可能很大一部分时间,都是在开发相关的页面组件,而有句话说得好,没有哪个前端不想拥有一个属于自己的,为自己量身定制的组件库,那么本文就为大家整理一下: 如何从 0 ...
vue组件库介绍以及组件库Element UI 的使用
组件库前言这篇文章介绍vue组件库! 介绍什么是组件库以及Element UI组件库的使用! 看完不会你打我.哈哈哈,开玩笑的,不多说,上刺刀!! 1. 什么是 vue 组件库在实际开发中,前端 ...
如何从0开始搭建Vue组件库
前言: 组件设计是通过对功能及视觉表达中元素的拆解.归纳.重组,并基于可被复用的目的,形成规范化的组件,通过多维度组合来构建整个设计方案,將这些组件整理在一起,便形成组件库.本文我们主要讲述基于 Va ...

vue组件库开发（npm包发布）

最终目录

使用vue-cli 搭建一个项目

将生成的项目的src文件夹改成examples (组件示例)

新建vue配置文件，更改入口地址，确保改名后的examples能运行。

新建packages文件夹，存放我们的组件

datePicker.vue

datePicker/index.js

packages/index.js

配置vue.config.js

配置打包lib命令

配置包的一些信息

发布npm

vue组件库开发（npm包发布）相关推荐

最新文章

热门文章