聽(tīng)說(shuō)vue項(xiàng)目不用build也能用?

猿友 2020-09-16 14:38:29 瀏覽數(shù) (2571)

反饋

文章來(lái)源于公眾號(hào)：小丑的小屋

人們經(jīng)常說(shuō) Vue JS 或 React 是多么簡(jiǎn)單，甚至微不足道。嗯... 我不同意。它們不簡(jiǎn)單。畢竟，它們被廣泛用于構(gòu)建大規(guī)模的、通常是關(guān)鍵任務(wù)的系統(tǒng)。除了這些過(guò)于樂(lè)觀的課程，還有很多東西需要學(xué)習(xí)。它們的生態(tài)系統(tǒng)是巨大的。工具要求很高。文檔非常豐富。發(fā)現(xiàn)和理解最佳實(shí)踐和高效的設(shè)計(jì)模式需要付出大量的努力。

那么他們的吸引力是什么呢？對(duì)我來(lái)說(shuō)，這是他們進(jìn)步性。只有在必要的時(shí)候，復(fù)雜性才會(huì)逐漸引入項(xiàng)目。我可以從簡(jiǎn)單的 JavaScript 開(kāi)始，有一些先決條件，不需要復(fù)雜的構(gòu)建設(shè)置。然后，隨著需求的增長(zhǎng)，我開(kāi)始添加新的概念，并學(xué)習(xí)如何使用它們。諸如模塊、組件、路由、狀態(tài)管理、狀態(tài)傳播、異步代碼、響應(yīng)式、服務(wù)器端呈現(xiàn)之類(lèi)的東西最終都會(huì)出現(xiàn)在圖片中。但只有當(dāng)他們的時(shí)間到來(lái)，只有當(dāng)我準(zhǔn)備好了他們！

這篇文章的源代碼可以在 bitbucket.org/letsdebugit/minimalistic-vue 中找到，你可以在這里運(yùn)行示例應(yīng)用程序。

簡(jiǎn)單項(xiàng)目的簡(jiǎn)單工具

當(dāng)我開(kāi)始一個(gè)新項(xiàng)目時(shí)，簡(jiǎn)單開(kāi)始是至關(guān)重要的。這個(gè)職業(yè)的認(rèn)知負(fù)擔(dān)已經(jīng)夠重的了。我不需要更多了，除非真的需要。同樣重要的是，只要應(yīng)用程序保持簡(jiǎn)單，項(xiàng)目設(shè)置就保持簡(jiǎn)單。對(duì)于許多項(xiàng)目來(lái)說(shuō)，我所需要的只是一個(gè)網(wǎng)頁(yè)背后的小小的智能引擎。一些可以連接照片庫(kù)的東西?？梢詮耐獠吭传@取更新并保持 UI 同步。為什么我要為此而引入 TypeScript 和 webpack 呢？但是 Vanilla JS 的成本很高。我喜歡擁有諸如狀態(tài)管理、響應(yīng)式和數(shù)據(jù)綁定之類(lèi)的東西。它們節(jié)省了很多時(shí)間，并且有助于構(gòu)建一個(gè)一致的用戶(hù)界面。幸運(yùn)的是，這在進(jìn)步的 web 框架中是可能的。在下面的示例中，我想展示如何以最簡(jiǎn)單的方式介紹 Vue JS 并享受其功能。

應(yīng)用程序設(shè)計(jì)

下面的例子是一個(gè)小小的單頁(yè)網(wǎng)頁(yè)應(yīng)用程序。它有一個(gè)頁(yè)眉，內(nèi)容區(qū)域和頁(yè)腳。在內(nèi)容區(qū)域有一條消息和一個(gè)按鈕。當(dāng)用戶(hù)點(diǎn)擊按鈕時(shí)，消息會(huì)發(fā)生變化:

單頁(yè)網(wǎng)頁(yè)應(yīng)用程序

