第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

【九月打卡】第1天 組件打包

標(biāo)簽:
Vue.js

课程名称:基于Vue3+Vite+TS,二次封装element-plus业务组件
课程章节:第8章 使用vuepress 编写组件文档
主讲老师:五月的夏天

课程内容:

今天学习的内容包括:
8-1 本章概述——组件库开发完成后如何提供给大家使用,这章学习打包,文档等。
8-2 实现组件的全量打包——全量打包可以理解为全量引入,打包后提供给别人引入使用。
8-3 单独打包每个组件实现按需引入——全量包一般比较大,为了更好的性能等,一般使用按需引用。

课程收获:

组件的全量打包

1、将原先开发的compontens、untils、style复制一份到packages文件夹下。
2、编写打包脚本build.js并打包。
3、在项目中引用并测试效果。

const { defineConfig, build } = require('vite')
lib: {
  entry: path.resolve(entryDir, name),
  name: 'index',
  fileName: 'index',
  formats: ['es', 'umd']
},

单独打包按需引入

1、因为全量包较大,在项目中有些使用不到,故加入单独打包进行按需引用提升代码质量。
2、使用node的fs.readdirSync(entryDir)进行读取packages文件夹下组件的数组。
3、循环生成单独的组件进行按需引用。

const fileStr = `{
    "name": "${name}",
    "main": "index.umd.js",
    "module": "index.es.js",
    "style": "style.css"
  }`
  //  输出
  fsExtra.outputFile(
    path.resolve(outDir, `${name}/package.json`),
    fileStr,
    'utf-8'
  )
import chooseIcon from '../lib/chooseIcon/index.mjs'
import '../lib/chooseIcon/style.css'
app.use(chooseIcon)

今天的学习遇到了不少问题,然后都解决了,上个月参与打卡学习收获满满,后面不打卡后便放任自己,不学习了,这个月打卡活动今天开始后,一方面可以约束自己每天都进行学习,还有奖品可以领取,非常好,感谢慕课网的活动。

下一步就是学习 发布组件库 了。今天学习就先到这里吧。

坚持打卡,坚持学习,未来可期,加油😀~

https://img2.sycdn.imooc.com/6315ff850001d3f719210890.jpg

https://img2.sycdn.imooc.com/6315ff9e000160d819040891.jpg

點(diǎn)擊查看更多內(nèi)容
TA 點(diǎn)贊

若覺得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評(píng)論
  • 收藏
  • 共同學(xué)習(xí),寫下你的評(píng)論
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消