文章來源于公眾號:小丑的小屋
人們經(jīng)常說 Vue JS 或 React 是多么簡單,甚至微不足道。嗯... 我不同意。它們不簡單。畢竟,它們被廣泛用于構(gòu)建大規(guī)模的、通常是關(guān)鍵任務(wù)的系統(tǒng)。除了這些過于樂觀的課程,還有很多東西需要學(xué)習(xí)。它們的生態(tài)系統(tǒng)是巨大的。工具要求很高。文檔非常豐富。發(fā)現(xiàn)和理解最佳實(shí)踐和高效的設(shè)計(jì)模式需要付出大量的努力。
那么他們的吸引力是什么呢?對我來說,這是他們進(jìn)步性。只有在必要的時(shí)候,復(fù)雜性才會逐漸引入項(xiàng)目。我可以從簡單的 JavaScript 開始,有一些先決條件,不需要復(fù)雜的構(gòu)建設(shè)置。然后,隨著需求的增長,我開始添加新的概念,并學(xué)習(xí)如何使用它們。諸如模塊、組件、路由、狀態(tài)管理、狀態(tài)傳播、異步代碼、響應(yīng)式、服務(wù)器端呈現(xiàn)之類的東西最終都會出現(xiàn)在圖片中。但只有當(dāng)他們的時(shí)間到來,只有當(dāng)我準(zhǔn)備好了他們!
這篇文章的源代碼可以在 bitbucket.org/letsdebugit/minimalistic-vue 中找到,你可以在這里運(yùn)行示例應(yīng)用程序。
簡單項(xiàng)目的簡單工具
當(dāng)我開始一個(gè)新項(xiàng)目時(shí),簡單開始是至關(guān)重要的。這個(gè)職業(yè)的認(rèn)知負(fù)擔(dān)已經(jīng)夠重的了。我不需要更多了,除非真的需要。同樣重要的是,只要應(yīng)用程序保持簡單,項(xiàng)目設(shè)置就保持簡單。對于許多項(xiàng)目來說,我所需要的只是一個(gè)網(wǎng)頁背后的小小的智能引擎。一些可以連接照片庫的東西??梢詮耐獠吭传@取更新并保持 UI 同步。為什么我要為此而引入 TypeScript 和 webpack 呢?但是 Vanilla JS 的成本很高。我喜歡擁有諸如狀態(tài)管理、響應(yīng)式和數(shù)據(jù)綁定之類的東西。它們節(jié)省了很多時(shí)間,并且有助于構(gòu)建一個(gè)一致的用戶界面。幸運(yùn)的是,這在進(jìn)步的 web 框架中是可能的。在下面的示例中,我想展示如何以最簡單的方式介紹 Vue JS 并享受其功能。
應(yīng)用程序設(shè)計(jì)
下面的例子是一個(gè)小小的單頁網(wǎng)頁應(yīng)用程序。它有一個(gè)頁眉,內(nèi)容區(qū)域和頁腳。在內(nèi)容區(qū)域有一條消息和一個(gè)按鈕。當(dāng)用戶點(diǎn)擊按鈕時(shí),消息會發(fā)生變化:
作為一個(gè)謹(jǐn)慎的程序員,我希望從一開始就正確地構(gòu)造應(yīng)用程序。在用戶界面中有以下元素:
- header
- main area
- footer
我希望將每個(gè)組件定義為一個(gè)單獨(dú)的組件。我希望將他們的代碼放在單獨(dú)的模塊中,以便于識別和使用。
在一個(gè)典型的 Vue JS 設(shè)置中,您將使用 .vue 的單組件文件。不幸的是,這需要一個(gè)基于 webpack、 rollup 等的構(gòu)建過程。事實(shí)證明,您可以在不使用任何構(gòu)建過程的情況下獲得幾乎相同的體驗(yàn)!它可能不像原來的協(xié)議那么全面,但是對于許多簡單的場景來說還是不錯(cuò)的。更重要的是,它沒有常規(guī)構(gòu)建過程和 CLI 工具引入的復(fù)雜性和依賴性。
工程項(xiàng)目結(jié)構(gòu)
該項(xiàng)目的結(jié)構(gòu)如下:
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ā)生以下情況:
- Vue JS 庫是從 CDN 庫中獲取的 unpkg.com/vue
- 獲取組件樣式
- 應(yīng)用程序模塊從 index.js 導(dǎo)出然后被執(zhí)行
注意我們是如何使用 < script type = " module" & 來告訴瀏覽器我們正在加載所有花里胡哨的現(xiàn)代 ES6 代碼!
當(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
這些組件與常規(guī)的 Vue JS 單文件組件沒有多大區(qū)別。它們可以擁有 Vue JS 組件的所有特性和功能,比如:
data
props
methods
computed
lifecycle events
slots
template with markup
etc.
因?yàn)闆]有構(gòu)建過程,我們的組件必須以不同的方式組合在一起?,F(xiàn)代的 JavaScript 特性在這方面對我們有所幫助。與打包相反,我們可以在任何需要的地方import
所需的依賴項(xiàng)。經(jīng)過這么多年不費(fèi)腦筋的打包瀏覽器終于知道如何導(dǎo)入模塊; 然后,我們將使用 JS 模板文本代替template。
組件代碼的結(jié)構(gòu)如下:
const template = `
<div>
...
</div>
`
export default {
template,
data () {
},
computed: {
},
// etc.
}
主要的應(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 App = {
el: 'main',
components: {
'app-header': Header,
'app-content': Content,
'app-footer': Footer
}
}
window.addEventListener('load', () => {
new Vue(App)
})
然后使用這些自定義標(biāo)記在 index. html 文件中構(gòu)建應(yīng)用程序 UI。我們最終得到了一個(gè)簡單易懂的用戶界面:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Minimalistic Vue JS</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">
</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>
路由選擇
一個(gè)不那么瑣碎的應(yīng)用程序通常會有一大堆視圖,用戶可以導(dǎo)航到這些視圖。事實(shí)證明,Vue 路由器在我們的設(shè)置中工作,沒有任何問題。您可以像定義任何其他組件一樣定義視圖或頁面,使用上面描述的相同方法。然后,不要將這些組件注冊為自定義標(biāo)記,而是用標(biāo)準(zhǔn)的方式將它們鏈接到路由,例如:
import Home from './home/home.js'
import About from './about/about.js'
export default [
{
name: 'home',
path: '/',
component: Home
},
{
name: 'about',
path: '/about',
component: About
}
]
然后獲取 Vue Router 庫并在 index. html 中添加路由器占位符:
<head>
...
<script src="https://unpkg.com/vue-router">
</script>
</head>
<body>
...
<router-view>
</router-view>
...
</body>
最后,在 index.js 中將路由器與應(yīng)用程序一起初始化:
const router = new VueRouter({ routes })
const app = {
el: 'main',
router,
...
}
現(xiàn)在,您可以通過輸入 URL、使用 < router-link > 組件或以編程方式導(dǎo)航到這兩個(gè)頁面。
最后,我們幾乎擁有了 Vue JS 的全部能力,而沒有任何構(gòu)建過程的復(fù)雜性。要部署這個(gè)應(yīng)用程序,我們只需將文件復(fù)制到一個(gè) web 服務(wù)器。然后只希望我們的訪問者會使用一個(gè)像樣的瀏覽器。
最后
這篇文章也可以在作者Tomasz Waraksa的博客 Let’s Debug It 上找到。完整的源代碼可以在 google bitbucket.org/letsdebugit/minimalistic-vue 上找到。所有的榮譽(yù)和感謝都?xì)w功于 Vue JS 框架的創(chuàng)建者。
以上就是W3Cschool編程獅
關(guān)于聽說vue項(xiàng)目不用build也能用?的相關(guān)介紹了,希望對大家有所幫助。