Vue.js 安装

兼容性检查

在项目中安装和使用 Vue.js 之前，您应该检查兼容性问题。 Vue 不支持 IE8 及以下版本的 IE，因为它使用 IE8 中不支持的 ECMAScript 5 功能。它支持所有符合 ECMAScript 5 的浏览器。

如何安装 Vue.js？

有几种方法可以使用 Vue.js。 您可以通过访问其官方网站进行安装，也可以从 CDN 库开始使用 Vue.js 文件。 在这里，我们将讨论一些如何在您的项目中安装和使用 Vue.js 的方法。

通过在 HTML 文件中直接使用 <script> 标签

如果您想在 HTML 文件中直接使用 Vue.js 的 <script> 标签，那么您必须从官方网站下载它。

让我们前往 Vue.js 的官方网站 https://vuejs.ac.cn/v2/guide/installation.html 并根据您的要求下载 vue.js。 在这里，您将获得两个版本的 Vue.js 供您使用 - 开发版和生产版。

下图显示了这两个版本

开发版本最适合在您的项目中使用，因为它未被最小化，并且在项目开发期间为您提供警告和调试模式。 另一方面，生产版本被最小化，如上面的屏幕截图所示。

Vue.js 建议您不要在开发过程中使用缩小版本，因为它不会显示开发过程中常见错误的警告。

使用 CDN

您也可以在您的应用程序中使用 CDN 库中的 Vue.js 文件。 在您的应用程序中的 <script> 元素中使用此链接 https://unpkg.com/vue，您将获得最新版本的 Vue.js。

示例 1

输出

Vue.js example with CDN 

您也可以在 jsDelivr (https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js) 和 cdnjs (https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js) 上获取 Vue.js。

示例 2

输出

Vue.js second example with CDN 

使用 NPM

如果您想使用 VueJS 构建大型应用程序，建议使用 NPM。 使用以下命令使用 npm 包安装 Vue.js。 它带有 Browserify 和 Webpack，以及其他必要的工具，使开发变得容易。

注意：如果您还不熟悉基于 Node.js 的构建工具，请勿使用此方法。

使用 CLI 命令行

您也可以使用 CLI 安装 Vue.js 并开始服务器激活。 使用以下命令使用 CLI 安装 Vue.js

安装 Vue.js cli 将需要几分钟。 完成后，它将显示 Vue.js 的 CLI 版本。

使用 Webpack 创建一个项目

使用以下命令使用 Webpack 创建一个项目。 在这里，我们将创建一个名为 “my_project” 的项目。

在此过程中，您将被要求输入 Y/n。 键入 Y 并继续操作。 它将自动下载模板和所有依赖项。

成功创建项目后，您将看到类似以下屏幕截图的消息。

启动项目和服务器

• 现在，项目已创建。 使用以下命令进入项目目录

• 使用以下命令启动服务器

您可以看到在运行 npm run dev 命令后，服务器已启动。 现在，打开兼容的浏览器，即 Google Chrome，然后运行 localhost https://:8080/#/ 以打开您的项目。