npm 发布vueUI库

要发布一个 Vue UI 库，你需要先创建一个 Vue 项目，然后在其中编写你的组件。接下来，你需要使用 webpack 或者其他构建工具将你的组件打包成一个可以被其他人引用的库，最后使用 npm 发布你的库。

以下是一个简单的步骤：

1. 创建一个 Vue 项目

vue create my-ui-library

2. 编写你的组件代码，将其放置在 `src/components` 目录下。

3. 在 `src/index.js` 文件中导出你的组件

import MyComponent from './components/MyComponent.vue'

export default {
  install(Vue) {
    Vue.component('my-component', MyComponent)
  }
}

4. 配置 webpack，将你的组件打包成一个库

在 `webpack.config.js` 中添加以下配置：

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-ui-library.js',
    library: 'MyUiLibrary',
    libraryTarget: 'umd'
  },
  externals: {
    vue: 'vue'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new VueLoaderPlugin()
  ]
}

在上面的配置中，我们将 `src/index.js` 打包成一个名为 `my-ui-library.js` 的文件，并且设置 `library` 和 `libraryTarget` 属性以便其他人可以使用 `MyUiLibrary` 引用你的库。

注意，我们在 `externals` 中将 `vue` 设置为外部依赖，这意味着使用你的库的人需要自己在项目中引入 Vue。

5. 在 `package.json` 中添加必要的字段

{
  "name": "my-ui-library",
  "version": "1.0.0",
  "description": "My awesome Vue UI library",
  "main": "dist/my-ui-library.js",
  "keywords": [
    "vue",
    "ui",
    "library"
  ],
  "author": "Your Name",
  "license": "MIT",
  "peerDependencies": {
    "vue": "^2.6.11"
  }
}

在上面的配置中，我们需要将 `main` 字段设置为我们打包后的文件路径，同时添加 `peerDependencies` 字段来指定我们的库需要依赖 Vue。

6. 发布到 npm

现在，我们可以使用以下命令将我们的库发布到 npm：

npm login
npm publish

注意，在发布之前，你需要先在 npm 上注册一个账号。如果你已经注册了账号，可以使用 `npm login` 命令登录。

发布后，其他人就可以使用以下命令来安装你的库：

npm install my-ui-library

然后，在他们的 Vue 项目中引入你的组件：

import Vue from 'vue'
import MyUiLibrary from 'my-ui-library'

Vue.use(MyUiLibrary)

至此，你的 Vue UI 库就发布成功了！