vue组件打包并发布到npm的全过程

下面是Vue组件打包并发布到npm的全过程：

第一步：创建Vue组件项目

首先，我们需要创建一个Vue组件项目，可以使用Vue CLI来创建项目。具体步骤如下：

打开命令行工具，并输入以下命令来安装Vue CLI：

npm install -g @vue/cli

接着，在指定的目录下运行以下命令来创建一个Vue组件项目：

vue create your-project-name

选择手动配置自己需要的选项，具体选择项如下：
Babel
TypeScript
Router
Vuex
CSS Pre-processors
Linter / Formatter
根据提示安装依赖并启动项目：

cd your-project-name npm install npm run serve

运行以上命令后，即可启动Vue组件项目。

第二步：编写Vue组件

在创建好的Vue组件项目中，我们需要将自己的组件代码写入一个单独的.vue文件中。

在写组件之前，需要确保在src/components目录下创建一个目录，存放自己的组件。

组件代码需要导出一个对象，具体实现如下示例：

<template>
  <div>{{ text }}</div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    text: String,
  },
};
</script>

第三步：打包组件

我们需要将组件打包为一个单独的文件，方便其他项目使用。

安装rollup打包工具及其插件：

npm install rollup rollup-plugin-vue rollup-plugin-terser --save-dev

创建一个rollup配置文件，用于打包.vue组件文件中的组件：

```
// rollup.config.js
import vue from 'rollup-plugin-vue';
import { terser } from 'rollup-plugin-terser';

export default {
input: 'src/components/MyComponent.vue',
output: {
file: 'dist/my-component.js',
format: 'esm',
},
plugins: [
vue(),
terser(),
],
};
```

运行rollup -c命令来打包组件代码：

npm run build

这个过程会将组件打包至dist目录下。

第四步：发布到npm上

注册npm账户

我们需要先在npm上注册一个账户，以便上传组件至npm。可以通过以下命令来注册一个账户：

npm adduser

配置包信息

在项目根目录下创建package.json文件，用于配置组件基本信息。需要配置的信息包括：

name：包名，必填。
version：版本号，必填。
description：组件描述，可选。
main：组件入口文件路径，必填。
repository：组件源代码仓库信息，可选。
keywords：组件关键词，可选。
author：作者信息，可选。
license：许可证信息，可选。

{ "name": "my-component", "version": "1.0.0", "description": "My Vue Component", "main": "dist/my-component.js", "keywords": [ "vue", "component" ], "author": "Your Name", "license": "MIT" }