基于vue-cli3开发组件库---从新建文件到npm发布

安装vue-cli3并创建一个Vue项目

这部分就不用讲啦，官网上有详细的过程，我使用的主要指令为：

全局安装vue-cli

npm install -g @vue/cli

创建一个vue项目

vue create dange-ui

在项目中添加组件库文件夹

在根目录下新建一个plugins文件夹，用来放组件，项目文件结构为

添加配置文件

项目根目录下面添加vue.config.js文件，写入以下内容

const path = require('path')
module.exports = {
  // 修改 pages 入口
  pages: {
    index: {
      entry: 'src/main.js', // 入口
      template: 'public/index.html', // 模板
      filename: 'index.html' // 输出文件
    }
  },
  // 扩展 webpack 配置
  chainWebpack: config => {
    // @ 默认指向 src 目录
    // 新增一个 ~ 指向 plugins
    config.resolve.alias
      .set('~', path.resolve('plugins'))

    // 把 plugins 加入编译，因为新增的文件默认是不被 webpack 处理的
    config.module
      .rule('js')
      .include.add(/plugins/).end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        // 修改它的选项...
        return options
      })
  }
}

编写组件

例如，写一个按钮组件，先在plugins文件夹下面新建一个Button文件夹，Button文件夹下的内容如图所示，这是一个单个组件文件夹的基本管理结构，src文件夹下面放组件文件，外面的Button文件夹下的index.js文件用来把组件注册安装，以便其他地方调用。

Button.vue文件内容为：

<template>
    <button class="dan-button" @click="handleClick">{{num}}</button>
</template>
<script>
export default {
    name:'DanButton',
    data(){
        return{
            num:0
        }
    },
    methods:{
        handleClick(){
            this.num++
        }
    }
}
</script>
<style scoped>
    .dan-button {
        width: 100px;
        height: 100px;
        line-height: 100px;
        border-radius: 50%;
        font-size: 30px;
        text-align: center;
        background: #24292e;
        color: white;
    }
</style>

index.js文件内容

// 为组件提供 install 方法，供组件对外按需引入
import DanButton from './src/DanButton'
DanButton.install = Vue=>{
    Vue.component(DanButton.name,DanButton)
}
export default DanButton

plugins文件夹下面新建一个index.js文件，为了统一导出所有组件及暴露 install 方法。之前的 index.js 只是安装单个组件，而现在这个 index.js 是循环安装所有组件，可以按需引用，此时plugins文件夹的内容为

外部index.js文件夹内容：

import DanButton from './Button/src/Button'

//所有组件列表
const components = [
    DanButton
]

//定义install方法，Vue作为参数
const install = Vue=>{
    //判断是否安装，安装过就不用继续执行
    if(install.installed) return
    install.installed = true
    //遍历注册所有组件
    components.map(component => Vue.component(component.name,component))
}

//检测到Vue再执行
if(typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}

export default {
    install,
    //所有组件，必须具有install方法才能使用Vue.use()
    ...components
}

在页面中使用组件

1.mian.js中全局导入组件库

2.在页面中使用组件，因为是全局注册了组件库，所以可以直接使用标签
，这个标签与组件文件中的Button.vue里的name保持一致，只不过一个是驼峰式写法，一个是标签名称。这在Vue中很常见。

查看组件调用效果

npm run serve

即可在本地浏览器中查看

库模式打包

在package.json文件中的"scripts"字段里添加以下内容

因为在vue-cli中，可以通过以下命令将一个单独的入口打包成库

// target: 默认为构建应用，改为 lib 即可启用构建库模式
// name: 输出文件名
// dest: 输出目录，默认为 dist，这里我们改为 lib
// entry: 入口文件路径
vue-cli-service build --target lib --name lib [entry]

然后再在终端执行npm run lib 即可，执行结果：

发布到npm

1.补充package.json文件

2.在根目录下新建一个.npmignore文件，内容如下

3.终端依次执行，没有npm账号的需要先行注册

npm login
npm publish

npm中查看库

https://www.npmjs.com/package/dange-ui

在其他项目中引用组件库

不能在dange-ui项目中引用自己的npm库，不然会报错

所以，可以新建一个项目来引用，

npm i dange-ui -S

在项目的node_modules中，可以看到dange-ui目录

项目中使用，main.js中

页面中直接使用就Ok啦。

完美！

参考来源：https://juejin.im/post/5c95c61f6fb9a070c40acf65