Vue 原型
比方说，有一天，您一觉醒来，对某个组件产生了一个好主意，或者参与了一个大型项目，并且您希望在不存在现有项目复杂的相互依赖关系的情况下调试组件。 Vue 原型设计可以帮助您创建新组件或调试现有组件，甚至对于大型项目也是如此。 这是通过直接在单独且隔离的编译器中运行 .vue 文件来完成的，无需任何本地依赖项。以这种方式运行 .vue 文件可能会节省时间，因为您不需要如练习 3.01 中所述安装完整的 Vue 项目。相反，您需要做的就是通过运行以下命令全局安装 Vue CLI 服务：npm install -g @vue/cli-service-global 或 yarn global add @vue/cli-service-global。
安装后，您将可以访问以下两个命令：
-
vue serve – 此命令编译 Vue.js 代码并在浏览器的本地主机环境中运行。
-
vue build – 该命令将 Vue.js 代码编译成可分发包。
原型设计入门
首先，您首先需要打开命令终端并运行以下安装命令来安装全局包：
npm install -g @vue/cli-service-global
# or
yarn global add @vue/cli-service-global这将生成以下屏幕截图：
安装可能需要几分钟时间，具体取决于您的互联网连接。您将知道它何时完成，因为您将能够在终端中编写其它命令。如果由于某种原因安装失败，只需重新打开终端并运行相同的命令即可。
要开始使用原型，请创建一个名为 helloWorld.vue 的示例组件：
// helloWorld.vue
<template>
<h1>Hello World!</h1>
</template>在终端窗口中（与新的 .vue 文件位于同一目录中），使用以下命令：
vue serve helloWorld.vue上述命令将显示如下：
运行 serve 命令后，组件将在终端窗口中编译一段时间，然后才能在浏览器中访问，如下所示：
编译完成后，使用浏览器导航到命令窗口中指定的 localhost URL。在这里，它是 http://localhost:8080/ 。在您的浏览器中，您应该看到文本 Hello World!：
Hello World!我们现在已经学会了如何动态构建 Vue 组件原型，而无需创建完整的 webpack 项目。 让我们看看如何导入字体或库以在原型中使用。
定义你自己的入口点
在原型中，您可能需要使用外部库（例如字体或脚本）来完成原型组件。 index.html 文件是 Vue.js HTML 模板的入口点。 如果未定义 index.html 文件，则使用全局默认文件。
要定义自定义入口点，请在同一目录中创建一个 index.html 文件。 使用从默认索引页派生的以下代码，您将看到 Google 字体已添加到 <head> 标记中：
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Hello World</title>
<link ref="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div id="app"></div>
</body>
</html>要在原型组件中使用此字体，请在与 index.html 文件相同的目录中创建一个 helloWorld.vue 组件，然后向该组件应用一些 css 样式：
// helloWorld.vue
<template>
<h1>Hello World!</h1>
</template>
<style>
h1 {
font-family: 'Roboto';
}
</style>要查看对这些文件所做的更改，请在终端中运行以下命令：
vue serve helloWorld.vue这将生成以下屏幕截图：
运行 serve 命令后，组件将在终端窗口中编译一段时间，然后才能在浏览器中访问，如下所示：
在浏览器中打开本地主机 URL。您应该在预览中看到使用新字体的格式化文本。输出如下：
Hello World!我们现在已经学会了如何在 Vue 组件原型中包含外部库，而无需创建完整的 webpack 项目。接下来，我们将了解如何构建准备在网站上托管或由您的团队在外部预览的原型。
构建生产原型
当您完成原型制作并希望与团队中的其它人共享或提交以供技术主管审核时，您可以将代码导出为可分发文件。 这意味着您的代码可以在其它计算机上运行或托管在外部服务器上，而不需要 Vue CLI 来运行它（也称为 vue serve 命令）。
使用前面的示例文件来执行此操作，打开命令终端，导航到包含 Vue 原型的文件夹，然后运行 vue build helloWorld.vue 命令。 这将生成如下输出：
将创建一个 dist 文件夹，其中包含原型的编译版本，您可以将其上传到网络主机。在 dist 文件夹内，您可以看到以下文件：
-
index.html 文件
-
/css 文件夹
-
/js 文件夹
所有这些文件对于正确运行编译的原型都是必需的。 如果双击 index.html 文件，它不会加载您的应用程序。 要在本地计算机上查看或提供可分发文件，您将需要可以为静态站点或单页应用程序提供服务的库的帮助。为此目的构建了一个名为 serve 的 npm 包。
要为您的 dist 文件夹提供服务，请打开命令终端并使用以下命令来全局安装服务包：
npm install -g serve
# or
yarn global add serve服务命令的工作原理是允许您指定要提供服务的目录或文件：
serve [path/to/serve]在命令终端中，确保您位于 Vue 原型 dist 文件夹所在的根目录中。 要为位于此文件夹目录中的 dist 文件夹提供服务，请运行以下命令：
serve dist上述命令将显示如下输出：
导航到 http://localhost:5000 ，您将看到原型项目，如以下输出所示：
Hello World!我们现在已经学习了如何构建可以托管在网站上的 Vue 组件原型，以及如何在本地预览构建的文件。 现在，我们将在下一个练习中看到这些 Vue 原型设计概念。
练习 3.02：使用 Vue CLI 进行即时原型设计
在本练习中，您将创建一个动态使用 Vue 双向数据绑定的 Vue 组件。 使用即时原型可以快速利用 Vue 语法，并具有热重载的额外好处。
要访问本练习的代码文件，请参阅 https://packt.live/35kZrd3 。
-
在练习 3.02 文件夹中，创建一个名为 prototype.vue 的文件。
-
打开此文件夹内的命令行终端并使用 vue serve prototype.vue 命令。
-
在 VS Code 中使用 Vetur，编写 vue，然后点击 Tab 按钮立即创建 Vue 组件结构：
<template> </template> <script> export default { } </script> <style> </style> -
使用字符串值 Prototype Vue Component 创建一个名为 header 的数据属性，然后将其包裹在模板中的 h1 标签周围。在浏览器中 localhost:8080 查看结果：
<template> <h1>{{ heading }}</h1> </template> <script> export default { data() { return { heading: "Prototype Vue Component" } } } </script> <style> h1 { font-family: Arial, Helvetica, sans-serif; } </style>前面的代码将显示如以下输出所示：
Prototype Vue Component要构建此组件用于生产，请运行 vue build prototype.vue 命令。 运行此命令后，您将在与原型组件相同的目录中生成一个 dist 文件夹，如图 3.12 所示：
Figure 8. Figure 3.12: The final output for this exercise contains a /dist folder -
构建可分发文件后，在命令终端中运行 serve dist。然后，在浏览器中导航到终端中指定的本地主机 URL。您将能够查看您构建的原型，如下所示：
Prototype Vue Component
在本练习中，您了解了如何通过命令行运行原型 Vue 组件，而无需安装完整的全新项目。 您还了解了如何将新原型构建到可分发文件中，然后提供它。接下来，我们将了解如何使用 Vue-UI 来启动和运行 Vue 应用程序。