成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

MoAir / 2404人閱讀

摘要：但是總會(huì)有一些功能是開(kāi)源組件庫(kù)覆蓋不了的，這就需要我們自己手動(dòng)去開(kāi)發(fā)組件，但是這些組件有可能會(huì)被團(tuán)隊(duì)內(nèi)多個(gè)項(xiàng)目用到，怎么才能在多個(gè)項(xiàng)目中共享這些組件，這里就需要我們搭建自己的組件庫(kù)，接下來(lái)我就講講自己的實(shí)踐。

我們?cè)谧鲰?xiàng)目的時(shí)候，通常會(huì)需要一些公用的基礎(chǔ)組件，比如dialog、alert、form、table等等，大多數(shù)情況下現(xiàn)在的開(kāi)源組件庫(kù)已經(jīng)能滿足我們的需要了，比如基于vue的element-ui、vant、iview等等。
但是總會(huì)有一些功能是開(kāi)源組件庫(kù)覆蓋不了的，這就需要我們自己手動(dòng)去開(kāi)發(fā)組件，但是這些組件有可能會(huì)被團(tuán)隊(duì)內(nèi)多個(gè)項(xiàng)目用到，怎么才能在多個(gè)項(xiàng)目中共享這些組件，這里就需要我們搭建自己的組件庫(kù)，接下來(lái)我就講講自己的實(shí)踐。
第一步：創(chuàng)建項(xiàng)目 
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（多帶帶文件），大家可根據(jù)自己的使用習(xí)慣自行選擇。

第二步：將文件夾src修改為examples，然后在根目錄新增文件夾packages 第三步：根目錄新增vue.config.js

chain-webpack的文檔

module.exports = {
    // 修改默認(rèn)的入口
    pages: {
        index: {
            entry: "examples/main.js",
            template: "public/index.html",
            filename: "index.html"
        }
    },
    chainWebpack: config => {
        // vue默認(rèn)@指向src目錄，這里要修正為examples，另外新增一個(gè)~指向packages
        config.resolve.alias
            .set("@", path.resolve("examples"))
            .set("~", path.resolve("packages"));
        // lib目錄是組件庫(kù)最終打包好存放的地方，不需要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 => {
                // 修改它的選項(xiàng)...
                return options;
            });
    }
};
第四步：創(chuàng)建測(cè)試組件

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);
    });
};
//  全局引用可自動(dòng)安裝
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，添加好忽略文件，打包發(fā)布 
npm run lib
npm publish 
我們就發(fā)布了自己的組件庫(kù)，但是一個(gè)完整的組件庫(kù)還包含文檔、單元測(cè)試、按需加載等功能，這些我會(huì)在后續(xù)的文章中將我的實(shí)踐列出來(lái)
如有不足之處，還望大家指出

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/98948.html

相關(guān)文章

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

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

    sutaking 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

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

    khs1994 評(píng)論0 收藏0

  • 【手牽手】搭建前端組件庫(kù)（一）

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

    waltr 評(píng)論0 收藏0

  • 【手牽手】搭建前端組件庫(kù)（一）

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

    forrest23 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<