建站
咨詢
售后
建站咨詢
新聞中心
本Vue 3教程將介紹如何構(gòu)建一個(gè)簡(jiǎn)單的搜索模塊，該模塊使用文本輸入過濾數(shù)組中的文章。
也就是說，在創(chuàng)建這個(gè)Vue 3項(xiàng)目的過程中，我們需要使用Composition API構(gòu)建兩個(gè)組件。
我們的目標(biāo)是這樣的：
是不是很有意思呢？事不宜遲，讓我們開始編碼吧。
開始
我們可以有很多種方法將Vue 3添加到現(xiàn)有項(xiàng)目中，甚至可以自己創(chuàng)建一個(gè)Vue 3項(xiàng)目。
本教程將介紹我個(gè)人最喜歡的兩個(gè)途徑：
- Vue CLI
- Vite
Vue CLI
如果你以前做過Vue開發(fā)，那么一定知道如何使用Vue CLI來設(shè)置項(xiàng)目。
Vue CLI是Vue開發(fā)的命令行界面，是Vue生態(tài)系統(tǒng)的基準(zhǔn)。在本教程的示例中，我們將通過Vue CLI來創(chuàng)建一個(gè)Vue app。
首先，確保擁有最新版本的Vue CLI。我們可以通過運(yùn)行npm update -g @vue/cli終端來做到這一點(diǎn)。
接下來，為了創(chuàng)建項(xiàng)目，我們要運(yùn)行vue create
如果成功更新了CLI，那就可以選擇Vue3。
一旦我們選擇了Vue 3選項(xiàng)，就會(huì)構(gòu)建app了。完成構(gòu)建后，我們只需要進(jìn)入項(xiàng)目，然后運(yùn)行Vue app！其命令是：
cd
npm run serve
現(xiàn)在，如果我們?cè)跒g覽器中導(dǎo)航到http://localhost:8080/，就能看到app了！
完美！
那么另一個(gè)創(chuàng)建Vue 3項(xiàng)目的途徑是怎么做呢？
Vite
Vite是一個(gè)新的Vue 3構(gòu)建工具，它在開發(fā)過程中使用ES Module導(dǎo)入來提供代碼，而不是使用webpack等工具捆綁。
Vite由Vue的創(chuàng)建者構(gòu)建，它大大加快了開發(fā)速度，而且允許更快的熱重載和更高效的冷服務(wù)器啟動(dòng)。
Vite消除了僅按需編譯代碼（僅編譯現(xiàn)在影響當(dāng)前屏幕的代碼）的捆綁過程。這意味著你不必等待整個(gè)項(xiàng)目捆綁在一起即可開始開發(fā)。
由于捆綁大型項(xiàng)目可能需要很長(zhǎng)時(shí)間，因此Vite具有加快開發(fā)過程的巨大潛力。
為什么要使用Vue Vite？
現(xiàn)在你可能會(huì)問，“那么Vite與現(xiàn)有的vue-cli究竟有什么不同？
由于@vue-cli/service是建立在webpack之上的，因此它是一個(gè)模塊捆綁器，將在啟動(dòng)、熱重載和編譯時(shí)捆綁整個(gè)Vue項(xiàng)目。
而Vue Vite將在代碼中采用ES Import語法，讓瀏覽器解析導(dǎo)入并為每次導(dǎo)入發(fā)出HTTP請(qǐng)求。
Vue Vite在開發(fā)過程中提供比基于捆綁器這個(gè)解決方案更快的啟動(dòng)、熱重載和編譯速度。
當(dāng)然，通過HTTP請(qǐng)求處理導(dǎo)入可能會(huì)創(chuàng)建網(wǎng)絡(luò)瀑布并減慢速度。但由于這種方法僅適用于本地開發(fā)，因此這些差異一般可忽略不計(jì)。
此外，正如我們稍后將討論的那樣，Vite項(xiàng)目捆綁用于生產(chǎn)從而完全避免這方面問題，真的是輕而易舉。
創(chuàng)建第一個(gè)Vite項(xiàng)目
為了使用Vite，我們需要運(yùn)行
npm create vite@latest
然后，只需進(jìn)入項(xiàng)目文件夾，安裝依賴項(xiàng)，然后使用以下命令運(yùn)行app。
cd
npm install
npm run dev
現(xiàn)在，我們用瀏覽器打開http://localhost:3000，那么就可以看到以下app。
你應(yīng)該知道的一些Vue Vite功能
1. 捆綁項(xiàng)目進(jìn)行生產(chǎn)
Vite的目標(biāo)是使Vue的開發(fā)和生產(chǎn)盡可能簡(jiǎn)單。盡管在開發(fā)過程中沒有捆綁，但是要捆綁項(xiàng)目以進(jìn)行生產(chǎn)也非常容易。
你所要做的就是運(yùn)行npm run build。
如果我們查看package.json，那么就會(huì)發(fā)現(xiàn)這是在調(diào)用vite build——它和其他構(gòu)建過程一樣，將捆綁Vue項(xiàng)目并準(zhǔn)備dist文件夾來提供服務(wù)。
2. 管理網(wǎng)址
與其他Vue項(xiàng)目設(shè)置一樣，Vite提供了兩種引用資源的方式。
- 絕對(duì)路徑引用 – 使用公用文件夾。這些資源使用/_file.extension_引用，并將在構(gòu)建項(xiàng)目時(shí)復(fù)制到dist文件夾的根目錄。
- 相對(duì)路徑引用 – 例如，根據(jù)文件夾的文件結(jié)構(gòu)相對(duì)訪問src/assets文件夾中的文件。生成項(xiàng)目時(shí)，整個(gè)文件夾將作為_assets放置在dist文件夾中。
3. 內(nèi)置TypeScript支持
Vue 3最大的變化之一是使用TypeScript重寫了核心庫(kù)——允許根據(jù)IDE進(jìn)行類型檢查和更好的錯(cuò)誤消息。
Vue Vite也可以與Vue 3集成，為.ts文件和SFC中的TypeScript
上述代碼展示了我們?nèi)绾卧赩ue 3中使用“舊的”語法。
本教程接下來還將介紹如何在新的Composition API中執(zhí)行此操作，并確定Option API的更改。
Composition API中的響應(yīng)式數(shù)據(jù)
在SFC的腳本部分，我們首先從vue core庫(kù)導(dǎo)入一些東西，以便創(chuàng)建響應(yīng)式變量。
import { ref } from 'vue'然后，用如下所示的setup函數(shù)替換原來的data選項(xiàng)。
import { ref } from 'vue'
export default {
setup() {
return {}
},
}這個(gè)setup方法在創(chuàng)建組件時(shí)運(yùn)行，我們可以在其中定義想要組件使用的所有響應(yīng)式數(shù)據(jù)、計(jì)算屬性、方法等。
然后，setup方法返回的任何內(nèi)容都可以在模板中訪問！
使用ref創(chuàng)建響應(yīng)式數(shù)據(jù)
為了便于展示，我們先在模板中使用v-model創(chuàng)建一個(gè)文本輸入框。
Filter LearnVue Articles
{{ query }}
讓我們使用ref創(chuàng)建響應(yīng)式查詢變量，然后從setup方法返回。
export default {
setup() {
const query = ref('')
return {
query,
}
},
}好的，現(xiàn)在如果我們回到app，就可以看到使用Composition API的響應(yīng)式數(shù)據(jù)。
是不是很贊？
接下來，讓我們?cè)谳斎胫刑砑影粹o，看看如何在Composition API中創(chuàng)建方法。
Composition API中的方法
在Option API中，Vue對(duì)象有一個(gè)專用于方法的屬性。
對(duì)于較大的文件，這意味著數(shù)據(jù)可能與使用它的方法相距數(shù)百行，從而使組件更難閱讀和維護(hù)。
而Composition API，一切都放于setup方法中，這意味著我們可以根據(jù)功能組織代碼，甚至可以將共同特征提取到它們自己的代碼模塊中。
讓我們創(chuàng)建一個(gè)reset方法，該方法接受ref并將其設(shè)置為空字符串。
export default {
setup() {
const query = ref('')
const reset = (evt) => {
query.value = '' // clears the query
}
return {
reset,
query,
}
},
}需要注意的一件事是，我們需要調(diào)用query.value才能訪問數(shù)據(jù)的值。
為什么？
如果我們執(zhí)行console.log(query)，那么將看到它并不是一個(gè)字符串值，而是一個(gè)Proxy對(duì)象。Proxy中的陷阱使我們能夠輕松獲取數(shù)據(jù)，但這也恰恰就是為什么我們需要在ref調(diào)用.value的原因。
然后，就像在Option API中一樣，我們可以向模板添加按鈕，以便在單擊時(shí)調(diào)用此reset方法。
現(xiàn)在，當(dāng)我們使用新的輸入框代碼構(gòu)建應(yīng)用程序時(shí)，將如下所示。
為Vue 3項(xiàng)目添加第二個(gè)組件
有了輸入和查詢數(shù)據(jù)的組件，不妨實(shí)際創(chuàng)建一個(gè)results組件來顯示結(jié)果。
我們將其命名為SearchResults.vue。要將其添加到HelloWorld.vue代碼，首先必須導(dǎo)入，接著在導(dǎo)出默認(rèn)值中進(jìn)行聲明。
然后，我們可以像這樣將其添加到模板中。
Filter LearnVue Articles
那么怎么使用來自HelloWorld組件的查詢字符串呢？請(qǐng)繼續(xù)往下看。
傳遞props
Vue props允許父組件將數(shù)據(jù)傳遞給其子組件。這里我們希望將查詢字符串從HelloWorld.vue傳遞到SearchResults.vue。
我們可以通過在HelloWorld.vue內(nèi)的
超級(jí)簡(jiǎn)單吧！
訪問props
讓我們?cè)赟earchResults.vue中創(chuàng)建組件的主結(jié)構(gòu)代碼，并從JSON文件中導(dǎo)入所有文章信息。
import titles from "../post-data.json";
export default {
setup(props, context) {},
};
然后，我們需要幾個(gè)步驟來訪問props。
首先，必須在props選項(xiàng)中聲明，告訴組件我們期望什么prop以及執(zhí)行我們指定的prop驗(yàn)證。
export default {
props: {
query: String,
},
setup(props, context) {
// ...
},
}如果你仔細(xì)查看setup方法，你會(huì)發(fā)現(xiàn)它接受兩個(gè)參數(shù)。
- props – 包含傳遞給組件的所有參數(shù)
- context – 包含attrs、slots和emit。
我們將使用props在setup方法中訪問props的值。
我們需要做的就是使用計(jì)算屬性通過查詢屬性過濾文章列表。
計(jì)算屬性
與使用ref類似，也需要導(dǎo)入到項(xiàng)目中。
import { computed } from 'vue'然后像這樣設(shè)置它，其中的計(jì)算屬性接受getter方法。只要有依賴項(xiàng)更改，這個(gè)getter方法就會(huì)更新計(jì)算屬性。
import { computed } from 'vue'
import titles from '../post-data.json'
export default {
props: {
query: String,
},
setup(props, context) {
const filteredTitles = computed(() => {})
return {
filteredTitles,
}
},
}在上面的方法中，我們希望使用query prop過濾所有標(biāo)題。
再將所有內(nèi)容都轉(zhuǎn)換為小寫，那就不必?fù)?dān)心大小寫問題。
const filteredTitles = computed(() => {
return titles.filter((s) =>
s.Name.toLowerCase().includes(props.query.toLowerCase())
)
})到現(xiàn)在就快差不多了！
剩下要做的就是實(shí)際使用模板來顯示數(shù)據(jù)！下面的代碼使用了v-for循環(huán)：
Showing {{ filteredTitles.length }} results for "` query `"
{{ title.Name }}
就是這樣。
來看看最終的成果吧。
Vue 3項(xiàng)目中的生命周期鉤子
在開始使用Vue 3之前，還有一件要知道的事是如何使用Vue生命周期鉤子。
與Composition API的其他部分一樣，我們必須導(dǎo)入生命周期鉤子并在setup方法中進(jìn)行聲明，才能使用生命周期鉤子。
下面是如何使用生命周期鉤子的快速示例。
import { computed, onMounted } from 'vue'
export default {
setup() {
onMounted(() => {
console.log('mounted')
})
},
}總結(jié)
Vue 3有很多很酷的功能，對(duì)于創(chuàng)建可擴(kuò)展Vue app非常有用。看完本教程，有沒有興趣自己動(dòng)手試試看呢？
當(dāng)前名稱：十分鐘 Vite + Vue 3 項(xiàng)目實(shí)戰(zhàn)教程
分享路徑：http://fisionsoft.com.cn/article/dhhhpdp.html
