Vue2 怎么安装？新手小白也能看懂的保姆级教程

terry 4小时前阅读数 9 #Vue

想上手Vue2做前端开发,却被“安装”这一步难住？别慌！这篇文章把Vue2安装的门道拆碎了讲，不管你是纯小白还是有点基础的新手，跟着步骤走，轻松把Vue2装到项目里～

安装Vue2前，得准备啥？

安装Vue2不是直接下一个安装包点“下一步”就行，得先把基础工具备好，这部分给你理清楚要准备啥、为啥要准备～

先装Node.js和npm

Vue2的安装方式里,npm安装和Vue CLI脚手架都得依赖Node.js环境，Node.js是让JavaScript能在电脑本地运行的“发动机”，而npm（Node Package Manager）是Node自带的包管理工具，用来下载、管理像Vue这样的第三方库。

操作步骤很简单：去Node.js官网选和你系统（Windows/Mac/Linux）对应的安装包下载，装的时候注意勾选“Add to PATH”（把Node加到系统环境变量里，这样电脑任何地方都能调用Node命令），装完后，打开命令行（Windows用CMD或PowerShell，Mac/Linux用终端），输入node -v和npm -v，要是能看到版本号（比如node v14.17.0、npm 6.14.13），说明装对了～

小提示：Vue2对Node版本要求没那么苛刻，Node 8以上基本都能跑，但为了稳定性，建议装Node 10或更高版本～

选个顺手的代码编辑器

写Vue代码总得有个趁手的“兵器”吧？推荐用VSCode，免费又好用，装完后还能装些Vue专属插件：比如Vetur（Vue2时代的代码高亮、语法检查神器），或者Volar（虽然主打Vue3，但对Vue2也兼容，功能更强大），装了这些插件，写代码时能自动补全、报错提示，效率直接起飞～

Vue2 有哪些安装方式？分别咋操作？

Vue2的安装方式分三种：CDN引入（最快上手）、npm安装（适合正式项目）、Vue CLI脚手架（一键生成项目模板），下面逐个拆解步骤～

CDN 引入（最快上手，适合快速测试）

要是你就想先体验下Vue2,不想搞复杂的项目结构，直接用CDN把Vue脚本“插”到HTML里就行，这种方式连Node和npm都不用装，打开浏览器就能跑代码～

步骤演示：

新建一个空白的HTML文件,命名为index.html；
在<head>或<body>标签里，加一行脚本引入代码：
```
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
```
（如果是生产环境，想让文件更小更快，可以把vue.js换成vue.min.js，这是压缩后的版本）；

写一段测试代码,验证Vue是否生效：

<body>
  <div id="app">{{ message }}</div>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Vue2 安装成功！'
      }
    })
  </script>
</body>

双击打开index.html，浏览器里能看到“Vue2 安装成功！”，说明CDN引入成功啦～

npm 安装（适合正式项目，管理依赖）

如果是做正经的前端项目,用npm管理包更规范——能把Vue2和其他依赖（比如路由、UI库）统一管理，还能锁定版本防止更新出问题，这种方式分“新建项目”和“给现有项目加Vue2”两种情况～

情况1：新建Vue2项目（从0开始）

先在电脑里建个空文件夹（比如叫my-vue2-project），作为项目根目录；
打开命令行,进入这个文件夹（比如cd my-vue2-project）；
执行npm init -y，生成package.json文件（-y是自动填完所有配置，不用手动输入）；
安装Vue2：执行npm install vue@2
等命令跑完，项目里会出现node_modules文件夹（里面装着Vue2的代码），同时package.json里的dependencies部分会出现"vue": "^2.7.14"（版本号可能不同，只要是2开头就对）；

情况2：给现有项目加Vue2

如果你的项目已经用npm管理了（比如早就有package.json），直接进入项目根目录，执行npm install vue@2，Vue2就会被加到项目依赖里～

Vue CLI 脚手架（一键生成项目模板，适合团队开发）

Vue CLI是官方出的脚手架工具，能帮你自动搭好项目结构、配置好Webpack（代码打包工具）、Babel（语法转换工具）这些复杂玩意儿，不用自己折腾环境，步骤如下～

