本文共 1151 字，大约阅读时间需要 3 分钟。

1. 新建 Vue 项目

我们首先使用 vue-cli 初始化一个项目：

npm install -g @vue/clivue create cuclife

2. 项目结构优化

创建项目后，我们需要调整项目结构：

3. 配置 Vue 配置文件

由于我们修改了项目结构，启动 Vue 项目可能会报错。为解决这个问题，我们需要修改 vue.config.js：

module.exports = {  pages: {    index: {      entry: 'examples/main.js',      template: 'public/index.html',      filename: 'index.html'    }  }}

4. 在 packages 文件夹中编写组件

假设我们正在开发一个叫 doAlert 的组件，存放在 packages/doAlert 文件夹中。我们需要创建以下文件：

index.js

import doAlert from './src/main'doAlert.install = function(Vue) {  Vue.component(doAlert.name, doAlert)}export default doAlert

main.vue

5. 发布组件包

接下来，我们需要将组件包发布到 npm：

cd packages/doAlert

2. 安装必要的依赖：

npm init -ynpm install vue

3. 编写 package.json：

{  "name": "do-alert",  "version": "1.0.0",  "description": "A Vue.js alert component",  "main": "index.js",  "scripts": {    "prepare": "vue build packages/doAlert/main.vue"  }}

4. 发布到 npm：

npm publish

6. 使用已发布的组件包

在其他项目中使用：

npm install do-alert

然后在 Vue 项目中使用：

import { doAlert } from 'do-alert'doAlert.install(Vue)

转载地址：http://aqjfk.baihongyu.com/