如何把本地的vue项目写的组件上传到npm

前言

平常使用Vue开发时，一个项目中多个地方需要用到的相同组件通常我们会封装为一个公共组件，但是如果项目不同我们也需要这个组件，那就需要复制一份公共组件代码到新项目，一个还好，如果是多个组件，这样就稍显麻烦了。
所以我们可以将封装好的组件打包发布至npm，就可以像element ui ant-design-vue这些ui组件库一样通过npm命令下载使用了

chatgtp 回答

将本地的Vue组件上传到npm（Node Package Manager）涉及几个关键步骤。以下是一个简单的步骤指南：

1. 创建npm账号：
   如果你还没有npm账号，首先需要在npm官网上注册一个账号。

2. 初始化npm包：
   在你的Vue组件项目的根目录中，使用以下命令初始化npm包。这将生成一个package.json文件，其中包含有关你的项目的信息。

   npm init
   

   在这个过程中，你会被要求提供一些关于你的项目的信息，如包名、版本、描述等。

3. 配置package.json文件：
   打开生成的package.json文件，确保其中包含了必要的信息。特别是，确保main字段指向你的Vue组件的入口文件。

4. 编写Vue组件：
   编写你的Vue组件，并确保它可以作为一个独立的包被导入。

5. 创建.npmignore文件（可选）：
   如果你有一些不希望被包含在npm包中的文件，可以创建一个.npmignore文件，类似于.gitignore，列出不需要包含的文件和文件夹。

6. 登录npm账号：
   使用以下命令登录你的npm账号。

   npm login
   

   输入你在npm注册时使用的用户名、密码和邮箱。

7. 发布你的包：
   使用以下命令发布你的Vue组件。

   npm publish
   

   注意：第一次发布包时，可能需要等待几分钟，因为npm可能需要一些时间来处理和发布你的包。此后，更新包时发布将更加迅速。

8. 更新包（可选）：
   如果你对你的组件进行了更新，可以使用以下命令发布新版本。

   npm version <patch|minor|major>
   npm publish
   

   <patch|minor|major> 表示你要更新的版本类型。详细了解语义化版本号。

现在，你的Vue组件应该已经上传到npm，并可以通过其他项目使用 npm install your-package-name 来安装。确保在发布前测试你的组件，以确保它可以正常使用。

还是有点陌生~~~

创建npm账号

如果你还没有npm账号，首先需要在npm官网上注册一个账号。

为了您的安全，我们已将一次性密码发送到您的电子邮件地址1**********@qq.com。

每次登录时，您都需要输入通过电子邮件发送的一次性密码。如果启用双因素身份验证，则可以使用设备进行身份验证，而不用检查电子邮件。

这样就验证成功了

创建一个项目（放手写组件）

下载vue-clie脚手架

npm install -g @vue/cli

创建 Vue 项目通常不需要安装 npm install -g vue，因为 vue 这个包本身并不是 Vue CLI，而是 Vue.js 的核心库。Vue CLI 是一个用于创建和管理 Vue.js 项目的全局 npm 包，它的正确安装命令是 npm install -g @vue/cli。

vue create Mqing-ui

vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。
去看下有没有配置环境变量

npm config get prefix是NPM（Node Package Manager，Node包管理器）的一个命令，用于检索当前设置的NPM全局安装位置的前缀。简单来说，该命令可以帮助你查看在全局安装Node.js包时，这些包将被安装到的位置。

运行该命令后，系统会返回一个路径，该路径即为NPM全局安装的前缀目录。这通常是Node.js安装目录中的一个子目录，但具体路径可能因操作系统和Node.js/NPM的安装方式而有所不同。

如果需要更改全局安装路径，可以使用npm config set prefix命令，后接你希望设置的新路径。例如：npm config set prefix “D:\npm_global”。这样，以后全局安装的包将会被安装到这个新指定的目录下。

1. 打开“控制面板” > “系统和安全” > “系统” > “高级系统设置”。
2. 在“系统属性”窗口中，点击“环境变量”按钮。
3. 在“环境变量”窗口中，找到“系统变量”部分，并滚动到找到Path变量，然后点击“编辑”。
4. 在“编辑环境变量”窗口中，点击“新建”，然后粘贴或输入你的NPM全局安装前缀目录的路径。
   
   把这个路径填写上

继续执行 vue create Mqing-ui 报错

创建项目的项目名不能大写

不需要安装太多依赖

