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

第

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

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

1.文章引言

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

目前已学习了web三剑客：

超文本标记语言HTML(HyperTestMarkupLanguage)层叠样式表CSS(CascadingStyleShets)JavaScript

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

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

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

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

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

2.环境搭建

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

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

3.安装vue.js

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

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

我们点击右侧链接，前往vue.js的官网，vue.js的官网链接地址：

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

或者点击该链接，直接跳转到Vue2首页：

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

在vue2页面中，向下滑动鼠标，直至看到scriptsrc=/npm/vue@2/dist/vue.js/script，如下图所示：

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

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

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

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

vueHtml的源代码如下所示：

!DOCTYPEhtml

htmllang=en

head

metacharset=UTF-8

title测试vue.js脚本/title

/head

body

divid=vm

pHello,{{name}}!/p

pYouare{{age}}yearsold!/p

/div

/body

scriptsrc=vue.js/script

scripttype=text/javascript

newVue({

el:#vm,

data:{

name:super先生,

age:18

/script

/html

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

为了防止后期无法下载Vue2的代码，我特地将其上传到我的云盘，点击如下链接可以访问：

/202505/yuanma/vueym_283884.rar

3.2方法二：使用npminstall创建

由于，目前vue已经升级到Vue3了，官方建议使用npminstall的方式来安装vue。

所以，接下来，我使用npminstall来安装vue。

我准备把项目建于D:\project\test文件夹。在此文件夹的地址栏中输入cmd，可直接打开cmd命令框，且定位到当前目录，如下图所示：

在cmd命令框中，输入如下命令

npminitvue@latest

这一指令将会安装并执行create-vue，它是Vue官方的项目脚手架工具，如下图所示：

如上图所示，我写的Projectname是testApp，Packagename是package.json，其余是No。

如果不确定是否要开启某个