使用vue3.0,不需要build也可以
關(guān)于 Vue 2版本的原始文章可以在 https://letsdebug.it/post/minimalistic-Vue 網(wǎng)站上找到。下面我們將描述如何使用 Vue 3實(shí)現(xiàn)類似的設(shè)置
這篇文章的源代碼可以在 https://bitbucket.org/letsdebugit/minimalistic-vue-3中找到，你可以在這里運(yùn)行這個(gè)示例應(yīng)用程序
應(yīng)用程序設(shè)計(jì)
與 Vue 2的例子類似，我們將創(chuàng)建一個(gè)帶有頁眉、內(nèi)容區(qū)域和頁腳的單頁面 web 應(yīng)用程序。在內(nèi)容區(qū)域有一條消息和一個(gè)按鈕。當(dāng)用戶單擊按鈕時(shí)，消息將發(fā)生變化。UI 由定制 HTML 標(biāo)記表示的 Vue 組件構(gòu)成。
工程項(xiàng)目結(jié)構(gòu)
該項(xiàng)目的結(jié)構(gòu)與 Vue 2版本完全相同:
- index.html
- index.js
- index.css
- header/
- header.js
- header.css
- content/
- content.js
- content.css
- footer/
- footer.js
- footer.css
我們的邏輯 UI 組件清楚地反映在項(xiàng)目的目錄結(jié)構(gòu)中。在組件的代碼中有一些變化，如下所述。
自力更生
當(dāng)瀏覽器加載 index. html 時(shí)，會發(fā)生以下情況:
vue3.0庫是從 CDN 倉庫獲取的https://unpkg.com/vue@3.0.0-rc.8
獲取組件樣式
應(yīng)用程序模塊從index.js開始然后被執(zhí)行
請注意，在編寫 Vue 3的時(shí)候，Vue 3還沒有正式發(fā)布。因此，我們在這里使用最新的可用版本3.0.0-rc. 8。當(dāng)官方發(fā)布時(shí)，你將不得不相應(yīng)地改變 URL。
當(dāng)執(zhí)行 index.js 時(shí)，它導(dǎo)入并注冊包含我們的組件的后續(xù)模塊:
- Content from 內(nèi)容來自/content/content.js
- Header from 標(biāo)題來自/header/header.js
- Footer from 的頁腳/footer/footer.js
最后，它創(chuàng)建應(yīng)用程序?qū)嵗⑵鋻燧d到index.html內(nèi)的<main>標(biāo)記中。
組件
有了這個(gè)框架的新版本，我們可以利用新的函數(shù)式編程模型，也就是復(fù)合 API。我們將使用 setup()函數(shù)來代替數(shù)據(jù)、計(jì)算和方法部分，它將連接所有組件的內(nèi)部。為了確保數(shù)據(jù)傳播到 UI 并對更改做出反應(yīng)，我們將使用 composition api 提供的reactive 和 computed。
組件代碼的結(jié)構(gòu)如下:
- const template = `
- <div>
- ...
- </div>
- `
- export default {
- template,
- setup () {
- }
- }
作為一個(gè)例子，我們提供了 footer 組件，它在左邊顯示一些文本，在右邊顯示一個(gè)滴答作響的時(shí)鐘:
- const { reactive, computed } = Vue
- const template = `
- <footer>
- <div class="left">
- <slot></slot>
- </div>
- <div class="middle">
- </div>
- <div class="right">
- Current time: <b>{{ state.nowString }}</b>
- </div>
- </footer>
- `
- export default {
- template,
- setup () {
- const state = reactive({
- now: new Date(),
- nowString: computed(() => state.now.toTimeString().substr(0, 8))
- })
- window.setInterval(() => {
- state.now = new Date()
- }, 1000)
- return { state }
- }
- }
主要的應(yīng)用程序組件在 index.js 文件中。它的任務(wù)是為所有組件分配定制的 HTML 標(biāo)記，比如 < app-header > 或 < app-footer > 。
- import Header from './header/header.js'
- import Content from './content/content.js'
- import Footer from './footer/footer.js'
- const { createApp } = Vue
- const App = createApp({
- components: {
- 'app-header': Header,
- 'app-content': Content,
- 'app-footer': Footer
- }
- }
- window.addEventListener('load', () => {
- App.mount('main')
- })
然后使用這些自定義標(biāo)記在 index. html 文件中構(gòu)建應(yīng)用程序 UI。我們最終得到了一個(gè)簡單易懂的用戶界面:
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Minimalistic Vue 3</title>
- <link rel="stylesheet" href="index.css">
- <link rel="stylesheet" href="header/header.css">
- <link rel="stylesheet" href="content/content.css">
- <link rel="stylesheet" href="footer/footer.css">
- <script src="https://unpkg.com/vue@3.0.0-rc.8"></script>
- <script src="index.js" type="module"></script>
- </head>
- <body>
- <main>
- <app-header bg-color="#c5cae2">
- </app-header>
- <app-content>
- </app-content>
- <app-footer>
- (c) Tomasz Waraksa, Dublin, Ireland
- </app-footer>
- </main>
- </body>
- </html>
最后，我們幾乎擁有了 Vue 3的全部功能，包括了不起的 Composition API，而且沒有任何構(gòu)建過程的復(fù)雜性。要部署這個(gè)應(yīng)用程序，我們只需將文件復(fù)制到一個(gè) web 服務(wù)器。
