干货转载——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. DirectX12 3D 游戏开发与实战第四章内容(下)

    Direct3D的初始化(下) 学习目标 了解Direct3D在3D编程中相对于硬件所扮演的角色 理解组件对象模型COM在Direct3D中的作用 掌握基础的图像学概念,例如2D图像的存储方式,页面翻 ...

  2. ogeek线下赛web分析1-python-web

    1.python from flask import Flask, request, render_template,send_from_directory, make_response from A ...

  3. [VB.NET Tips]再谈字符串连接之内置池

    CLR自动维护一个称为"内置池"(暂存池)(intern pool)的表,在编译时此表包含程序中声明的每个唯一的字符串常量的单个实例,以及以编程方式创建的String类的任何唯一实 ...

  4. Hadoop 之 深入探索MapReduce

    1.MapReduce基础概念 答:MapReduce作业时一种大规模数据的并行计算的便程模型.我们可以将HDFS中存储的海量数据,通过MapReduce作业进行计算,得到目标数据. 2.MapRed ...

  5. ASP.NET Core 3.0 : 二十四. 配置的Options模式

    上一章讲到了配置的用法及内部处理机制,对于配置,ASP.NET Core还提供了一种Options模式.(ASP.NET Core 系列目录) 一.Options的使用 上一章有个配置的绑定的例子,可 ...

  6. CDH 5.9.3 集群配置

    -----------------------------------------集群规划------------------------------------------ hostname ip ...

  7. Spring Boot(三) 使用Lombok

        C#写的多了用习惯了众多的语法糖,再写起来Java总会有一些非常不舒服的地方.比如用惯了C#的属性在用起来Java的属性,写起来就会感觉不够优雅.如:定义一个Person类 public cl ...

  8. 使用servlet+jdbc+MD5实现用户加密登录

    /** * 分析流程: * 1.前端页面提交登录请求 * 2.被web.xml拦截,进入到LoginServlet(有两种方式:方式一,在web.xml文件中配置servlet拦截器;方式二,不用在w ...

  9. Linux 常用解压和压缩命令

    .tar 解包 tar xvf filename.tar.tar 打包 tar cvf filename.tar dirname.gz 解压1 gunzip filename.gz.gz 解压2 gz ...

  10. mysql 对返回字段进行拼接

    使用concat函数进行拼接:示例如下: select id,username,concat( id, '-' , username) as idName from user;