创建 vue 组件

1、创建vue项目,为了简洁方便,推荐使用webpack-simple构建一个项目

vue init webpack-simple your-project

2、在 src 目录下新建子目录lib,用来放后面自己写的所有组件

3、编写自己的组件

首先新建一个vue文件和一个index.js

vue用于编写组件的模版和逻辑,像平时封装插件一样

ps:需要给组件命名 name: xxx,用于后面的导出

具体如下:

index.js 作用是将该组件作为 Vue 插件,注册到 Vue 中

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

4、最后集中管理,全部导出,可同时编写多个组件组成组件库,一起导出

App.vue同级目录我新建了一个index.js文件

// 导入所有组件
import xTable from './table/index.js'
import xTableCol from './table-column/index.js' const components = [xTable, xTableCol, hello]
const install = function(vue) {
/* istanbul ignore if */
if (install.installed) return;
/*eslint-disable*/
components.map((component) => {
vue.component(component.name, component); //component.name 此处使用到组件vue文件中的 name 属性
});
};
/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}; export default {
install,
xTable,
xTableCol
}

ps:如果是单个组件也可以不用编写第3中的与组件vue文件同级的index.js,直接在这里import引入,然后导出

5、修改配置文件

打包之前,首先我们需要改一下 webpack.config.js 这个文件

// ... 此处省略代码
// 执行环境
const NODE_ENV = process.env.NODE_ENV module.exports = {
// 改变入口
entry: './src/lib/index.js',
output: {
// 修改打包出口,在最外级目录打包出一个 index.js 文件,我们 import 默认会指向这个文件
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: "x-vue-element-table.min.js",
library: "xEleTable", // 指定的就是你使用require时的模块名
libraryTarget: 'umd', // libraryTarget会生成不同umd的代码,可以只是commonjs标准的,也可以是指amd标准的,也可以只是通过script标签引入的
umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
},
// ... 此处省略代码
}

修改 package.json 文件(主要):

// ... 此处省略代码
// 发布开源因此需要将这个字段改为 false
"private": false,
// 这个指 import xEleTable 的时候它会去检索的路径
"main": "dist/vue-element-table.min.js",
// ... 此处省略代码

还有其他可配置项(非必须)

"bugs": {
"url": "https://github.com/xxx/xxx/issues"
},
"repository": {
"type": "git",
"url": "git@https://github.com/xxx/xxx.git"
},

5、测试,测试这些配置是否OK以及组件是否能够正常运行

首先通过命令npm run build打包,打包完成后产生dist文件,这个打包之后的文件的文件名是在webpack.config.js

接着执行命令npm pack,会产生一个压缩包,在与webpack.config.js同一级目录

然后可以本地新建一项目测试是否可用

在测试项目中,通过npm install 组件项目打包后的本地绝对路径/文件全名添加依赖

在main.js入口文件引入即可

import 名称 from ‘组件库名’
Vue.use(名称);

具体可参考

import xEleTable from 'x-vue-element-table'
Vue.use(xEleTable)

然后在项目的任意组件中引用就行了,如果引入成功,则说明打包成功,然后在发布

发布到 npm

准备工作OK,现在开始正式发布

//首先去npm官网注册一个npm账号
npm login // 登陆你的用户,密码
npm publish // 进行发布

在这个过程中,可能会出些问题

如果遇到以下这个错误

npm ERR! You do not have permission to publish "nodenpm". Are you logged in as the correct user? : nodenpm

【原因】可能是自己的组件名与npm中已有的组件名冲突,需要换成另一个还未被使用过的

另外提供几个常见错误解决方案(来自网络,有些自己遇到过~)

npm adduser报错Unable to authenticate?

npm publish项目报错

ps:遇到其他具体问题可自行百度解决~

具体源码:x-vue-element-table源码

ps:本文首发于我的segmentfault npm 发布 vue 组件

参考:

https://blog.csdn.net/qq_40513881/article/details/82494958

https://juejin.im/post/5b45df255188251b1d474860

https://blog.csdn.net/cscscssjsp/article/details/82501745

https://blog.suzper.com/2017/10/13/发布自己的vue组件库/

