基于Vue发布自己的npm 组件

1、使用 vue 创建一个空项目

vue create 项目名称

2、如果想基于 element 或 antdesign 的基础上封装自己的组件的话

通过 element 或 ant 的官方去按照文档在项目上集成elementui 或 ant design
注意：发布的npm包并不包含 element ， 需要你的开发项目上自行引入element

3、在src 目录下 创建 一个packages 来存放你的1个或多个组件

4、在packages 文件夹中 新建一个文件 或多个文件夹来存放 你的组件

5、在组件文件夹内正常发挥去写你的组件

6、组件文件夹中 要包含一个index.js 文件 用来写插入组件的代码

// 引入组件
import MyButton from './src/MyButton'
MyButton.install = Vue => {
  Vue.component(MyButton.name, MyButton);
}

/* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(MyButton);
}
  
export default MyButton

7、在packages中创建index.js 用来批量引入组件

import MyButton from './MyButton'
import MyButton2 from './MyButton2'
const components = [
    MyButton,
    MyButton2
]

const install = function(Vue) {
  components.forEach(component => {
    Vue.component(component.name, component);
  });
}

/* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  MyButton,
  MyButton2,
}

8、测试组件 你平时项目开发怎么引入组件使用测试 你就怎么测试

在App.vue 中 通过 import 来引入组件 测试组件也可以

9、以上都做好了以后我们就需要准备发布一个npm 包了

首先准备
9.1、在你的package.json 中 增加

{
  "name": "包名 这个决定npm install 的时候使用的包名 npm中唯一",
  "description": "介绍",
  "author": "作者 <you email>",
  "version": "1.0.0",// 版本号 每次发版都要更新
  "license": "MIT",
  "private": false,
  // 入口文件 
  // 如果使用第二种方式发布 就要改为 lib/[包名].common.js 
  // 可以不写 使用包的使用就要改为 import MyButton from '包名/包名.common.js'
  "main":"src/packages/index.js",
  // 需要发布的文件夹
  // 第一种方式发包 就直接写 src/packages
  // 第二种方式法宝 写 "lib"
  "files": [
    "src/packages"
  ],
  // 关键词
  "keywords": [
    "Vue2",
    "Element UI",
    "MyButton"
  ],}

9.2、使用第二种方式发包的话 文件打包后 会在lib 中生成 .css 文件 使用组件的时候需要引入这个css 文件 那样你的样式才会生效
或者 在vue.config 文件中 增加 css: {extract: false }, 配置项 这样 css 就不会独立打包
参考文档 https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93

9.3、去npm 官网去注册一个账号

发布一共两种方法

1、直接将你的.vue 文件源码进行发布

使用login 命令 进行登录 npm 期间会提示你输入用户名 密码等操作

npm login 

调用命令发布

npm publish

发布成功如下

2、使用第二种方式 打包发布 需要增加一个命令

package.json scripts 中增加一个lib命令

{

"scripts": {

    "serve":"vue-cli-service serve",

    "build":"vue-cli-service build",

    "lint":"vue-cli-service lint",

    +"lib":"vue-cli-service build --target lib --name MyButton --dest lib packages/index.js"
  },   
}

–target: 构建目标，默认为应用模式。这里修改为 lib 启用库模式。
–dest : 输出目录，默认 dist。这里我们改成 lib。
[entry]: 最后一个参数为入口文件，默认为 src/App.vue。这里我们指定编译 packages/index.js
–name ：组件库名称。

对应参考 第9.1步中 需要修改的几个参数 main 和 files 两个配置项的值

使用login 命令 进行登录 npm 期间会提示你输入用户名 密码等操作

npm login 

调用命令发布

npm publish

至此 恭喜你已经发布了一个自己的npm包