基于@vue/cli 3搭建属于自己的组件库(1)

MoAir 发布于2019-08-23 12:42 / 2346人阅读

摘要：但是总会有一些功能是开源组件库覆盖不了的，这就需要我们自己手动去开发组件，但是这些组件有可能会被团队内多个项目用到，怎么才能在多个项目中共享这些组件，这里就需要我们搭建自己的组件库，接下来我就讲讲自己的实践。

我们在做项目的时候，通常会需要一些公用的基础组件，比如dialog、alert、form、table等等，大多数情况下现在的开源组件库已经能满足我们的需要了，比如基于vue的element-ui、vant、iview等等。

但是总会有一些功能是开源组件库覆盖不了的，这就需要我们自己手动去开发组件，但是这些组件有可能会被团队内多个项目用到，怎么才能在多个项目中共享这些组件，这里就需要我们搭建自己的组件库，接下来我就讲讲自己的实践。

第一步：创建项目

vue create xxx-ui

  default (babel, eslint)
> Manually select features

? Check the features needed for your project: (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
>(*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 (*) Unit Testing
 ( ) E2E Testing

router选择hash，CSS Pre-processors选择sass/scss，lint选择ESLint + Prettier，unit test选择Mocha + Chai，配置文件选择In dedicated config files（多带带文件），大家可根据自己的使用习惯自行选择。

第二步：将文件夹src修改为examples，然后在根目录新增文件夹packages 第三步：根目录新增vue.config.js

chain-webpack的文档

module.exports = {
    // 修改默认的入口
    pages: {
        index: {
            entry: "examples/main.js",
            template: "public/index.html",
            filename: "index.html"
        }
    },
    chainWebpack: config => {
        // vue默认@指向src目录，这里要修正为examples，另外新增一个~指向packages
        config.resolve.alias
            .set("@", path.resolve("examples"))
            .set("~", path.resolve("packages"));
        // lib目录是组件库最终打包好存放的地方，不需要eslint检查
        // examples/docs是存放md文档的地方，也不需要eslint检查
        config.module
            .rule("eslint")
            .exclude.add(path.resolve("lib"))
            .end()
            .exclude.add(path.resolve("examples/docs"))
            .end();
        // packages和examples目录需要加入编译
        config.module
            .rule("js")
            .include.add(/packages/)
            .end()
            .include.add(/examples/)
            .end()
            .use("babel")
            .loader("babel-loader")
            .tap(options => {
                // 修改它的选项...
                return options;
            });
    }
};

第四步：创建测试组件

test.vue

packages/test/index.js

import test from "./src/test";
export default Vue => {
    Vue.component(test.name, test);
};

package/index.js

import test from "./test";
const components = [test];
const install = function(Vue) {
    if (install.installed) return;
    components.map(component => {
        Vue.use(component);
    });
};
//  全局引用可自动安装
if (typeof window !== "undefined" && window.Vue) {
    install(window.Vue);
}
export default {
    install,
    test
};
export { test };

第五步：修改package.json

package.json

// npm输出的文件
main: "lib/xxx-ui.common.js",
// 新增命令
scripts: {
    "lib": "vue-cli-service build --target lib --name xxx-ui --dest lib packages/index.js"
}

最后：新增.npmignore，添加好忽略文件，打包发布

npm run lib
npm publish

我们就发布了自己的组件库，但是一个完整的组件库还包含文档、单元测试、按需加载等功能，这些我会在后续的文章中将我的实践列出来

如有不足之处，还望大家指出

GPU云服务器云服务器如何搭建属于自己的网站赚钱如何搭建属于自己网站平台属于自己组件库

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98948.html

关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
【手牵手】搭建前端组件库（一）

摘要：手牵手搭建前端组件库本文梳理如何搭建和构建前端组件库了解几个问题为何需要组件化大部分项目起源都是源于业务方的各种各样的奇葩需求。作者是否私有，需要修改为才能发布到开源协议参考配置添加文件发布时，只有编译后的目录才需要被发布。手牵手搭建前端组件库本文梳理如何搭建和构建前端组件库. showImg(https://segmentfault.com/img/bVboZDt?w=1200&...

waltr 2019-08-23 15:30 评论0 收藏0
【手牵手】搭建前端组件库（一）

摘要：手牵手搭建前端组件库本文梳理如何搭建和构建前端组件库了解几个问题为何需要组件化大部分项目起源都是源于业务方的各种各样的奇葩需求。作者是否私有，需要修改为才能发布到开源协议参考配置添加文件发布时，只有编译后的目录才需要被发布。手牵手搭建前端组件库本文梳理如何搭建和构建前端组件库. showImg(https://segmentfault.com/img/bVboZDt?w=1200&...

forrest23 2019-08-02 14:19 评论0 收藏0