干货转载——https://www.cnblogs.com/wisewrong/archive/2018/12/28/10186611.html

全是知识点呐

赶紧记下来啊

一、调整项目结构

首先用 vue-cli 创建一个 default 项目

// 顺便安利一篇文章《Vue 爬坑之路(十二)—— vue-cli 3.x 搭建项目》

当前的项目目录是这样的:

首先需要创建一个 packages 目录,用来存放组件

然后将 src 目录改为 examples 用作示例

二、修改配置

启动项目的时候,默认入口文件是 src/main.js

将 src 目录改为 examples 之后,就需要重新配置入口文件

在根目录下创建一个 vue.config.js 文件

// vue.config.js

module.exports = {
// 将 examples 目录添加为新的页面
pages: {
index: {
// page 的入口
entry: 'examples/main.js',
// 模板来源
template: 'public/index.html',
// 输出文件名
filename: 'index.html'
}
}
}

完成这一步之后就可以正常启动项目了

vue-cli 3.x  提供了构建库的命令,所以这里不需要再为 packages 目录配置 webpack

三、开发组件

之前已经创建了一个 packages 目录,用来存放组件

该目录下存放每个组件单独的开发目录,和一个 index.js 整合所有组件,并对外导出

每个组件都应该归类于单独的目录下,包含其组件源码目录 src,和 index.js 便于外部引用

这里以 textarea 组件为例,完整的 packages 目录结构如下:

textarea/src/main.vue 是组件的开发文件,具体代码这里就不展示了

需要注意的是,组件必须声明 name,这个 name 就是组件的标签

textarea/index.js 用于导出单个组件,如果要做按需引入,也需要在这里配置

// packages/textarea/index.js

// 导入组件,组件必须声明 name
import Textarea from './src/main.vue' // 为组件添加 install 方法,用于按需引入
Textarea.install = function (Vue) {
Vue.component(Textarea.name, Textarea)
} export default Textarea

四、整合并导出组件

编辑 packages/index.js 文件,实现组件的全局注册

// packages / index.js

// 导入单个组件
import Textarea from './textarea/index' // 以数组的结构保存组件,便于遍历
const components = [
Textarea
] // 定义 install 方法
const install = function (Vue) {
if (install.installed) return
install.installed = true
// 遍历并注册全局组件
components.map(component => {
Vue.component(component.name, component)
})
} if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
} export default {
// 导出的对象必须具备一个 install 方法
install,
// 组件列表
...components
}

到这里组件就已经开发完毕

可以在 examples/main.js 中引入该组件

import TagTextarea from '../packages/index'
Vue.use(TagTextarea)

然后就能直接使用刚才开发的 textarea 组件

组件的标签就是组件内定义的的 name

这时候可以 npm run serve 启动项目,测试一下组件是否有 bug

// 启动前需要确保已经在 vue.config.js 中添加了新入口 examples/main.js

五、打包组件

vue-cli 3.x 提供了一个库文件打包命令

主要需要四个参数:

1. target: 默认为构建应用,改为 lib 即可启用构建库模式

2. name: 输出文件名

3. dest: 输出目录,默认为 dist,这里我们改为 lib

4. entry: 入口文件路径,默认为 src/App.vue,这里改为 packages/index.js

基于此,在 package.json 里的 scripts 添加一个 lib 命令

// pageage.json

{
"scripts": {
"lib": "vue-cli-service build --target lib --name tag-textarea --dest lib packages/index.js"
}
}

然后执行 npm run lib 命令,编译组件

六、准备发布

首先需要在 package.json 添加组件信息

name: 包名,该名不能和已有的名称冲突;

version: 版本号,不能和历史版本号相同;

description: 简介;

main: 入口文件,应指向编译后的包文件;

keyword:关键字,以空格分割;

author:作者;

private:是否私有,需要修改为 false 才能发布到 npm;

license:开源协议。

然后创建 .npmignore 文件,设置忽略文件

该文件的语法和 .gitignore 的语法一样,设置发布到 npm 时忽略哪些目录或文件

.DS_Store
node_modules/
examples/
packages/
public/
vue.config.js
babel.config.js
*.map
*.html # local env files
.env.local
.env.*.local # Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log* # Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

七、发布到 npm

如果以前改过 npm 的镜像地址,比如使用了淘宝镜像,就先改回来

npm config set registry http://registry.npmjs.org 

如果没有 npm 账户,可以通过 npm adduser 命令创建一个账户,或者到 npm 官网注册

如果在官网注册的账户,或者以前就有账户,就使用 npm login 命令登录

具体流程可以参考官方文档(谷歌浏览器->翻译中文)

在发布之前,一定要确保组件已经编译完毕,而且 package.json 中的入口文件(main)的路径正确

一切就绪,发布组件:

npm publish

emmmmmm....

到这里就该结束了

