如何安装 Vue.JS 2019 – 第 1 部分

在本文中,我们回顾了 Vue.JS 在 Web 开发环境中的历史、使用、安装和实现。 Vue.js 是一个开源的 JavaScript 渐进式框架,主要用于构建用户界面和单个网页应用程序。

Vue.JS 到底是什么?
简史

与其他单体框架不同,Vue.JS 从一开始就被设计为可逐步采用。 它的核心库只专注于视图层,并且易于获取和与其他库集成。 Vue 还完全有能力为复杂的单页 Web 应用程序提供支持。

Vue.js 是由 Google 开发人员 Evan You 创建的,他在完成多个 Angular.js 项目后得出结论:

“我想,如果我可以提取我真正喜欢的关于 Angular 的部分并构建一些真正轻量级的东西会怎样。”

“电线之间|埃文你”. 电线之间。 2016 年 11 月 3 日。于 2017 年 6 月 3 日从原版存档

Vue 源代码提交的第一次出现可以追溯到 2013 年 7 月,正式发布是在 2014 年 2 月。

为什么使用 Vue.JS

  1. 因为 Vue 使用基于 HTML 的模板模式,它​​允许将网页 DOM 元素的呈现附加到底层 Vue 实例的数据。
  2. 所有 Vue 模板都使用可以被普通浏览器解释的有效 HTML。
  3. 最后,由于 Vue 是开源的,支持社区非常广泛。 因为用户社区很大,所以有一种快速的方法可以为您的 Vue 应用程序中可能遇到的错误找到解决方案。

一世在下图中,您可以看到“标准网站”的工作原理。

一种 从浏览器向服务器发出请求,服务器将数据发送回浏览器。 但是,如果您单击该站点上的另一个链接会发生什么?

这个循环是重复的,所以每次你点击一个链接:一个新的请求被发送到服务器,然后服务器将数据发送回浏览器并显示更新的内容。

这可以绕过吗?

是的,它可以 !!

使用 Vue 时数据的传输方式与上图相同,但只有一个 重大 改进。 在浏览器中加载站点后,页面上发出的所有其他请求都在 DOM 中完成. 这意味着使用 Vue 的每个请求都可以轻松到达所有其他元素。

Vue 将模板编译成虚拟文档对象模型或简称为“DOM”,这允许 Vue 在更新浏览器之前在其内存中呈现页面组件。 结合对平台(移动设备、平板电脑或桌面)做出反应的能力,Vue 可以计算出需要渲染的最少组件数量,然后在应用程序更改其状态时应用所需的最少操作量。 通过这种方式,Vue 使网站感觉更流畅,而不会增加复杂性。

在 Liquid Web 服务器上开始使用 Vue JS

需求还是依赖?

您可以在任何类型的服务器上使用 Vue.JS,但本教程主要关注使用带有 cPanel 的 CentOS 7 服务器。 正式来说,VueJS 工作不需要外部依赖项。

我如何使用 Vue?

就像将引导 css 导入 HTML 模板一样简单。

<html>

  <head>

    <title>Vue.js Basics</title>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">

</script>

  </head>

  <body>

    <h1>Vue Basics</h1>

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

    <script src="app.js"></script>

  </body>

</html>

通过 Softaculous 安装 Cpanel

通过以下方式登录到您的 cPanel 帐户 example.com/cpanel

向下滚动到 Softaculous 应用程序安装程序并单击它。

软科cPanel主屏幕

加载 Softaculous 页面后,单击左上角的搜索字段并输入 “维”

软AC2Softaculous主屏幕

接下来,单击“立即安装”按钮。

软AC3

单击立即安装按钮后,按照下一页上的步骤填写所需信息。

  • 从您要使用的下拉菜单中选择协议。
  • 从下拉菜单中选择要安装的域 – 选择 V​​ue.js (2.6.10) 的最新稳定版本
  • 选择要安装 Vue.js 库的目录
  • 点击安装
填写所需信息

结束 – 如果一切顺利并且安装过程中没有错误,您可以访问 example.com 和图像应该如下图所示,这意味着 Vue.JS 已正确安装。

安装了vue

命令行安装

