vue 封装组件到npm

1. 创建一个Vue组件库

首先，需要创建一个Vue组件库，并编写组件代码。可以使用Vue CLI来快速创建一个Vue项目：

vue create my-component-library

在创建项目时，需要选择手动选择特性，并勾选Babel、Router、Vuex和CSS Pre-processors等选项，以便后续使用。

然后，在src目录下创建components目录，并编写组件代码。例如，创建一个HelloWorld组件：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    message: String
  }
}
</script>

2. 配置打包命令

完成组件编写后，可以使用vue-cli-service进行打包。在package.json文件中添加以下命令：

"scripts": {
  "build": "vue-cli-service build --target lib --name my-component-library src/main.js"
}

其中，--target lib表示打包为一个库，--name my-component-library表示库的名称为my-component-library，src/main.js表示入口文件。

3. 配置package.json

在package.json文件中，需要添加以下配置：

{
  "name": "my-component-library",
  "version": "1.0.0",
  "description": "A Vue.js component library",
  "main": "dist/my-component-library.umd.js",
  "files": [
    "dist/*",
    "src/components/*"
  ],
  "keywords": [
    "vue",
    "component",
    "library"
  ],
  "author": "Your Name",
  "license": "MIT",
  "peerDependencies": {
    "vue": "^2.6.11"
  }
}

其中，name、description、keywords、author、license等字段需要根据实际情况进行修改。main字段指定了库的入口文件，files字段指定了需要发布的文件列表，peerDependencies字段指定了依赖的Vue版本。

4. 发布到npm

在npm官网注册并登录账号后，进入项目目录，执行以下命令发布：

npm login
npm publish

其中，npm login需要输入用户名、密码和邮箱，npm publish会将当前目录下的文件发布到npm仓库。

5. 使用组件库

其他项目可以使用npm install命令安装my-component-library：

npm install my-component-library

然后，在需要使用的组件中引入组件库，并注册组件即可：

import Vue from 'vue'
import MyComponentLibrary from 'my-component-library'

Vue.use(MyComponentLibrary)

// 或者
import HelloWorld from 'my-component-library/src/components/HelloWorld.vue'

Vue.component('HelloWorld', HelloWorld)