聽說vue項目不用build也能用?

引言

人們經常說 Vue JS 或 React 是多麼簡單，甚至微不足道。嗯... 我不同意。它們不簡單。畢竟，它們被廣泛用于建構大規模的、通常是關鍵任務的系統。除了這些過于樂觀的課程，還有很多東西需要學習。它們的生态系統是巨大的。工具要求很高。文檔非常豐富。發現和了解最佳實踐和高效的設計模式需要付出大量的努力。

那麼他們的吸引力是什麼呢？對我來說，這是他們進步性。隻有在必要的時候，複雜性才會逐漸引入項目。我可以從簡單的 JavaScript 開始，有一些先決條件，不需要複雜的建構設定。然後，随着需求的增長，我開始添加新的概念，并學習如何使用它們。諸如子產品、元件、路由、狀态管理、狀态傳播、異步代碼、響應式、伺服器端呈現之類的東西最終都會出現在圖檔中。但隻有當他們的時間到來，隻有當我準備好了他們！

這篇文章的源代碼可以在 https://bitbucket.org/letsdebugit/minimalistic-vue 中找到，你可以在這裡運作示例應用程式。

簡單項目的簡單工具

當我開始一個新項目時，簡單開始是至關重要的。這個職業的認知負擔已經夠重的了。我不需要更多了，除非真的需要。同樣重要的是，隻要應用程式保持簡單，項目設定就保持簡單。對于許多項目來說，我所需要的隻是一個網頁背後的小小的智能引擎。一些可以連接配接照片庫的東西。可以從外部源擷取更新并保持 UI 同步。為什麼我要為此而引入typescript和webpack呢？但是 Vanilla JS 的成本很高。我喜歡擁有諸如狀态管理、響應式和資料綁定之類的東西。它們節省了很多時間，并且有助于建構一個一緻的使用者界面。幸運的是，這在進步的 web 架構中是可能的。在下面的示例中，我想展示如何以最簡單的方式介紹 Vue JS 并享受其功能。

應用程式設計

下面的例子是一個小小的單頁網頁應用程式。它有一個頁眉，内容區域和頁腳。在内容區域有一條消息和一個按鈕。當使用者點選按鈕時，消息會發生變化:

作為一個謹慎的程式員，我希望從一開始就正确地構造應用程式。在使用者界面中有以下元素:

header
main area
footer

我希望将每個元件定義為一個單獨的元件。我希望将他們的代碼放在單獨的子產品中，以便于識别和使用。

在一個典型的 Vue JS 設定中，您将使用.vue 的單元件檔案。不幸的是，這需要一個基于 webpack、 rollup 等的建構過程。事實證明，您可以在不使用任何建構過程的情況下獲得幾乎相同的體驗！它可能不像原來的協定那麼全面，但是對于許多簡單的場景來說還是不錯的。更重要的是，它沒有正常建構過程和 CLI 工具引入的複雜性和依賴性。

工程項目結構

該項目的結構如下:

index.html
index.js
index.css
header/
    header.js
    header.css
content/
    content.js
    content.css
footer/
    footer.js
    footer.css

複制

我們的邏輯 UI 元件清楚地反映在項目的目錄結構中。

自力更生

當浏覽器加載 index. html 時，會發生以下情況:

Vue JS 庫是從 CDN 庫中擷取的https://unpkg.com/vue
擷取元件樣式
應用程式子產品從 index.js 導出然後被執行

注意我們是如何使用 < script type = " module" > 來告訴浏覽器我們正在加載所有花裡胡哨的現代 ES6 代碼！

當執行 index.js 時，它會導入包含我們的元件的後續子產品:

Content from 内容來自/content/content.js
Header from 标題來自/header/header.js
Footer from 的頁腳/footer/footer.js

複制

這些元件與正常的 Vue JS 單檔案元件沒有多大差別。它們可以擁有 Vue JS 元件的所有特性和功能，比如:

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

複制

因為沒有建構過程，我們的元件必須以不同的方式組合在一起。現代的 JavaScript 特性在這方面對我們有所幫助。與打包相反，我們可以在任何需要的地方

import

所需的依賴項。經過這麼多年不費腦筋的打包浏覽器終于知道如何導入子產品; 然後，我們将使用 JS 模闆文本代替template。

元件代碼的結構如下:

const template = `
  <div>
  ...
  </div>
`
export default {
  template,
  data () {
  },
  computed: {
  },
  // etc.
}

複制

主要的應用程式元件在 index.js 檔案中。它的任務是為所有元件配置設定定制的 HTML 标記，比如 < 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)
})

複制

然後使用這些自定義标記在 index. html 檔案中建構應用程式 UI。我們最終得到了一個簡單易懂的使用者界面:

<!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>

複制

路由選擇

一個不那麼瑣碎的應用程式通常會有一大堆視圖，使用者可以導航到這些視圖。事實證明，Vue 路由器在我們的設定中工作，沒有任何問題。您可以像定義任何其他元件一樣定義視圖或頁面，使用上面描述的相同方法。然後，不要将這些元件注冊為自定義标記，而是用标準的方式将它們連結到路由，例如:

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 中将路由器與應用程式一起初始化:

const router = new VueRouter({ routes })
const app = {
  el: 'main',
  router,
  ...
}

複制

現在，您可以通過輸入 URL、使用 < router-link > 元件或以程式設計方式導航到這兩個頁面。

最後，我們幾乎擁有了 Vue JS 的全部能力，而沒有任何建構過程的複雜性。要部署這個應用程式，我們隻需将檔案複制到一個 web 伺服器。然後隻希望我們的通路者會使用一個像樣的浏覽器。

最後

這篇文章也可以在作者

Tomasz Waraksa

的部落格 Let’s Debug It[1] 上找到。完整的源代碼可以在 google https://bitbucket.org/letsdebugit/minimalistic-vue 上找到。所有的榮譽和感謝都歸功于 Vue JS 架構的建立者。

參考資料

[1]Let’s Debug It: https://letsdebug.it/post/minimalistic-vue/