使用 Vue 创建无需任何 Node 模块的 SPA

在本指南中，我将向您展示如何使用 VueJS 和 ES6 模块创建静态单页应用程序。

我的一个朋友尝试使用 AWS Cloud9 构建他的 SPA，但由于 Cloud9 的工作方式，他发现使用 Node 很麻烦。我在工作时设计了一种完全不使用 Node 即可构建复杂 Web 应用程序的方法。我把这个知识传授给了他，他很快就接受了。

这个想法是，如果您愿意的话，您可以稍后使用可选的构建工具来构建“静态优先”的 Web 应用程序。

除了使用 Node 的模块系统，你也可以使用JavaScript 内置的模块系统。JavaScript 6 版本中已经提供了这个模块系统。

这允许您将文件原封不动地发送到浏览器。无需任何设置。您可以直接将 git 仓库克隆到 Apache 上的 /var/www/html 并开始开发。

您可以使用 Vanilla JavaScript，但我发现 Vue.js 可以完成我在中等复杂的应用程序中必须完成的繁重工作。

你需要一台服务器来托管你的静态文件。我推荐fenix。

您需要使用支持 ES6 的浏览器，例如 Opera。

您可以在此处查看最终代码。

我在使用这种方法时遇到了 Edge 的问题，但在准备应用程序跨浏览器运行时，Rollup.js 非常有用。

我正在构建一个可以自动执行这些步骤的 CLI。

步骤 1 - 创建 index.html 文件。

大多数情况下，您的 index.html 文件将保持不变，因为您的大部分工作都将在 JavaScript 中完成。

1. 创建一个项目文件夹，并随意命名。然后，将其部署到任何你希望的静态文件服务器中。
2. 在项目文件夹中，创建一个 index.html 文件。
3. 添加 html、head 和 body 标签，然后在 body 标签之间包含以下代码行：

<script type="module" src="main.js">

如果控制台出现 499 错误，您可以选择添加“crossorigin”。更多信息请参阅此论坛帖子。

1. 在刚刚编写的代码行上方添加以下内容：

<div id="app"></div>

您可以随意命名 id，只要它与我们将要创建的 Vue 实例匹配即可。

第 2 步 - 应用程序入口点和 Vue 集成。

Vue 可以作为 ES6 模块导入。所有组件都可以使用它。

您应该位于一个包含单个文件的目录中，即您刚刚创建的 index.html 文件。

1. 创建一个 main.js 文件。
2. 创建一个 vue.js 文件。
3. 进入这个cdn并选择vue.esm.browser.js
4. 将 JavaScript 代码复制并粘贴到您刚刚在项目中创建的 vue.js 文件中。
5. 转到 main.js 并输入以下代码：

import Vue from './vue.js'

或者，您可以这样做：

import Vue from 'https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.esm.browser.min.js'

感谢Github 上的Mohamed Safouan Besrour的建议和 Pull Request！

1. 紧接着这一行，添加 Vue 实例：

new Vue({
  el: '#app', // This should be the same as your <div id=""> from earlier.
  components: {
    'navbar': Navbar
  },
  template: MainTemplate
})

我们引用了两个外部文件：一个组件和一个模板。我们将同时导入这两个文件。“navbar”组件有自己的模板，它会自行导入，无需导入到 main.js 中。

这很重要，因为我们希望在组件化的应用程序中实践关注点分离。

步骤 3-添加模板。

对于我用这种方法构建的应用，我将所有模板保存在一个单独的文件夹结构中，该结构与组件文件夹结构相对应。您可以根据需要更改此结构。没有理由不能为每个组件提供包含模板和 .js 文件的文件夹。这与 Angular 的做法类似。

1. 创建一个 templates 目录。这应该是应用程序目录中唯一的子文件夹。
2. 创建一个名为 main-template.js 的文件
3. 添加以下代码：

// Note that these are backticks.

const MainTemplate = `
    <div>
    <navbar></navbar>
    All content will appear below the horizontal line.
    <hr>
    </div>
`

export { MainTemplate }

1. 在模板文件夹中，创建一个 navbar-template.js 文件。
2. 添加以下代码：

const NavbarTemplate = `<nav>

<a href="#/">Home</a>
<a href="#/about">About</a>

</nav>`

export { NavbarTemplate }

我们已经完成了模板的创建。

步骤 4-添加组件。

我们需要一个导航栏组件来附加我们的模板。

1. 在项目的根目录中，创建一个“components”目录。
2. 创建一个 navbar.js 文件。
3. 添加以下代码：

import { NavbarTemplate } from '../templates/navbar-template.js'

const Navbar = {
  template: NavbarTemplate,
}

export { Navbar }

1. 返回main.js

步骤 5-导入我们的组件。

我们几乎已经准备好查看我们的 Web 应用程序的第一个版本了。

1. 在 main.js 中，在 Vue 导入和 Vue 实例之间添加以下代码：

import {
  Navbar
} from './components/navbar.js'

import {
  MainTemplate
} from './templates/main-template.js'

1. 保存文件并在浏览器中查看你的 Web 应用程序。URL 取决于你的服务器设置。

我们有一个 Web 应用，可以选择将其转换为 SPA。我们现在就来做这件事。

步骤 6-添加路由。

我们需要导入 Vue Router。这是可选的，但它在路由方面帮你完成了大部分繁重的工作。

1. 导航到 vue-router CDN。似乎没有兼容 ES6 模块的版本，所以我们将导入为 CDN。
2. 复制链接，并将其作为依赖项添加到模块导入上方的 index.html 中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.2/vue-router.js"></script>

1. 返回main.js并添加以下代码：

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [{
    path: '/about',
    component: About,
    name: "About Us Page"
  }]
})

1. 在 Vue 实例中，在主模板上方添加“router”：

router,
template: MainTemplate

1. 创建一个about模板，一个about组件，然后将该组件导入到main.js中
2. 在 main-template.js 中的 hr 标签下方添加：

<router-view></router-view>

1. 查看您的应用主页，然后使用导航栏路由到关于页面。

添加新的组件和模板来扩展您的应用程序。

检查控制台。如果您看到任何错误，或者应用的渲染方式不符合您的预期，请检查您是否正确执行了上述步骤。如果仍然无法正常工作，请在文章下方留言。

该方法论的重点在于，开发 SPA 应用并不一定需要使用 Node 设置复杂的构建环境。我相信，随着模块开发者发布兼容 ES6 的软件版本，这种开发方式将变得更加可持续。

未来的博客文章将重点介绍如何使用 Rollup.js 打包此类应用程序以及设置 CI/CD。

我在 V2 编辑器中发现了另一个 bug。它会导致代码块结束后编号重置。请注意，我的编号现在在每个代码块关闭后都变成了 1。我会在 Twitter 上联系开发人员，告知他们这个 bug。

我希望这能帮助那些希望仅使用 HTML、CSS 和 JavaScript 构建复杂 Web 应用程序的人。

谢谢。