作為一個(gè)謹(jǐn)慎的程序員，我希望從一開(kāi)始就正確地構(gòu)造應(yīng)用程序。在用戶(hù)界面中有以下元素:

header
main area
footer

我希望將每個(gè)組件定義為一個(gè)單獨(dú)的組件。我希望將他們的代碼放在單獨(dú)的模塊中，以便于識(shí)別和使用。

在一個(gè)典型的 Vue JS 設(shè)置中，您將使用 .vue 的單組件文件。不幸的是，這需要一個(gè)基于 webpack、 rollup 等的構(gòu)建過(guò)程。事實(shí)證明，您可以在不使用任何構(gòu)建過(guò)程的情況下獲得幾乎相同的體驗(yàn)！它可能不像原來(lái)的協(xié)議那么全面，但是對(duì)于許多簡(jiǎn)單的場(chǎng)景來(lái)說(shuō)還是不錯(cuò)的。更重要的是，它沒(méi)有常規(guī)構(gòu)建過(guò)程和 CLI 工具引入的復(fù)雜性和依賴(lài)性。

工程項(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í)，會(huì)發(fā)生以下情況:

Vue JS 庫(kù)是從 CDN 庫(kù)中獲取的 unpkg.com/vue
獲取組件樣式
應(yīng)用程序模塊從 index.js 導(dǎo)出然后被執(zhí)行

注意我們是如何使用 < script type = " module" & 來(lái)告訴瀏覽器我們正在加載所有花里胡哨的現(xiàn)代 ES6 代碼！

當(dāng)執(zhí)行 index.js 時(shí)，它會(huì)導(dǎo)入包含我們的組件的后續(xù)模塊:

Content from 內(nèi)容來(lái)自/content/content.js
Header from 標(biāo)題來(lái)自/header/header.js
Footer from 的頁(yè)腳/footer/footer.js

這些組件與常規(guī)的 Vue JS 單文件組件沒(méi)有多大區(qū)別。它們可以擁有 Vue JS 組件的所有特性和功能，比如:

data
props
methods
computed
lifecycle events
slots
template with markup
etc.

因?yàn)闆](méi)有構(gòu)建過(guò)程，我們的組件必須以不同的方式組合在一起?，F(xiàn)代的 JavaScript 特性在這方面對(duì)我們有所幫助。與打包相反，我們可以在任何需要的地方import所需的依賴(lài)項(xiàng)。經(jīng)過(guò)這么多年不費(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è)簡(jiǎn)單易懂的用戶(hù)界面:

<!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)用程序通常會(huì)有一大堆視圖，用戶(hù)可以導(dǎo)航到這些視圖。事實(shí)證明，Vue 路由器在我們的設(shè)置中工作，沒(méi)有任何問(wèn)題。您可以像定義任何其他組件一樣定義視圖或頁(yè)面，使用上面描述的相同方法。然后，不要將這些組件注冊(cè)為自定義標(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 庫(kù)并在 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)在，您可以通過(guò)輸入 URL、使用 < router-link > 組件或以編程方式導(dǎo)航到這兩個(gè)頁(yè)面。

最后，我們幾乎擁有了 Vue JS 的全部能力，而沒(méi)有任何構(gòu)建過(guò)程的復(fù)雜性。要部署這個(gè)應(yīng)用程序，我們只需將文件復(fù)制到一個(gè) web 服務(wù)器。然后只希望我們的訪問(wèn)者會(huì)使用一個(gè)像樣的瀏覽器。

最后

這篇文章也可以在作者Tomasz Waraksa的博客 Let’s Debug It 上找到。完整的源代碼可以在 google bitbucket.org/letsdebugit/minimalistic-vue 上找到。所有的榮譽(yù)和感謝都?xì)w功于 Vue JS 框架的創(chuàng)建者。

以上就是W3Cschool編程獅關(guān)于聽(tīng)說(shuō)vue項(xiàng)目不用build也能用?的相關(guān)介紹了，希望對(duì)大家有所幫助。

HTML

0 人點(diǎn)贊