Vue 3 項(xiàng)目實(shí)戰(zhàn)總結(jié)
關(guān)注公眾號(hào)?前端人，回復(fù)“加群”
添加無(wú)廣告優(yōu)質(zhì)學(xué)習(xí)群
Vue 3 項(xiàng)目實(shí)戰(zhàn)總結(jié)
作為今年前端圈中最大的新聞之一，vue 3 的正式版的發(fā)布引起了幾乎所有前端 er 的圍觀。步入 2021 年，我開(kāi)始在項(xiàng)目中使用 vue 3 進(jìn)行開(kāi)發(fā)。以下是我使用 vue 3 一個(gè)月后的一些經(jīng)驗(yàn)總結(jié)以及看法。
開(kāi)發(fā)環(huán)境方面
一般我們使用 vue 3 都是使用 vue 官方的腳手架新建項(xiàng)目，要么是 vue-cli 或者 vite。考慮到 vite 是新出的東西，兼容性方面還有待檢測(cè)，于是我使用的是 vue-cli 來(lái)新建項(xiàng)目。
vue.config.js 的 externals 設(shè)置
作為一家小公司的前端工程師，我覺(jué)得 externals 這一個(gè)設(shè)置幾乎是整個(gè)開(kāi)發(fā)環(huán)境中最重要的東西。
首先簡(jiǎn)單介紹一下 externals 這個(gè)設(shè)置的作用。
Externals 是來(lái)自于 webpack 的配置項(xiàng)，主要作用是提供了「從輸出的 bundle 中排除依賴(lài)」的方法。簡(jiǎn)單舉個(gè)例子就是，假如有個(gè)幾個(gè)項(xiàng)目都使用到了 axios，那么如果不使用 externals，每個(gè)項(xiàng)目都會(huì)打包一份 axios 到 ventor 中。使用了 externals 之后，可以把 axios 進(jìn)行外部引入，而 axios 的庫(kù)文件可以用第三方 cdn 或者放到統(tǒng)一的 cdn 服務(wù)器上面。
配置方法十分簡(jiǎn)單：
const?externals?=?{
??jquery:?"jQuery",
};
module.exports?=?{
??configureWebpack:?(config)?=>?{
????Object.assign(config,?{
??????externals,
????});
??},
};
這里要打開(kāi) jquery.min.js 的查看 jquery 暴露的全局名稱(chēng)，jquery 的是 jQuery，然后在 index.html 中使用 script 引入就可以了：
<kbd id="afajh"><form id="afajh"></form></kbd> <strong id="afajh"><dl id="afajh"></dl></strong>
<del id="afajh"><form id="afajh"></form></del>
<th id="afajh"><progress id="afajh"></progress></th>
<b id="afajh"><abbr id="afajh"></abbr></b>
<th id="afajh"><progress id="afajh"></progress></th>