文件结构

注意，封装的组件一定要有name属性，而且不要和市面上组件的命名冲突。

package.json

 "package": "vue-cli-service build --target lib ./src/package/index.js --name mq-ui --dest mq-ui"

–target lib 指定打包的目录
–name 打包后的文件名
–dest 打包后的文件夹名称

安装sass

//默认安装最新版本
npm install node-sass --sava-dev
npm install sass-loader --save-dev
 
//指定安装版本
npm install node-sass@x.xx.x --sava-dev
npm install sass-loader@x.xx.x --save-dev

还是删掉sass吧 why？ 下载最新的原来旧的项目是指定版本的 而新项目用的是新的版本 so还是去掉好

不小心安装了eslint 在打包的时候报错 npm package（删除了package.json中的配置）

  // "eslintConfig": {
  //   "root": true,
  //   "env": {
  //     "node": true
  //   },
  //   "extends": [
  //     "plugin:vue/essential",
  //     "eslint:recommended",
  //     "plugin:prettier/recommended"
  //   ],
  //   "parserOptions": {
  //     "parser": "@babel/eslint-parser"
  //   },
  //   "rules": {
  //     "no-unused-vars":"off"
  //   }
  // },

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

创建的时候选择了eslint 造孽

重新创建一个项目

封装vue插件并发布到npm 是不是elementui的二次封装是需要安装elementui ？

其实是不需要的安装 elementui

只需要在你的项目中安装有 这个二次开发的组件就行（那有什么办法可以在这个包里面就添加好这样依赖呢？后面有待商榷）

打包

cmd 查看npm源

需要修改为官方源

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

查看源地址

npm get registry

设置地址

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

打包

npm run package

cd切换到mq-clock目录执行初始化package.json文件目录

npm init -y

name: 你的插件的名称。它应该是唯一的，并且遵循 npm 的命名规范。
version: 你的插件的版本号。遵循语义版本控制（semver）是一个好主意。
description: 你的插件的简短描述。
main: 入口文件的路径。这通常是你的构建输出文件或你的插件的源代码文件。
keywords: 与你的插件相关的关键词，有助于用户在 npm 上搜索到你的插件。
author: 你的姓名或你的团队/公司的名称。
license: 你的插件的许可证类型。常见的许可证类型包括 MIT、ISC 和 Apache-2.0。

登录账号 需要输入账号密码 以及接受验证码

npm login

Enter one-time password 需要接收一次验证码
看一下有没有包名一样的

没有可以 发布了

好咯 发布成功

测试

创建一个新项目

Use class-style component syntax? (Y/n) 这是什么意思

Vue 3引入了新的Composition API，使得你可以使用类似类的风格来编写组件，尽管它仍然是基于函数的。这是通过使用setup方法和ref、reactive等Composition API的函数来实现的。虽然这不等同于传统的类风格组件，但它提供了类似的组织和复用代码的能力。

不过，如果你确实想要在Vue中使用类似类的语法，你可能会对vue-class-component和vue-property-decorator这两个库感兴趣。这两个库让你能使用基于类的语法和装饰器来编写Vue组件。

这里有一个简单的示例，展示如何使用这两个库：

import { Vue, Component, Prop } from 'vue-property-decorator';

@Component
export default class MyClassComponent extends Vue {
  @Prop(String) private msg!: string;

  private count: number = 0;

  mounted() {
    console.log(this.msg);
  }

  increment() {
    this.count++;
  }
}

在上面的例子中：

• 使用了vue-property-decorator提供的@Component装饰器来标注这是一个Vue组件。
• 使用了@Prop装饰器来定义一个属性。
• mounted方法是Vue组件的生命周期钩子，它在组件被挂载到DOM后被调用。
• increment是一个普通的实例方法。

但是要注意，这个方法是基于Vue 2.x的。对于Vue 3.x，虽然这些库可能会有一些更新以支持新的API，但Vue团队推荐的方式是使用Composition API，因为它是为了提供更好的代码组织和复用，特别是在复杂的组件中。

如果你想在Vue 3中使用类似类的语法，你可能会想要查看像vue-class-component-next这样的项目，这些项目尝试将基于类的语法与Vue 3的Composition API结合起来。但请注意，这些可能是社区驱动的、实验性的项目，而不是Vue团队官方支持的。

