开发vue3 UI组件库，并且发布到NPM

目录

1.创建vue3工程

2.创建package文件 

3.编写组件，并且导出

4.编写package.json

5.npm账号注册登录并发布

6.从npm安装使用

7.注意事项

1.创建vue3工程

（1）初始化Vue项目

cnpm create vite

（2）进入文件夹安装依赖

cnpm i

（3）运行项目

npm run serve

2.创建package文件 

 在根目录创建package文件夹,按照下面的目录结构创建components文件夹用来存放组件

3.编写组件，并且导出

（1）这里我们就以button组件为例，任意编写一点代码，代码如下：

<template>
  <div>
    <button>我是测试按钮</button>
  </div&gt;
</template>
<script setup name="create-button">
    //上面的name="create-button"是组件名必须填写，他决定了在其他项目中引入此组件的名称
</script>
<style scoped>
button {
  width: 100px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
</style>

组件编写完毕，可以在App.vue里引入编写的组件来测试一下，我这里就不展示了

（2）下面编写同文件夹下的index.js文件,这个文件的作用主要是用来单独导出某一个组件使用的,比如将来在一个项目里只需要引入一个button组件

import createButton from './index.vue';
createButton.install = (app) => {
  app.component(createButton.name, createButton)
  return app
}

export default createButton

（3）下面再编写与components文件夹同级的index.js文件

import createButton from "./components/button/index.vue";//导入写好的组件
const components = [createButton]//所有的组件都放这个数组里
const install = (app) => {
  for (const item of components) {
    app.component(item.name, item)//批量注册组件
  }
  return app
}
export default { install }//如果有方法函数也可以在这里导出

4.编写package.json

在package文件夹下创建package.json文件并编写 create-ui是我随便写的名字

{
  "name": "create-ui",
  "version": "0.0.1",
  "description": "测试组件库",
  "author": {
    "name": "you name",
    "email": "you email"
  },
  "private": false,
  "publishConfig": {
    "access": "public",
    "registry": "https://registry.npmjs.org/"
  },
  "dependencies": {
    "vue": "^3.3.4",
    "element-plus": "^2.4.2",
    "axios": "0.24.0"
  }
}

1. name: 项目的名称，这是在 npm 上注册和发布你的包时使用的唯一标识符。

2. version: 项目的当前版本号。遵循语义化版本规范（Semantic Versioning），格式为主版本号.次版本号.修订号。

3. description: 对项目的简要描述，用于展示给用户或其他开发者。

4. author: 项目的作者信息，包括姓名和电子邮件地址。

5. private: 一个布尔值，指示该包是否被视为私有包。如果设置为 true，则不能通过 npm publish 发布它。

6. publishConfig: 这个字段用于配置发布时的一些参数，比如 access 用于指定包的访问级别，registry 用于指定包发布到的注册表地址。

7. dependencies: 项目的依赖项列表。这里列出了项目所依赖的各种 npm 包以及它们的版本范围。

每个字段在 package.json 文件中都扮演着重要的角色，它们用于描述项目的基本信息、依赖关系以及发布配置等。这些信息对于 Node.js 项目的管理和发布至关重要。

除了上述列出的字段，package.json 文件还包含其他常用字段，例如：

1. "repository"：指定了项目的代码存储位置，可以是一个 URL 或者一个包含 type 和 url 属性的对象。

2. "keywords"：描述了包的关键词，有助于其他开发者在 npm 上搜索到这个包。

3. "license"：指定了项目所采用的许可证类型。

4. "scripts"：包含了一系列可执行脚本的键值对。例如，可以定义 start、test 等脚本命令，以便在命令行中运行。

5. "devDependencies"：类似于 "dependencies" 字段，用于列出开发过程中需要用到的依赖包。

6. "main"：指定了包的入口文件，即当用户 require 包时的入口文件。

7. "engines"：指定了项目的运行环境要求，比如 Node.js 的版本范围等。

8. "peerDependencies"：声明了该包所需的对等依赖关系。这些依赖关系是指包与当前包一起使用的其他包。

9. "browserslist"：用于指定项目的目标浏览器和 Node.js 版本，以便在构建过程中进行相应的兼容性处理。

这些字段可以根据项目的需要进行添加和配置，以便更好地描述和管理项目的相关信息和依赖关系。

5.npm账号注册登录并发布

（1）注册账号

想要发布到npm仓库，就必须要有一个账号，先去npm官网npm | Home (npmjs.com)注册一个账号，注意记住用户名、密码和邮箱，发布的时候可能会用到。

（2）添加npm用户

添加npm用户，执行命令：

npm adduser

这里会让你填写用户名等等，如果之前设置过即可跳过此步。

（3）发布npm

在package目录下执行命令：

npm publish

如果发布失败可能是名字重复了，改了名字即可，发布成功后，我们即可到npm管网上查看自己发布得npm包：

6.从npm安装使用

直接执行安装命令：

cnpm install create-ui //我随便写的名字

然后在main.js引用注册，代码如下：

//注册全部组建
import createUi from "create-ui";
import "create-ui/index.css";//如果有css文件也可以引入
app.use(createdUi);




//单独注册某一个组件
import createButton from "create-ui/components/button";
app.use(createButton);

直接使用组件create-button，代码如下：

<template>
  <create-button></create-button>
</template>
<script setup>

</script>

7.注意事项

（1）每次发布都需要更改 package.json里面的版本号version

（2）避免用到过多的依赖,有些依赖会导致整个npm包无法使用

（3）组件的name一定要取一些不常见不会和其他组件重名的

（4）极少情况发布上去的版本会有延迟，要等30分钟左右才能下载 

代码007普通

打赏 收藏 海报 链接