Centos VPS 服务器的要求

为了能够通过命令行安装 Vue,有一些要求。

  1. Node.js(6.x – 8.x 首选)
  2. npm 版本 3.x+
  3. Git(它应该默认安装在新的 Cpanel 服务器上)
    1. 如果没有任何机会,您可以遵循此 KB 教程

如果没有安装 Node,l让我们从安装它开始。首先以 root 用户身份 SSH 到您的服务器

警告:始终信任并验证您从外部安装的命令 bash 来源。 运行一个 bash 来自恶意外部源(尤其是 root)的命令可能会导致不良影响,甚至包括数据丢失!

接下来,输入命令:

[root@host ~]# curl  -sL https://rpm.nodesource.com/setup_12.x | bash -

setup_12.x 上面 URL 中的部分表示我们将安装的 Node JS 包的版本。 可以在以下位置找到完整的版本列表
rpm.nodesource.com.

下载存储库后,我们可以使用以下命令安装 NodeJS:

[root@host ~]# yum install -y nodejs gcc-c++ make 

如果没有错误,我们可以使用以下命令检查安装的 NodeJS 的版本:

[root@host ~]# node --version 

另外,我们需要检查 NPM 版本

[root@host ~]# npm --version 

如果所有先决条件都符合要求,我们现在可以转到实际的 Vue CLI 安装。

要安装 Vue 2 CLI,命令如下。

[root@host ~]# npm install -g vue-cli 

输出应该类似于这个:

cli1

现在我们已经全局安装了 Vue,我们可以开始创建我们的项目了。

创建一个 Vue 2 项目

安装 Vue.JS 2 后,我们现在可以开始构建项目了。

由于我们已经以 root 用户身份通过​​ SSH 连接到我们的 VPS 服务器,我们可以通过 su’ 回到我们最初安装 vue 的本地 cPanel 帐户/用户来开始构建我们的项目。 让我们使用以下命令登录该用户:

[root@host ~]# su $user 

接下来,我们将导航到我们域的文档根文件夹; 主页/$user/public_html

[root@host ~]#cd /home/nnewell/public_html 

现在我们在文档根目录中,我们可以输入命令:

[root@host ~]# vue init webpack lwvue-project

输入命令后,我们将被问到以下问题:

项目名称:lwvue-project
(所有问题后按回车键继续)

项目描述:一个新的 Vue.js 项目

作者? 添加您的姓名(如果您选择作为所有者)

Vue 独立构建? 运行时 + 编译器:推荐给大多数用户

安装Vue路由器? 是的

使用 ESLint 对代码进行 lint? 是的

设置单元测试? 是的

选择测试运行器? 业力

使用 Nightwatch 设置 e2e 测试? 是的

我们应该跑吗 npm install 在项目创建后为您服务? (推荐)npm

完成设置完成设置

现在我们已经开始了我们的项目,我们需要旋转服务器进行开发,以便我们可以对其进行测试。

[root@host ~]# npm run dev 

默认情况下,这将在 https://localhost:8081 上启动服务器

为了制作我们的应用程序的生产版本,我们需要从我们的项目文件夹中运行以下命令

[root@host ~]# npm run build 

如果一切顺利,应该创建 /dist 文件夹,您基本上可以将所有文件从那里移动到我们的 /public_html 文件夹,因为 Vue 应用程序可以通过任何 HTTP 服务器提供服务。

就是这样!

我们知道已经有 Vue 3 版本,但我们将在即将发布的知识库文章中介绍该版本。 在那篇文章中,我们将介绍 Vue.JS 3 的基础知识和更多开发。

文档和其他有用的文章:
Vuejs.org
Vuejs.org 指南
GitHub 上的 Vue.js
在 CentOS 7 上安装 Git

附加视频
Vue JS 2 教程 #1

需要更多帮助?

我们的支持和解决方案团队充满了才华横溢的系统管理员,他们对该技术和其他网络托管技术有着深入的了解。 如果您对此处列出的步骤感到不舒服,或者只是在寻找进一步的反馈,我们只是一个电话, 聊天或者 远离为您提供所需的信息。
请致电 1.800.580.4985 联系我们