在撰写本文时（2023年），Vue的官方推荐仍然是使用Composition API的函数式风格，因为这是Vue 3及以后版本的核心特性。类风格的组件在Vue 2中更常见，但对于Vue 3，你可能需要寻找第三方解决方案或坚持使用官方推荐的API。

选择NO

报错

找不到模块“mq stock”的声明文件G： “/selfCode/Mqing UI/test-UI/node_modules/mq stock/mq stock.common.js”隐式地具有“any”类型。

如果存在“npm i–save dev@types/mq stock”，请尝试它，或者添加一个包含“declare module”mq stock的新声明（.d.ts）文件`

declare module ‘mq-stock’ 或者 tsconfig.json. 尝试添加 “noImplicitAny”: false,

Could not find a declaration file for module 'mq-stock'. 'G:/selfCode/Mqing-UI/test-ui/node_modules/mq-stock/mq-stock.common.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/mq-stock` if it exists or add a new declaration (.d.ts) file containing `declare module 'mq-stock';`

看有的人是导出对象
导出是对象吗？

难不成是没有以对象的方式导出？

官网给出解释

官网也是支持function的呀

npm login

npm publish

发现导入组件问题所在：

重点说下：

一开始我想创建mq-ui 放多个组件的 但是导入的时候 却没有mq-ui 这个组件 so会报找注册不到mq-ui 其实我们是需要安装这个 timedatepicker 组件才对，方法的写法其实也是正确的

再次发布重名问题 需要加@前缀

npm notice Publishing to https://registry.npmjs.org/
npm ERR! code E403
npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/timedatepicker - Package name too similar to existing package time-date-picker; try renaming your package to '@lumingqing/timedatepicker' and publishing with 'npm publish --access=public' instead
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy, or
npm ERR! 403 on a server you do not have access to.

这是一个关于NPM发布的问题，NPM提示你发布的包名 timedatepicker 与已存在的包名 time-date-picker 过于相似。由于NPM有规定不允许过于相似的包名，所以你得到了这个403错误。

为了解决这个问题，你可以尝试以下几个步骤：

1. 更改包名：这是最直接的方式，你可以根据提示尝试使用新的包名 @lumingqing/timedatepicker 或其他任何未被占用的名字。请注意，在更改包名后，你需要确保在代码中的所有引用也相应地更新为新包名。
2. 使用scope：在NPM中，scope可以理解为命名空间，用于将包名区分开。在这个例子中，@lumingqing 就是一个scope。如果你拥有一个组织或者只是想要更加明确地表示包的来源，可以使用这种方式。当你使用scope发布包时，需要使用 npm publish --access=public 命令，以便其他人可以访问到这个包。

为了实施上述方案，你可以按照以下步骤进行：

• 在 package.json 文件中，更改 name 字段为你的新包名，比如 @lumingqing/timedatepicker。
• 在终端中，使用 npm logout 命令登出当前的NPM用户（如果已登录）。
• 使用 npm login 命令重新登录到你的NPM账户。
• 确保你已经在 npm 上注册了你的scope（例如，@lumingqing）。如果没有，你需要先在NPM上创建一个组织或者得到一个已经存在的scope的访问权。
• 使用 npm publish --access=public 命令发布你的包。

请尝试以上步骤，如果问题仍然存在，那可能是其他因素导致的，需要更多的信息来定位问题。

手写的时间日期选择器二次封装的包地址

npm如何安装@开头的包？？

npm  i  '@lumingqing/timedatepicker' 

引入组件 css

import TimeDatePicker from '@lumingqing/timedatepicker';
import "../node_modules/@lumingqing/timedatepicker/TimeDatePicker.css";

import “…/node_modules/@lumingqing/timedatepicker/TimeDatePicker.css”;？

那一定要引入样式吗 ？ 好像有配置样式不分离的，后续优化

中间的 - 样式不好看 调整一下 发下一个版本

如何修改代码，调整一下样式再发下一个包版本

执行npm version patch。package.json 的版本号将会从1.0.0变成1.0.1。（不用人工去修改）

登陆过的不在再npm login 直接npm publish

大功告成！！！！！

参考

详细

https://blog.csdn.net/nanfangxinchai/article/details/132042635

[推荐](https://blog.csdn.net/qq_48960335/article/details/127947813?

注意：

1. 不要乱起名，不允许再重命名
2. page.json 最好还是复制一份 why？ 因为npm run package page.json会丢失
3. 二次组件开发在新项目中还是需要安装elementui的