vue-cli 3.x 自定义插件并发布到 npm的更多相关文章

  1. vue封装第三方插件并发布到npm

    前言 写此文前特意google了一下,因为有较详细的开发教程我再写意义不大,有把插件封装成组件的教程,有把自己的组件封住成插件的教程,本文主要说明如何把第三方的插件封装成vue插件,简化配置,一键安装 ...

  2. vue封装插件并发布到npm上

    vue封装插件并发布到npm上 项目初始化 首先,要创建项目,封装vue的插件用webpack-simple很合适,vue init webpack-simple 项目名称此命令创建我们的项目的目录, ...

  3. 开发vue插件并发布到npm包管理工具的流程

    1-10是开发流程,后面的是发布流程 1. 在Git里面…新建项目   2. 克隆项目到本地用来开发 git clone https://github.com/***/vue-prevent-brow ...

  4. vue-cli 3.x 开发插件并发布到 npm

    为了摆脱咸鱼的身份,我给自己定了一个开源项目的目标 于是抽空写了一个 textarea,打算发布到 npm 的时候却遇到了问题 之前用 vue-cli 2.x 的时候,打包配置项非常透明,可以很容易的 ...

  5. 80行代码教你写一个Webpack插件并发布到npm

    1. 前言 最近在学习 Webpack 相关的原理,以前只知道 Webpack 的配置方法,但并不知道其内部流程,经过一轮的学习,感觉获益良多,为了巩固学习的内容,我决定尝试自己动手写一个插件. 这个 ...

  6. [Vue CLI 3] 配置 webpack-bundle-analyzer 插件

    首先还是简单介绍一下 webpack-bundle-analyzer 是做什么的: Visualize size of webpack output files with an interactive ...

  7. Vue CLI 3 如何自定义 js 的文件名

    参考链接:https://blog.csdn.net/weixin_33979363/article/details/88742342

  8. 关于vue cli 使用iview 自定义主题遇到的坑

    定制主题,这里讲变量覆盖 当你老老实实的把上面文档中的代码一一复制粘贴到项目文件中时,发现了还没装less,所以你就 npm install less –savenpm install less-lo ...

  9. 封装插件并发布到npm的历程

    1.封装插件 2.使用webpack打包的时候发生了很多问题 3.过程很反复 4.但最终还是发布成功了

随机推荐

  1. 算法与数据结构基础 - 图(Graph)

    图基础 图(Graph)应用广泛,程序中可用邻接表和邻接矩阵表示图.依据不同维度,图可以分为有向图/无向图.有权图/无权图.连通图/非连通图.循环图/非循环图,有向图中的顶点具有入度/出度的概念. 面 ...

  2. 松软科技课堂:sql函数-AVG

    定义和用法 AVG 函数返回数值列的平均值.NULL 值不包括在计算中. SQL AVG() 语法 SELECT AVG(column_name) FROM table_name SQL AVG() ...

  3. jsp作用域总结

    我们在定义每一个变量,每一个属性的时候,都会考虑这个变量.属性的作用范围,也就是作用域. JSP的四大作用域 作用域对象 作用域范围 page 只在当前页面有效 request 一次请求的生命周期内有 ...

  4. EF指定更新字段

    使用EF做更新时,若没有进行跟踪会默认全字段更新,那怎么做到只更新我们想要更新的字段呢? /// <summary> /// 修改指定属性的单条数据 /// </summary> ...

  5. 【linux】【jdk】jdk8.0安装

    系统环境:Centos7 一.下载jdk8.0 jdk官方网站:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downlo ...

  6. FPGA 开发详细流程你了解吗?

    FPGA 的详细开发流程就是利用 EDA 开发工具对 FPGA 芯片进行开发的过程. FPGA 的详细开发流程如下所示,主要包括电路设计.设计输入.综合(优化).布局布线(实现与优化).编程配置五大步 ...

  7. Android组件化路由实践

    Android应用组件化各个组件页面之间要实现跳转使用路由是一个很好的选择.本文将实现一个比较轻量级的路由组件,主要涉及以下知识: Annotation (声明路由目标信息) AnnotationPr ...

  8. Angular 表单嵌套、动态表单

    说明: 组件使用了ng-zorro (https://ng.ant.design/docs/introduce/zh) 第一类:嵌套表单 1. 静态表单嵌套 demo.component.html & ...

  9. P3515 [POI2011]Lightning Conductor

    首先进行一步转化 $a_j \leq a_i + q - sqrt(abs(i - j))$ $a_i + q \geq a_j + sqrt(abs(i-j))$ 即 $q = max (a_j + ...

  10. VR应用评测 - Google Spotlight Story: Sonaria

    Google Spotlight Story: Sonaria 一个5min左右的VR小电影,坐姿观看,但是用户其实可以移动+旋转视角.画面很抽象,所有的物体都由基本的单色几何形状组成,主角是两个一公 ...