2023年最新的vue.js下载和安装的3种方法详解

互联网全栈开发实战 3097 阅读 0 评论 0 点赞

1. 文章引言

我主要从事java后端开发，但对前端也非常感兴趣，立志成为全栈工程师。

目前已学习了web三剑客：

超文本标记语言HTML(HyperTest Markup Language)
层叠样式表CSS(Cascading Style Shets)
JavaScript

后端开发spring，mybatis等框架，我猜想前端也定有框架。

果不其然，上网一搜，前端有vue，react，angularJs等。

按照个人计划来看，先学习vue框架。

工欲善其事，必先利其器。为了学好vue框架，先从下载和安装它开始。

接下来，我会使用3种方法下载和安装vue.js。

2. 环境搭建

但在安装vue.js之前，你需要安装node.js。

如何安装node.js，可以参考博文：2023年Node.js全网详细下载安装的最新教程

3. 安装vue.js

我使用如下3种方法来安装vue.js，但我推荐使用npm install的方式安装vue.js。

3.1 方法一：官网下载vue.js源代码

我们点击右侧链接，前往vue.js的官网，vue.js的官网链接地址：https://cn.vuejs.org

进入官网后，选择文档vue 2 文档，如下图所示：

在这里插入图片描述

或者点击该链接，直接跳转到Vue 2首页：https://v2.cn.vuejs.org

进入Vue 2首页后，点击起步按钮，如下图所示：

在这里插入图片描述

在vue 2页面中，向下滑动鼠标，直至看到<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>，如下图所示：

在这里插入图片描述

打开新的浏览器窗口，将src中的js文件(比如https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js)，复制到窗口的地址栏中，如下图所示：

在这里插入图片描述

先后使用Ctrl + A 和Ctrl + C，复制上图中的vue.js的脚本代码后。在你的项目中新建一个js文件，将该脚本代码复制到该文件中，如下图所示：

在这里插入图片描述

新建一个vueHtml页面，引入新创建的vue.js文件，如下图所示：

在这里插入图片描述

运行vueHtml页面，如下图所示：

在这里插入图片描述

vueHtml的源代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试vue.js脚本</title>
</head>
<body>
    <div id="vm">
        <p>Hello, {{name}}!</p>
        <p>You are {{age}} years old!</p>
    </div>
</body>
<script src="https://www.atool.online/article/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#vm',
        data: {
            name: 'super先生',
            age: 18
        }
    });
</script>
</html>

目前，除了少量项目使用Vue 2，很多项目已升级到Vue 3了，而且官网在2023 年 12 月 31 日停止维护Vue 2了，如下图所示：

在这里插入图片描述