一、创建项目

vue create 项目名称

二、配置相关文件

1.修改文件名

src目录更改为-examples // 改成 examples 用作示例展示 新增 packages 用于编写存放组件

2.根目录下新建 vue.config.js文件

因为src 目录更名为 examples ，导致项目无法运行 在 vue.config.js 添加以下配置

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

packages/lemonUploads/index.js 添加以下代码

// 导入组件，组件必须声明 name
import LemonUploads from ./index.vue;
// 为组件提供 install 安装方法，供按需引入
LemonUploads.install = function(Vue) {
    Vue.component(LemonUploads.name, LemonUploads);
};
// 默认导出组件
export default LemonUploads;

将packages中的所有组件导出

packages下新建 index.js 并添加

// 导入组件
import LemonUploads from ./lemonUploads/index;

// 存储组件列表
const components = [LemonUploads];
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
	// 遍历注册全局组件
	components.forEach((component) => {
		Vue.component(component.name, component);
	});
};

// 判断是否是直接引入文件
if (typeof window !== undefined && window.Vue) {
	install(window.Vue);
}

export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
	install,
	// 以下是具体的组件列表
	LemonUploads,
};

在组件项目中引入

main,js中添加如下：

// 导入组件库
import LemonUploads from ./../packages/lemonUploads/index
// 注册组件库
app.use(Antd)
app.use(LemonUploads)
app.mount(#app)

3.发布到npm

1）更改配置文件-package.json

"name": "lemon-upload",
  "version": "1.8.42",
  "private": false,
  "keyword": "上传文件 vue antdesign upload",
  "description": "基于vue3.x+antdesign的文件上传组件",
  "author": "LemonSong",
  "main": "",

2）更改打包编译方式

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name lemonUploads --dest lib packages/index.js"
  },

3）新增.npmignore文件 写入一些不必要上传的文件名称

.DS_Store
node_modules/
examples/
public/
packages/
vue.config.js
babel.config.js
*.map
*.html
 
# local env files
.env.local
.env.*.local
 
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
 
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

4）打包编译

npm  run lib

5）发布npm

登录npm

npm login

发布命令

npm publish