全局安装Vue CLI

Vue CLI只需要装一次，以后新建项目不用重复装，打开命令行，执行：
npm install -g @vue/cli
装完后，执行vue --version，能看到CLI的版本号（比如@vue/cli 5.0.8）——注意哦，Vue CLI的版本和Vue框架的版本是两码事，CLI是工具，Vue是咱要学的框架～

新建Vue2项目

执行vue create my-vue2-app（my-vue2-app是项目名，你可以自己换），然后命令行会让你选模板：

第一步选“Manually select features”（手动选择功能），按回车；
第二步用空格勾选需要的功能（比如Babel、Router、Vuex这些，选完按回车）；
第三步会问“Choose a version of Vue.js that you want to start the project with”，选“2.x”（这步很关键，决定用Vue2还是Vue3）；
后面的配置（比如路由是否用history模式、ESLint选哪种规则），新手选默认选项就行，一路回车；

启动项目

项目创建好后,进入项目目录：cd my-vue2-app
然后执行npm run serve，等命令行显示“Compiled successfully”，打开浏览器访问http://localhost:8080（默认端口），能看到Vue的欢迎页面，说明项目创建成功，而且用的是Vue2～

装完咋确认Vue2真的能用了？

装完后得“验个货”，确保Vue2真的装对了，不同安装方式，验证方法也不一样～

CDN方式验证

打开用CDN的HTML文件,按F12打开浏览器控制台，输入Vue.version，要是能弹出"2.x.x"（比如"2.7.14"）的版本号，说明成了～

npm方式验证

在项目根目录打开命令行,执行node进入Node的REPL环境，然后输入：
const Vue = require('vue'); console.log(Vue.version)
能输出2开头的版本号，就说明npm装对了；
在项目代码里写一行测试代码,比如在main.js里加：
import Vue from 'vue'; console.log(Vue.version)
然后运行项目（比如npm run dev或npm run serve），看控制台输出的版本号；

Vue CLI方式验证

看项目里的package.json文件，dependencies部分的vue版本是不是x.x；
和npm方式一样,在代码里打印Vue.version，看控制台输出；

安装时碰到报错咋解决？

安装过程中碰到报错很正常,别慌！这里总结几个常见问题和解决办法～

命令行提示“node 不是内部或外部命令”（Windows）

说明Node.js没装对，或者环境变量没配置，解决步骤：

重新安装Node.js，装的时候一定要勾选“Add to PATH”选项；
要是已经装了,手动把Node的安装路径（比如C:\Program Files\nodejs\）加到系统环境变量的Path里；
改完环境变量后,重启命令行再试～

npm install 时卡住或报错“timeout”

这是因为npm默认的镜像源在国外,下载速度慢，解决办法：换国内的淘宝镜像源，执行命令：
npm config set registry https://registry.npm.taobao.org
然后重新执行npm install，一般就能快速下载了～

Vue CLI 安装时提示“权限不足”（Mac/Linux）

在命令前加sudo，
sudo npm install -g @vue/cli
输入电脑密码后，就能顺利安装。（Windows下一般不会有这问题，因为系统权限管理方式不同）

Vue CLI 创建项目时选错版本（选成Vue3了）

两种解决办法：

重新执行vue create 项目名，在选择Vue版本时选x；
要是已经创建了Vue3项目,想换成Vue2，可以先执行npm uninstall vue卸载Vue3，再执行npm install vue@2装Vue2，但要注意：项目里的路由、UI库等依赖可能和Vue2不兼容，需要额外调整～

项目里报“Vue is not defined”

原因是Vue没被正确引入：

CDN方式：检查<script>标签是不是在使用Vue的代码之前（比如把CDN脚本放在<head>里，确保先加载Vue再执行自己的代码）；
npm/Vue CLI方式：检查代码里是不是用了import Vue from 'vue'，或者在Vue CLI项目里，main.js有没有正确创建Vue实例；

安装后，咋开始第一个Vue2小 demo？

装完Vue2,得写个小demo练练手，才有成就感～下面分三种安装方式，教你写第一个Vue2案例～

CDN方式：实现“点击换标题”

