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

一、调整项目结构

packages 目录，用来存放组件

examples 用作示例

二、修改配置

文件

= entry: , template: filename:

的命令，所以这里不需要再为 packages 目录配置 webpack

三、开发组件

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

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

用于导出单个组件，如果要做按需引入，也需要在这里配置

<span style="color: #008000;">//<span style="color: #008000;"> 导入组件，组件必须声明 name
import <span style="color: #800000;">Textarea from './main.vue'

<span style="color: #008000;">//<span style="color: #008000;"> 为组件添加 install 方法，用于按需引入
<span style="color: #800000;">Textarea.install = <span style="color: #0000ff;">function<span style="color: #000000;"> (<span style="color: #800000;">Vue) {
<span style="color: #800000;">Vue.component(<span style="color: #800000;">Textarea.name,<span style="color: #800000;">Textarea)
}

export default<span style="color: #800000;"> Textarea

四、整合并导出组件

文件，实现组件的全局注册

<span style="color: #008000;">//<span style="color: #008000;"> 导入单个组件
import <span style="color: #800080;">Textarea from <span style="color: #800000;">'./textarea/index'

<span style="color: #008000;">//<span style="color: #008000;"> 以数组的结构保存组件，便于遍历
<span style="color: #0000ff;">const <span style="color: #800080;">components =<span style="color: #000000;"> [
<span style="color: #800080;">Textarea
]

<span style="color: #008000;">//<span style="color: #008000;"> 定义 install 方法
<span style="color: #0000ff;">const <span style="color: #800080;">install = <span style="color: #0000ff;">function<span style="color: #000000;"> (Vue) {
<span style="color: #0000ff;">if (<span style="color: #800080;">install.installed) <span style="color: #0000ff;">return<span style="color: #800080;">
install.installed = <span style="color: #0000ff;">true
<span style="color: #008000;">//<span style="color: #008000;"> 遍历并注册全局组件
<span style="color: #800080;">components.map(<span style="color: #800080;">component =><span style="color: #000000;"> {
<span style="color: #800080;">Vue.component(<span style="color: #800080;">component.name,component)
})
}

<span style="color: #0000ff;">if (<span style="color: #0000ff;">typeof <span style="color: #800080;">window !== <span style="color: #800000;">'undefined' &&<span style="color: #000000;"><span style="color: #800080;"> window.<span style="color: #800080;">Vue) {
install(<span style="color: #800080;">window.<span style="color: #800080;">Vue)
}

export default<span style="color: #000000;"> {
<span style="color: #008000;">//<span style="color: #008000;"> 导出的对象必须具备一个 install 方法
<span style="color: #000000;"><span style="color: #800080;"> install,<span style="color: #008000;">//<span style="color: #008000;"> 组件列表
<span style="color: #000000;"> ...<span style="color: #800080;">components
}

examples/main.js 中引入该组件

from .use()

五、打包组件

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

name: 输出文件名

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

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

lib 命令

:

npm run lib 命令，编译组件

六、准备发布

package.json 添加组件信息

name:

version: 版本号，不能和历史版本号相同；

description:

main:

keyword：

author：

private：

license：

.npmignore 文件，设置忽略文件

////**<span style="color: #008000;"># local env files
.env.local
.env.*<span style="color: #000000;">.local

<span style="color: #008000;"># Log files
npm-debug.log<span style="color: #000000;">
yarn-debug.log<span style="color: #000000;">
yarn-error.log*<span style="color: #000000;"><span style="color: #008000;">

Editor directories and files

.idea
.vscode
<span style="color: #000000;">.suo
.ntvs
<span style="color: #000000;">.njsproj
<span style="color: #000000;">.sln
.sw*

七、发布到 npm

npm adduser 命令创建一个账户，或者到 注册

npm login 命令登录

翻译中文）

在发布之前，一定要确保组件已经编译完毕，而且 中的入口文件（main）的路径正确

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。