Vue.js 入门

在上一章中，我们已经看到了在项目中应用和安装 Vue.js 的几种方法。在本文中，我们将了解如何检查 Vue.js 的版本、在项目中使用 Vue.js 的优缺点、第一个示例以及与该示例相关的所有一般要点的说明。

使用 Vue.js 的优势

Vue.js 是用于 Web 开发和构建单页应用程序的最新软件技术之一。顾名思义，它主要用于项目的 UI 或视图端。它是一个基于 JavaScript 的框架，由 Evan You（前 Google 员工，当时正在研究 Angular）开发，用于使用 JavaScript 构建丰富的客户端应用程序。让我们看看在项目中使用 Vue.js 的优势

以下是使用 Vue.js 的优势列表

体积非常小

Vue.js 最大的优点之一是它体积很小。JavaScript 框架的成功很大程度上取决于其大小，而这个令人兴奋的 JavaScript 插件只有 18-21KB，因此您可以很快地下载并使用它。

易于理解和编码

Vue.js 框架结构非常简单，易于理解。这也是该框架受欢迎的原因之一。如果您熟悉 HTML 和 JavaScript，您就可以轻松地在 Vue.js 中进行编码。用户可以轻松地将 Vue.js 添加到他们的 Web 项目中，因为它结构简单，可以开发应用程序。

与现有应用程序的简单集成

Vue.js 具有许多适用于所有内容的组件，可以非常快地与现有应用程序集成。您可以将其与任何用 JavaScript 编写的应用程序集成。

本质上是灵活的

Vue.js 的灵活性也使其易于 React.js、Angular.js 和任何其他新的 JavaScript 框架的开发人员理解。它提供了很多灵活性来使用虚拟节点编写 HTML 文件、JavaScript 文件和纯 JavaScript 文件。

组成部分

您可以在 Vue.js 应用程序中创建可重用的自定义元素。

简单、全面且详细的文档

Vue.js 提供了非常简单、全面和详细的文档，因此对 HTML 和 JavaScript 了解甚少的人可以使用它进行编码。

虚拟 DOM

Vue.js 使用虚拟 DOM，类似于其他现有框架，如 ReactJS、Ember 等。虚拟 DOM 是原始 HTML DOM 的轻量级内存树表示，并且在不影响初始 DOM 的情况下进行更新。

双向通信

Vue.js 通过其 MVVM 架构提供双向通信，这使得它非常容易处理 HTML 块。

使用 Vue.js 的公司

Vue.js 已经开始日益流行，因为著名的公司已经开始在现实中使用它。有一些公司正在现实场景中成功地使用 Vue.js。让我们看一些例子

Facebook： 最大的成功公司在他们的实际项目中使用 Vue.js 的是 Facebook。Facebook 正在使用此框架用于其新闻推送的营销方面。

Adobe： Adobe 正在为其名为 Portfolio 的产品使用 Vue.js。通过使用 Vue.js 框架的简单集成优势，该公司已经将其现有的代码库迁移到 Vue。

小米： 小米也正在使用 Vue.js 来构建其产品目录，为用户提供响应式体验。

阿里巴巴： 中国最大的上市公司之一使用了 Vue.js。

一些其他在项目中使用 Vue.js 的著名公司有

• Grammarly
• Netflix
• Laracast
• Behance
• Gitlab
• Euronews
• Codeship
• Livestorm
• Wizzair 等。

检查您安装的 Vue.js 的版本

如果您已经熟悉 Node.js 并且已经在您的系统上 安装了 Vue.js CLI，则可以使用以下命令在您的 Node.js 命令提示符下检查您安装的 Vue.js 的版本

• 打开 Node.js 命令提示符并运行以下命令

• 如果它响应良好，请继续执行下一步以创建您的新项目。在上面的示例中，您可以看到 Vue.js 版本 2.9.6 已成功安装。现在，运行以下命令创建一个新项目

语法

• 运行 vue create myfirstapp 命令以创建一个名为

• 您已经看到 vue create 命令仅适用于 Vue CLI 3，并且您正在使用旧版本。现在，使用以下命令卸载旧版本并安装新版本。

• 您可以看到旧版本的 Vue.js 已被卸载。现在，安装新版本。

• 现在，已安装了新版本的 Vue CLI。您可以使用 vue --version 检查 Vue CLI 版本

• 您可以看到已安装最新的 Vue CLI 版本。现在，运行 vue create myfirstapp 命令创建一个名为

创建 Vue.js 第一个应用程序（使用 vue create 命令）

• 在 Node.js 命令提示符下运行 vue create myfirstapp 命令。

• 此过程可能需要一些时间。请等待，直到创建应用程序的过程完成。成功完成后，您将在命令行上收到一条消息，表明该项目已成功创建。

• 现在，通过执行以下命令转到您的应用程序的位置。

• 执行以下命令在浏览器上运行您的 Vue.js 应用程序。

• 在这里，您可以看到您的应用程序已成功编译，并且开发服务器已启动。复制本地地址并将其粘贴到您的 Google Chrome 浏览器上以打开该应用程序。

浏览 Vue 应用程序的文件夹结构

您已经在 Web 浏览器上执行了您的应用程序。现在，是时候探索您的项目的完整文件和文件夹了。您可以选择您选择的任何 IDE。在这里，我们选择了 Visual Studio Code IDE 来部署我们的应用程序。

打开 Visual Studio Code 并在 IDE 中加载您的项目。加载项目后，单击 public 文件夹以及 src 文件夹。这两个文件夹包含您项目最重要的文件。

Package.json： Package.json 文件夹包含您的应用程序的所有配置。您无需触摸该文件夹。

Index.html： 您的应用程序最重要的文件是 index.html 文件。它包含您的应用程序 UI 上显示的所有数据。这是 Vue 将用于附加 DOM 的唯一 div 元素。请参阅 index.html 文件

Src/main.js： main.js 是用于驱动您的应用程序的 main JavaScript 文件。

在 main.js 的上述代码中，第一行指定了 Vue 库的导入，第二行用于从 app.vue 导入 App 组件。productionTip 设置为 false 以避免在控制台中显示“您处于开发模式”的消息。之后，通过将其分配给 DOM 元素 #app 来创建 Vue 实例，该元素已在 index.html 文件中定义，并指定使用 App 组件。

Src/App.vue： App.vue 是一个单文件组件，其中包含三个部分：HTML、CSS 和 JAVASCRIPT。它用于管理您的应用程序的单文件组件。

Src/component/HelloWorldComponent： 此文件包含在 HelloWorld.vue 文件中。此文件包含当您在浏览器中打开您的应用程序时您看到的所有样式和 HTML。

此处使用 <style scoped> 属性将上述 CSS 限制为仅此组件。使用 <style scoped> 属性后，您的 CSS 不会泄漏到另一部分。

<script> 部分： 此部分以名称“HelloWorld”导出，将在输出中显示的数据存储在“msg”变量中。

这就是 Vue.js 应用程序的文件和文件夹结构。在开始在 Vue.js 中开发应用程序之前，了解这一点至关重要。