Vue 创建一个应用

封面图 • 2026-01-16 • Vue

在 Vue 中创建一个应用通常指的是使用 Vue.js 框架来构建一个前端应用。Vue 是一个用于构建用户界面的渐进式 JavaScript 框架，你可以通过多种方式来创建一个 Vue 应用：

---

## ✅ 方法一：使用 Vue CLI 创建项目（推荐）

### 1. 安装 Vue CLI

如果你还没有安装 Vue CLI，请先全局安装它：

```bash
npm install -g @vue/cli
```

> 如果你使用的是 `yarn`，可以使用：
```bash
yarn global add @vue/cli
```

### 2. 创建项目

运行以下命令来创建一个新的 Vue 项目：

```bash
vue create my-app
```

- `my-app` 是你的项目名称。
- 然后会提示你选择一些配置（如 Vue 2 或 Vue 3、路由、Vuex 等），你可以按空格键选择。

### 3. 进入项目目录并启动开发服务器

```bash
cd my-app
npm run serve
```

打开浏览器访问 `http://localhost:8080`，你应该能看到一个默认的 Vue 页面。

---

## ✅ 方法二：使用 Vite 快速创建 Vue 项目（推荐现代项目）

Vite 是一个更快的前端构建工具，适合 Vue 3 项目。

### 1. 安装 Vite

```bash
npm create vite@latest my-vue-app --template vue
```

或者使用 yarn：

```bash
yarn create vite my-vue-app --template vue
```

### 2. 进入项目目录并安装依赖

```bash
cd my-vue-app
npm install
```

### 3. 启动开发服务器

```bash
npm run dev
```

访问 `http://localhost:5173` 查看你的 Vue 应用。

---

## ✅ 方法三：直接在 HTML 文件中使用 Vue（简单示例）

如果你只是想快速尝试 Vue 的功能，可以直接在 HTML 文件中引入 Vue 的 CDN。

```html
<!DOCTYPE html>
<html>
<head>
  <title>Vue App</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

createApp({
      data() {
        return {
          message: 'Hello Vue!'
        }
      }
    }).mount('#app');
  </script>
</body>
</html>
```

保存为 `index.html` 并在浏览器中打开即可看到效果。

---

## 🧠 总结

| 方法 | 适用场景 | 特点 |
|------|----------|------|
| Vue CLI | 传统项目 | 功能全面，适合复杂项目 |
| Vite | 现代项目 | 构建速度快，适合 Vue 3 |
| CDN 引入 | 快速测试 | 无需构建工具，适合学习和小项目 |

---

如果你告诉我你想要开发什么类型的应用（比如单页应用、组件库、移动端等），我可以为你提供更具体的指导！