打开之前的index.html，改成下面这样，实现“点击按钮切换标题”的效果：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">Vue2 测试</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ title }}</h1>
    <button @click="changeTitle">点我换标题</button>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        title: '这是初始标题'
      },
      methods: {
        changeTitle() {
          this.title = '标题被我改掉啦！'
        }
      }
    })
  </script>
</body>
</html>

保存后打开浏览器,点按钮能看到标题从“这是初始标题”变成“标题被我改掉啦！”，说明Vue的响应式数据绑定和事件处理都生效了～

npm方式：写个“文字反转”组件

假设你用npm新建了项目,结构里有src文件夹，跟着步骤做：

新建组件文件

在src里建components文件夹，再新建HelloVue2.vue如下：

<template>
  <div>
    <h2>{{ msg }}</h2>
    <button @click="reverseMsg">反转文字</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: 'Hello Vue2!'
    }
  },
  methods: {
    reverseMsg() {
      this.msg = this.msg.split('').reverse().join('')
    }
  }
}
</script>
<style scoped>
h2 {
  color: #42b983; /* Vue官方绿，好看～ */
}
</style>

在入口文件引入组件

打开src/main.js，引入并全局注册组件：

import Vue from 'vue'
import App from './App.vue'
import HelloVue2 from './components/HelloVue2.vue'
Vue.component('HelloVue2', HelloVue2) // 全局注册组件
new Vue({
  el: '#app',
  render: h => h(App)
})

在App.vue里使用组件

打开src/App.vue，把默认内容改成：

<template>
  <div id="app">
    <HelloVue2 />
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

启动项目

在项目根目录执行npm run dev（如果是自己配置的Webpack，可能是npm run serve，看package.json里的scripts），打开浏览器访问项目地址，能看到“Hello Vue2!”，点按钮文字会反转成“!2euV olleH”，说明组件的数据响应和方法调用都没问题～

Vue CLI方式：改造默认项目的“双向绑定”

Vue CLI创建的项目里，默认有个HelloWorld.vue组件，我们改它实现“输入内容实时显示”的双向绑定效果：

修改HelloWorld.vue

打开src/components/HelloWorld.vue，替换成下面的代码：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <input v-model="inputValue" placeholder="输入点内容"/>
    <p>你输入的是：{{ inputValue }}</p>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

保存后看效果

启动项目（npm run serve），打开浏览器，在输入框里打字，下面的文字会实时跟着变，说明Vue2的v-model双向数据绑定生效了～

现在你已经把Vue2安装的几种方式、验证方法、排错技巧还有小demo都过了一遍，接下来就可以深入学Vue2的组件、路由、状态管理这些知识点啦～要是安装过程中还有啥问题，评论区喊我，随时帮你解决～

版权声明

本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。

上一篇：Vue2里的activated钩子到底怎么用？

发表评论:取消回复

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

Vue2 怎么安装？新手小白也能看懂的保姆级教程

安装Vue2前，得准备啥？

先装Node.js和npm

选个顺手的代码编辑器

Vue2 有哪些安装方式？分别咋操作？

CDN 引入（最快上手，适合快速测试）

步骤演示：

npm 安装（适合正式项目，管理依赖）

情况1：新建Vue2项目（从0开始）

情况2：给现有项目加Vue2

Vue CLI 脚手架（一键生成项目模板，适合团队开发）

全局安装Vue CLI

新建Vue2项目

启动项目

装完咋确认Vue2真的能用了？

CDN方式验证

npm方式验证

Vue CLI方式验证

安装时碰到报错咋解决？

命令行提示“node 不是内部或外部命令”（Windows）

npm install 时卡住或报错“timeout”

Vue CLI 安装时提示“权限不足”（Mac/Linux）

Vue CLI 创建项目时选错版本（选成Vue3了）

项目里报“Vue is not defined”

安装后，咋开始第一个Vue2小 demo？

CDN方式：实现“点击换标题”

npm方式：写个“文字反转”组件

新建组件文件

在入口文件引入组件

在App.vue里使用组件

启动项目

Vue CLI方式：改造默认项目的“双向绑定”

修改HelloWorld.vue

保存后看效果

版权声明

作者文章