如何基于Vue-cli3 创建一个自己的组件库示例

创建一个Vue-cli3项目

如何创建请参考：https://cli.vuejs.org/zh/

创建examples目录

将项目中src的文件夹名修改为examples，该文件夹用于存储组件库的示例。
因为修改了src的文件夹名，在构建时本应该打包src中的内容无法被正常打包了，所以我们要添加examples目录到webpack配置文件中。(后续段落介绍如何修改配置)

创建packages目录

该目录用于存储组件源代码。（需要配置到webpack中）

在packages目录下创建index.js

该文件用来注册所有的组件供Vue使用。

创建lib目录

该目录用于存储组件库打包后的代码

在根目录下创建vue.config.js 并打开

输入下面代码
下方链式操作语法请参考 vue官方 https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7

const path = require('path')
module.exports = {
    chainWebpack: config => {
        config.resolve.alias
            .set('@', path.resolve('examples')) 
            .set('~', path.resolve('packages'));
        config.module
            .rule('eslint')
            .exclude.add(path.resolve('lib'))
            .end()
            .exclude.add(path.resolve('examples/docs'))
            .end();
        config.module
            .rule('js')
            .include.add(/packages/)
            .end()
            .include.add(/examples/)
            .end()
            .use('babel')
            .loader('babel-loader')
            .tap(options => {
                return options;
            });
    }
}

写一个示例组件

packages新建目录buttons
buttons目录新建目录src
src目录新建buttons.vue文件
buttons目录新建index.js用于导出组件

buttons.vue示例代码

<template>
    <div class="free-buttons" :type="type">

    </div>
</template>

<script>
    export default {
        name: "buttons",
        data() {
            return {
                aaa:''
            }
        },
        props:{
            type: String
        },mounted() {
            if(this.type){
                console.log(this.type)
                this.aaa = 'test'
                console.log(this.aaa)
            }
        }
    }
</script>

<style scoped>
    .free-buttons {
        width: 100%;
        height: 30px;
        background: #fc4949;
    }
</style>

./buttons/index.js 代码

import buttons from './src/buttons.vue'
buttons.install = function (Vue) {
    Vue.component(buttons.name,buttons)
}

export default buttons

./packages/index.js代码

import buttons from './buttons'

const components = {
    buttons
}

const install = function (Vue) {
    if(install.installed) return
    components.map(component => Vue.component(component.name,component))
}

if (typeof window !== 'undefined' && window.Vue){
    install(window.Vue)
}

export default {
    install,
    buttons
}

修改根目录package.json如下

{
  "name": "包名称",
  "version": "0.1.0",
  "description": "测试中",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib --name freeui --dest lib packages/index.js"
  },
  "main": "lib/包名称.common.js",
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.6.0",
    "@vue/cli-service": "^3.6.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "vue-template-compiler": "^2.5.21"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

打包发布

npm login 
输入用户名 密码 邮箱
npm run lib 
打包
npm publish 
发布