npm 发布 vue 组件的更多相关文章

  1. npm发布vue组件流程

    初始化项目vue init webpack-simple XXX 定义组件略 发布配置1.package.json 2.webpack.config.js(注释部分为原配置) 发布1.登录 2.发布n ...

  2. 从零开始开发一个vue组件打包并发布到npm (把vue组件打包成一个可以直接引用的js文件)

    自己写的组件 有的也挺好的,为了方便以后用自己再用或者给别人用,把组件打包发布到npm是最好不过了,本次打包支持 支持正常的组件调用方式,也支持Vue.use, 也可以直接引用打包好的js文件, 配合 ...

  3. 手把手教你封装 Vue 组件并使用 NPM 发布

    Vue 开发插件 我们可以先查看Vue的插件的开发规范 我们开发的之后期望的结果是支持 import.require 或者直接使用 script 标签的形式引入,就像这样: ps: 这里注意一下包的名 ...

  4. 手把手教你封装 Vue 组件,并使用 npm 发布

    Vue 开发插件 开发之前先看看官网的 开发规范 我们开发的之后期望的结果是支持 import.require 或者直接使用 script 标签的形式引入,就像这样: // 这里注意一下包的名字前缀是 ...

  5. 将 Vue 组件库发布到 npm

    制作了一套自己的组件库,并发布到npm上,项目代码见 GitHub . 前期准备 有一个npm账号 安装了vue-cli 搭建项目 vue init webpack hg-vcomponents cd ...

  6. 基于vue组件,发布npm包

    亲测好用,如出错,请留言 1.项目初始化 使用vue脚手架创建,但vuecli太重,我们使用简单的工程脚手架进行处理,输入命令 vue init webpack-simple my-project n ...

  7. 自定义Vue组件打包、发布到npm以及使用

    本文将帮助:将自己写的Vue组件打包到npm进行代码托管,以及正常发布之后如何使用自己的组件. 本文讲述的仅仅是最基础的实现,其他复杂的操作需要非常熟悉webpack的相关知识,作者将继续学习. 先附 ...

  8. vue cli4构建基于typescript的vue组件并发布到npm

    基于vue cli创建一个vue项目 首先安装最新的vue cli脚手架, npm install --global @vue/cli npm WARN optional SKIPPING OPTIO ...

  9. 如何从0开发一个Vue组件库并发布到npm

    1.新建文件夹在终端打开执行 npm init -y 生成package.json如下,注意如果要发布到npm,name不能有下划线,大写字母等 { "name": "v ...

随机推荐

  1. wpf的控件style

    前段时间一直在做wpf的UI开发,每次想做些控件style定制的时候都很头疼 很多控件不知道他的controltemplate是什么样的 为了方便大家写style 特别奉上wpf的style大全 从此 ...

  2. enumerable 可枚举 属性

    一个对象的可枚举属性会在for...in中被访问到 (或是类似的迭代方法, Object.keys() 如果一个属性不是可枚举的,循环会忽略这个属性 var obj = { key: 'val' }; ...

  3. Linux常用命令:修改文件权限chmod 754/744

    常用命令:chmod 777  文件或目录 chmod  777 /etc/squid 运行命令后,squid文件夹(目录)的权限就被修改为777(可读可写可执行). Linux系统中,每个用户的角色 ...

  4. Python学习之==>面向对象编程(二)

    一.类的特殊成员 我们在Python学习之==>面向对象编程(一)中已经介绍过了构造方法和析构方法,构造方法是在实例化时自动执行的方法,而析构方法是在实例被销毁的时候被执行,Python类成员中 ...

  5. Python 解决八皇后问题

    问题介绍 八皇后问题是一个以国际象棋为背景的问题:如何能够在 \(8\times8\) 的国际象棋棋盘上放置八个皇后,使得任何一个皇后都无法直接吃掉其他的皇后?为了达到此目的,任两个皇后都不能处于同一 ...

  6. Kibana 5.5.2 安装包下载 (各种历史版本下载)

    背景说明 最近项目中在使用 5.5.2 版本的  Elasticsearch 作为数据库,使用的是以前的老版本. 用到 Elasticsearch ,难免要和其相关基本操作命令打交道.选择一款顺手的工 ...

  7. C#学习笔记一(概念,对象与类型,继承)

    一.基础 1.CLR为公共语言运行库,类似于JVM 2..NET Framwork是一个独立发布的程序包,其包含了CLR,类库及相关的语言编辑器等工具,类似于JDK,除了C#,还有其他几种语言在CLR ...

  8. ugui多层解决方案

    创建不同的相机图层以渲染事物(最佳实践解决方案) 链接:https://answers.unity.com/questions/1169898/hi-guys-i-need-some-help-wit ...

  9. Autumn is deep, alas! I stand on the grass in the shadow of the evergreen trees.

    essence. n. 本质 flush.n. 脸红 v. 刷洗 initiate.v.开始 intrinsic.固执的 mainfest.a.显然的 intuition.n.直觉上的 refrain ...

  10. 【Qt开发】Win7 64位qt-windows-x86-msvc2015-5.6.0 DLL依赖库打包

    Win7 64位qt-windows-x86-msvc2015-5.6.0 DLL依赖库打包 今天开始系统的学习QT,第一个测试的问题就是在纯净的系统中如何正常运行,也就是找出QT生成的exe的依赖库 ...