自定义Vue组件打包、发布到npm及使用教程


Posted in Javascript onMay 22, 2019

本文将帮助:将自己写的Vue组件打包到npm进行代码托管,以及正常发布之后如何使用自己的组件。

本文讲述的仅仅是最基础的实现,其他复杂的操作需要非常熟悉webpack的相关知识,作者将继续学习。

按照大佬文中写的一步步操作,够细心的话基本可以一步到位。下面总结一下发布步骤:

1. 利用Vue的脚手架新建一个简易版的Vue项目my-project:

vue init webpack-simple my-project -> cd my-project -> npm i -> npm run dev

2. 编写组件:

src下新建myPlugin文件夹用于存放所以开发的组件 -> 为每一个组件创建一个文件夹,其中存放一个vue组件文件和一个index.js配置文件 -> 在myPlugin下的最外层创建一个入口配置文件 -> 为每个人vue组件文件中加上一个name属性

3. 测试组件:

在app.vue中测试一下自己的组件可不可以用

4. 编写配置文件

为刚刚加入的每个组件文件夹中的index.js放入如下代码:(其中ldcPagination为组件名)

import ldcPagination from './index.vue';
ldcPagination.install = Vue => Vue.component(ldcPagination.name, ldcPagination);//.name就是开始说的vue文件暴露出来的name名,ldcPagination整个组件
export default ldcPagination;

为myPlugin下index.js放入如下代码:(其中ldcPagination为组件名,多个组件直接在components数组中加入并在最后输出出来就行)(引入的公共样式文件等都可以放这个文件中)

import ldcPagination from './Pagination/index.js';
const components = [
 ldcPagination
]
const install = function(Vue, opts = {}) {
 components.forEach(component => {
  Vue.component(component.name, component);
 });
}
if (typeof window !== 'undefined' && window.Vue) {
 install(window.Vue);
}
export default {
 install,
 ldcPagination
}

5. 改写webpack.config.js配置文件

将其中的输入输出换成如下代码:

var path = require('path')
var webpack = require('webpack')
const NODE_ENV = process.env.NODE_ENV;
module.exports = {
//entry: './src/main.js',
//output: {
//  path: path.resolve(__dirname, './dist'),
//  publicPath: '/dist/',
//  filename: 'build.js'
// },
  entry: NODE_ENV == 'development' ? './src/main.js' : './src/myPlugin/index.js',
  output: {
   path: path.resolve(__dirname, './dist'),
   publicPath: '/dist/',//路径
   filename: 'ldc-ui.js',//打包之后的名称
   library: 'ldc-ui', // 指定的就是你使用require时的模块名
   libraryTarget: 'umd', // 指定输出格式
   umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },
...
}

6. 发布前准备

改写package.json中的private为false,加入"main": "dist/ldc-ui.js", 其他的自定义 -> 新建.npmignore文件忽略不需要上传的文件如.* *.md *.yml build/ node_modules/ src/ test/

7. 发布

npm run build 打包 -> 注册npm账号 -> npm login 登录 -> npm publish 发布

可能出现问题:

1. 登录源错误, npm config get registry 可查看当前登录源,npm config set registry=http://registry.npmjs.org 可切换到正确的登录源

2. 版本号不能重复

3. 图片资源打包后无法使用,所以自己的组件中不要使用

使用组件方式:

1. npm i xxx -D

2. import XXX from 'xxx'

3. const { A, B } = XXX

4. 在Vue中注册 components: { A, B }

总结

以上所述是小编给大家介绍的自定义Vue组件打包、发布到npm及使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
ext for eclipse插件安装方法
Apr 27 Javascript
javascript radio 联动效果
Mar 04 Javascript
javascript延时加载之defer测试
Dec 28 Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 Javascript
AngularJS基础知识笔记之表格
May 10 Javascript
js如何打印object对象
Oct 16 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
js实现符合国情的日期插件详解
Jan 19 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
详解vue axios二次封装
Jul 22 Javascript
Vue程序调试的方法
Jun 17 Javascript
详解React的回调渲染模式
Sep 10 Javascript
Vue中的组件及路由使用实例代码详解
May 22 #Javascript
Vue侦测相关api的实现方法
May 22 #Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 #Javascript
微信小程序系列之自定义顶部导航功能
May 21 #Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 #Javascript
微信小程序websocket实现即时聊天功能
May 21 #Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 #Javascript
You might like
浅谈php处理后端&接口访问超时的解决方法
2016/10/29 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
关于this和self的使用说明
2010/08/01 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
Python中使用HTMLParser解析html实例
2015/02/08 Python
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
Python列表切片常用操作实例解析
2020/03/10 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
计算机专业个人求职信范例
2013/09/23 职场文书
语文教育专业推荐信范文
2013/11/25 职场文书
写给导师的自荐信
2015/03/06 职场文书
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python
Java8中接口的新特性使用指南
2021/11/01 Java/Android
tomcat下部署jenkins的方法
2022/05/06 Servers