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.org/v2/guide/installation.html 并根据您的要求下载 vue.js。在这里，您将获得两个版本的Vue.js: 开发版本和生产版本。

下图显示了两个版本:

该开发版本最好在您的项目中使用，因为它不会被最小化，并且可以帮助您解决警告和项目开发过程中的调试模式。另一方面，将生产版本最小化，如上面的屏幕快照所示。

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

通过使用CDN

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

示例1:

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Vue.js example with CDN'
      }
    })
  </script>
</body>
</html>

输出:

CDN的Vue.js示例

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

示例2:

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Vue.js second example with CDN'
      }
    })
  </script>
</body>
</html>

输出:

Vue.js CDN的第二个示例