国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

基于@vue/cli 3搭建屬于自己的組件庫(1)

MoAir / 2368人閱讀

摘要：但是總會有一些功能是開源組件庫覆蓋不了的，這就需要我們自己手動去開發組件，但是這些組件有可能會被團隊內多個項目用到，怎么才能在多個項目中共享這些組件，這里就需要我們搭建自己的組件庫，接下來我就講講自己的實踐。

我們在做項目的時候，通常會需要一些公用的基礎組件，比如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 
我們就發布了自己的組件庫，但是一個完整的組件庫還包含文檔、單元測試、按需加載等功能，這些我會在后續的文章中將我的實踐列出來
如有不足之處，還望大家指出

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98948.html

相關文章

  • 關于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    sutaking 評論0 收藏0

  • 關于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    khs1994 評論0 收藏0

  • 【手牽手】搭建前端組件庫（一）

    摘要：手牽手搭建前端組件庫本文梳理如何搭建和構建前端組件庫了解幾個問題為何需要組件化大部分項目起源都是源于業務方的各種各樣的奇葩需求。作者是否私有，需要修改為才能發布到開源協議參考配置添加文件發布時，只有編譯后的目錄才需要被發布。 手牽手搭建前端組件庫 本文梳理如何搭建和構建前端組件庫. showImg(https://segmentfault.com/img/bVboZDt?w=1200&...

    waltr 評論0 收藏0

  • 【手牽手】搭建前端組件庫（一）

    摘要：手牽手搭建前端組件庫本文梳理如何搭建和構建前端組件庫了解幾個問題為何需要組件化大部分項目起源都是源于業務方的各種各樣的奇葩需求。作者是否私有，需要修改為才能發布到開源協議參考配置添加文件發布時，只有編譯后的目錄才需要被發布。 手牽手搭建前端組件庫 本文梳理如何搭建和構建前端組件庫. showImg(https://segmentfault.com/img/bVboZDt?w=1200&...

    forrest23 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<