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

vue.js下载和安装 vue安装 2023-05-19 17:05:44 743人浏览独家记忆

摘要

目录1. 文章引言2. 环境搭建3. 安装vue.js3.1 方法一：官网下载Vue.js源代码3.2 方法二：使用npm install创建3.3 方法三：使用bower下载4.

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="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了，如下图所示：

在这里插入图片描述