Vue3 组件和插件的用法及发布

一、组件

1. 编写组件

1、创建 components 文件夹；
2、components 文件夹下创建 HelloWorld 组件；

3、components 文件夹下创建 index.js，将所有组件封装到index.js中；

内容如下：

import HelloWorld from "./HelloWorld.vue";

export default (app) => {
  app.component("HelloWorld", HelloWorld);
}

2. main.js 中调用组件

import com from './components/index.js'
app.use(com)

3. 使用组件

直接使用即可，不需要再引入

<template>
  <div>
    <HelloWorld />
  </div>
</template>

二、插件

1. 编写插件

1、创建 plugins 文件夹；
2、plugins 文件夹下创建 components 文件夹，在里面创建 Icon 组件；
3、plugins 文件夹根目录下创建 index.js，内容如下：

import Icon from './components/Icon.vue';

const myPlugin = {
  install(app) {
    app.component('Icon', Icon);
  }
};

export default myPlugin;

2. main.js 中调用插件

import myPlugin from '../plugins'
app.use(myPlugin)

3. 使用插件

直接使用即可，不需要再引入

<template>
  <div>
    <Icon />
  </div>
</template>

三、发布到npm

发布前，先设置 npm 镜像地址为官方的 npm 地址

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

这里必须为 https 地址，http 地址依然会报错 must use TLS 1.2 or higher。
这个报错一般因为 Node 版本和 npm 版本过低导致，亲测 http 地址也会报错。

发布时常用语法

npm login(username, password, email) // 登录 npm 账号或者使用TFA认证
npm beta(npm publish --tag beta) // 发布beta版本
npm publish // 发布包
npm unpublish 包名 --force // 删除包
npm deprecate prejct-name@version '不再维护' // 声明包废弃

四、备注

1. extends 继承

Vue3 组件之间可以使用 extends 实现继承。
但 extends 是为选项式 API 设计的，不会处理 setup() 钩子的合并。

选项式 API 中可以使用 extends：

const CompA = { ... }

const CompB = {
  extends: CompA,
  ...
}

组合式 API 写法如下：

import Base from './Base.js'
export default {
  extends: Base,
}

2. TLS 报错

npm notice Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/

npm error code E426

方法1：升级 Node 版本；

方法2： 检查npm镜像地址，确认是 https 地址：https://registry.npmjs.org

方法3： 手动升级

npm install -g https://tls-test.npmjs.com/tls-test-1.0.0.tgz