npm注册，vue3上传自定义组件及注意事项

admin管理员组

文章数量:1529452

1，注册前更换镜像地址

先查看是否是npm的镜像地址

npm config get registry

如果不是http://registry.npmjs/则需要更换

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

2，开始注册

有两种方式注册：

1）官网注册

https://www.npmjs/

2）命令注册

创建用户，输入用户名，密码，邮箱即可注册，注意邮箱最好为qq邮箱

npm adduser

登录，同样输入用户名，密码，邮箱即可登录

npm login

3，上传组件

npm public

注意可能会报错，因为注册完用户需要进入邮箱验证后才能上传，错误如下：

4，上传前的步骤

vue3的项目结构如下：

1）添加配置文件vue.config.js修改配置，因为vue3是全局配置文件，因此需要手动添加vue.config.js

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/main.js',
      // 模板来源
      template: 'public/index.html',
      // 输出文件名
      filename: 'index.html'
    }
  }
}

2）注册组件，在components文件夹中存放自己的组件，并写一个index.js导出该文件夹下所有组件，index.js的内容如下：

// hmvideo 插件对应组件的名字
import myvideo from './myvideo.vue';

// 为Vue.js 的插件添加一个公开的方法install，这个方法用来实现以后的组件引入和注册
// 它一般可以有两个参数，特别需要注意的是：第一个参数是 Vue 构造器
// 此处注意，组件需要添加name属性，代表注册的组件名称,名称可以自定义
myvideo.install = (Vue) => Vue.component('myvideo', myvideo); //注册组件

//下面的代码的作用是：支持使用标签的方式引入，当Vue是全局变量时，自动install
if (typeof window !== 'undefined' && window.Vue) {
    myvideo.install(window.Vue);
}

export default myvideo

4）打包组件
package.json 里的 scripts 添加一个 lib 命令

{
  "scripts": {
    "lib": "vue-cli-service build --target lib --name ysl-input --dest lib src/components/index.js"
  }
}

编译组件，执行 npm run lib 命令，编译组件

npm run lib

5）准备发布
package.json 文件中添加组件信息如下：

name: 包名，该名不能和已有的名称冲突；
version: 版本号，不能和历史版本号相同；
description: 简介；
main: 入口文件，应指向编译后的包文件；
author：作者；
private：是否私有，需要修改为 false 才能发布到 npm；
license：开源协议。

{
  "name": "wzm-myvideo",
  "version": "0.1.0",
  "description": "Custom video component written by Wang Zhiming",
  "main": "lib/ysl-input.umd.js",
  "private": false,
  "license": "MIT",
  "author": "wzm",
}

6）创建 .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*

7）修改镜像地址，如果现在的地址是淘宝镜像地址，那么先改回来，发布完之后再改回去即可

改为npm镜像地址

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

改为淘宝镜像地址

npm config set registry https://registry.npm.taobao/

8）发布组件，上传后的组件都能够在npm官网中看到

npm publish

9）删除上传的组件

// 删除刚刚上传的包
npm unpublish
如果上述代码不能删除，则添加 --force
npm --force unpublish

本文标签： 自定义组件注意事项上传npm