基于vue-cli封装自己的ui组件库并上传到npm

1、使用Vue-cli搭建项目

npm install  -g @vue/cli
vue create my-ui-library
cd my-ui-library
npm run serve

2、创建一个用来存放所有组件的文件夹，比如我在src目录下创建了packpages文件夹，也有人习惯将这个文件夹放在src同级目录

3、在packpages下创建各个组件文件，进行开发，比如我封装了一个Button组件和一个Input组件

注意：自己封装的组件里面一定要有name属性，作为在其他项目中install这个组件库后，在页面中使用的具体组件名，类似elementUI库中的、

Button/button.vue

Button/button.less

.button{
    color: red;
}

Button/index.js - 需要将组件导出并提供install方法！！！

import GButton from './button.vue'

GButton.install = function (Vue) {
    Vue.component(GButton.name, GButton)
}
export default GButton

4、在packages文件夹创建index.js用于统一导出多个组件

packages/index.js

/**
 * 统一导出组件
 */
import Button from './Button'
import Input from './Input'

// 组件集合用于遍历
const components = [Button, Input]

// 定义install方法
const install = function (Vue) {
    if (install.installed) return
    // 遍历注册全局组件
    components.map(component => Vue.component(component.name, component))
}

// 判断是否存在全局的Vue对象，是的话代表是CDN方式使用，那么自动进行注册
if (typeof window !== "undefined" && window.Vue) {
    install(window.Vue)
}

export {
    install,
    Button
}
export default {
    install,
    Button
}

上述代码主要就是将我们封装好的组件注册为全局组件，用到了Vue.component()方法，当使用Vue.use()时，我们的install方法便会执行。

5、在项目的package.json文件中，配置打包命令：

"package": "vue-cli-service build --target lib ./src/packages/index.js --name my-element-ui --dest my-element-ui"

打包命令解释：
--target lib 关键字指定打包的目录
--name 打包后的文件名字
--dest 打包后的文件夹的名称

6、执行打包命令：

npm run package

打包执行完成后我们项目目录下就会多出一个my-element-ui文件夹，存放的是打包后的文件。

7、执行以下命令，在my-element-ui文件夹下初始化一个package.json文件，注意和项目的package.json不是同一个文件！！！

cd my-element-ui
npm init -y

my-element-ui/package.json

{
  "name": "my-element-ui", // 注意： name里面不能有大写！！！ 该字段是上传到npm仓库后的包名称
  "version": "1.0.0",
  "description": "",
  "private": false,  // 注意：需手动添加！！！
  "main": "my-element-ui.common.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

8、新增 README.md文档，方便其他用户使用

# my-element-ui

## 安装
npm install my-element-ui

## 引入
import myElementUi from '@test/my-element-ui'
import '@test/my-element-ui/my-element-ui.css'

## 全局注册
Vue.use(myElementUi)

## 页面使用

9、发布到npm仓库

（1）注册账号
想要发布到npm仓库，就必须要有一个账号，先去npm官网注册一个账号，注意记住用户名、密码和邮箱，发布的时候可能会用到。

（2）设置npm源
有些小伙伴可能本地的npm镜像源采用的是淘宝镜像源或者其它的，如果想要发布npm包，我们得吧我们得npm源切换为官方得源，命令如下：

npm config set registry=https://registry.npmjs.org

（3）添加npm用户
进入my-element-ui目录，添加npm用户，执行命令：

npm adduser

这里会让你填写用户名、密码、邮箱，然后会收到一封邮件，邮件里面有个类似于验证码的东西，如果之前设置过即可跳过此步。

（4）发布npm
在my-element-ui目录下执行命令：

npm publish

如果发布失败可在百度搜索失败code码，一般都是名字重复、名字不合格、版本号重复，如下图左边是成功，右边是因为版本重复而发布失败的

10、从npm安装使用

进入一个demo项目，执行

npm install my-element-ui

（1）全局引入：
在demo项目的main.js中引用注册

import myElementUi from 'my-element-ui'
import 'my-element-ui/my-element-ui.css'
Vue.use(myElementUi)

在demo项目的某页面中使用即可，注意使用的标签名是上面第3步中开发的组件的name，以下两种写法均可

（2）按需加载：(待研究，尚未实现)
需要先安装插件

npm install babel-plugin-component -D

在demo项目根目录新建.babelrc 文件，配置如下

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "my-element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下来，如果你只希望引入部分组件，比如 Button 和 Input，那么需要在 main.js 中写入以下内容：

import { MyButton, MyInput } from 'my-element-ui';

Vue.use(MyButton)
Vue.use(MyInput)