安装 Vue.js

本章将指导你如何在不同的环境中安装和设置 Vue.js。

兼容性注意

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

版本说明

Vue.js 目前有两个主要版本：

Vue 2：稳定版本，适合生产环境
Vue 3：最新版本，推荐用于新项目

本教程主要基于 Vue 3 进行讲解。

安装方式

1. CDN 引入

最简单的方式是通过 CDN 直接引入 Vue.js：

html

<!-- 开发版本，包含了有帮助的命令行警告 -->
<script src="https://unpkg.com/vue@next/dist/vue.global.js"></script>

<!-- 生产版本，优化了尺寸和速度 -->
<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>

完整示例

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.js 入门</title>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="count++">点击次数: {{ count }}</button>
  </div>

  <script src="https://unpkg.com/vue@next/dist/vue.global.js"></script>
  <script>
    const { createApp } = Vue
    
    createApp({
      data() {
        return {
          message: 'Hello Vue!',
          count: 0
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

2. NPM 安装

在用 Vue 构建大型应用时推荐使用 NPM 安装：

bash

# 最新稳定版
npm install vue@next

3. 使用构建工具

Vite（推荐）

Vite 是 Vue 团队推荐的构建工具，提供了极快的开发体验：

bash

# 创建新项目
npm create vue@latest my-project

# 进入项目目录
cd my-project

# 安装依赖
npm install

# 启动开发服务器
npm run dev

Vue CLI

Vue CLI 是基于 webpack 的官方脚手架工具：

bash

# 全局安装 Vue CLI
npm install -g @vue/cli

# 创建新项目
vue create my-project

# 进入项目目录
cd my-project

# 启动开发服务器
npm run serve

4. 在线开发环境

如果你想快速体验 Vue.js，可以使用在线开发环境：

Vue SFC Playground：https://sfc.vuejs.org/
CodePen：https://codepen.io/
JSFiddle：https://jsfiddle.net/
CodeSandbox：https://codesandbox.io/

开发工具

Vue DevTools

Vue DevTools 是调试 Vue 应用的浏览器扩展：

Chrome：在 Chrome Web Store 搜索 "Vue.js devtools"
Firefox：在 Firefox Add-ons 搜索 "Vue.js devtools"
Edge：在 Microsoft Edge Add-ons 搜索 "Vue.js devtools"

编辑器支持

VS Code

推荐安装以下扩展：

Vetur：Vue 2 项目的语法高亮和智能提示
Volar：Vue 3 项目的官方扩展
Vue 3 Snippets：Vue 3 代码片段

WebStorm

WebStorm 内置了对 Vue.js 的支持，无需额外配置。

Vim/Neovim

可以使用 vim-vue 插件获得语法高亮支持。

项目结构

使用 Vite 创建的 Vue 项目结构如下：

my-project/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.js
├── index.html
├── package.json
├── vite.config.js
└── README.md

关键文件说明

index.html：应用的入口 HTML 文件
src/main.js：应用的入口 JavaScript 文件
src/App.vue：根组件
vite.config.js：Vite 配置文件
package.json：项目依赖和脚本配置

第一个 Vue 应用

让我们创建一个简单的 Vue 应用：

javascript

// main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

vue

<!-- App.vue -->
<template>
  <div id="app">
    <h1>{{ title }}</h1>
    <p>当前计数: {{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      title: '我的第一个 Vue 应用',
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

button {
  margin: 0 10px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
</style>

常见问题

Q: Vue 2 和 Vue 3 有什么区别？

A: 主要区别包括：

组合式 API：Vue 3 引入了新的 API 风格
性能提升：更快的渲染和更小的包体积
TypeScript 支持：更好的 TypeScript 集成
多根节点：模板可以有多个根节点

Q: 应该选择 Vite 还是 Vue CLI？

A: 推荐使用 Vite，因为：

启动速度更快
热更新更快
更现代的构建工具
Vue 团队官方推荐

Q: 如何在现有项目中集成 Vue？

A: 可以通过 CDN 方式逐步集成：

引入 Vue.js 文件
创建 Vue 实例
逐步将现有功能迁移到 Vue 组件

下一步

现在你已经成功安装了 Vue.js，让我们继续学习：

安装 Vue.js ​

兼容性注意 ​

版本说明 ​

安装方式 ​

1. CDN 引入 ​

完整示例 ​

2. NPM 安装 ​

3. 使用构建工具 ​

Vite（推荐） ​

Vue CLI ​

4. 在线开发环境 ​

开发工具 ​

Vue DevTools ​

编辑器支持 ​

VS Code ​

WebStorm ​

Vim/Neovim ​

项目结构 ​

关键文件说明 ​

第一个 Vue 应用 ​

常见问题 ​

Q: Vue 2 和 Vue 3 有什么区别？ ​

Q: 应该选择 Vite 还是 Vue CLI？ ​

Q: 如何在现有项目中集成 Vue？ ​

下一步 ​

安装 Vue.js

兼容性注意

版本说明

安装方式

1. CDN 引入

完整示例

2. NPM 安装

3. 使用构建工具

Vite（推荐）

Vue CLI

4. 在线开发环境

开发工具

Vue DevTools

编辑器支持

VS Code

WebStorm

Vim/Neovim

项目结构

关键文件说明

第一个 Vue 应用

常见问题

Q: Vue 2 和 Vue 3 有什么区别？

Q: 应该选择 Vite 还是 Vue CLI？

Q: 如何在现有项目中集成 Vue？

下一步